Android Fundamentals 05.1 : Drawables, Styles, and Themes

Inas

Published in

Android Studio

9 min readFeb 21, 2019

Alat dan aplikasi yang diperlukan:

PC/Desktop dengan Sistem Operasi Windows
Java Development Kit (JDK) versi 11
Android Studio versi 3.3

Tugas 1 : Membuat Aplikasi Scorekeeper

1.1 Membuat Proyek

Buka Android Studio. Buat proyek baru dan pilih template Empty Activity.

2. Beri nama proyek baru dengan nama Scorekeeper.

3. Klik Finish.

1.2 Membuat Layout untuk MainActivity

Buka activity_main.xml dan klik tab Text. Ubah ViewGroup menjadi LinearLayout.

2. Hapus kode XML berikut.

3. Tambahkan atribut seperti berikut.

1.3 Membuat Score Container

Dalam LinearLayout, tambahkan dua elemen RelativeLayout dengan atribut seperti berikut.

2. Tambahkan dua elemen ImageButton pada masing-masing RelativeLayout: satu untuk pengurangan nilai, dan satu untuk peningkatan nilai. Gunakan atribut berikut.

3. Tambahkan TextView untuk masing-masing RelativeLayout di antara ImageButton untuk menampilkan skor. Gunakan atribut berikut.

1.4 Tambahkan Vector Assets

Pilih File > New > Vector Asset untuk membuka Vector Asset Studio.

2. Klik ikon untuk membuka daftar file ikon. Pilih kategori Content. Pilih ikon add dan klik OK.

3. Ubah nama resource file ic_plus dan cek Override checkbox di dekat opsi size.

4. Ubah ukuran ikon menjadi 40dp x 40dp.

5. Klik Next, kemudian Finish.

6. Ulangi proses ini untuk menambah ikon remove dan beri nama file ic_minus.

7. Tambahkan atribut berikut ke elemen ImageButton pada sisi kiri layout.

8. Tambahkan atribut berikut ke elemen ImageButton pada sisi kanan layout.

9. Ekstrak semua string resources. Proses ini menghilangkan semua string dari kode java dan meletakkannya pada strings.xml.

1.5 Menginisialisasi Elemen TextView dan Variabel Penghitungan Skor

Buat dua variabel integer yang merepresentasikan skor dari masing-masing tim. Kedua variabel ini mengambil referensi dari elemen TextView.

2. Pada method onCreate() di MainActivity.java, cari elemen TextView skor menggunakan id dan arahkan ke variabel yang tadi sudah dibuat.

1.6 Implementasi Click Handler untuk Elemen ImageButton

Buka activity_main.xml dan tambahkan atribut berikut pada ImageButton ‘decrease’.

2. Method decreaseScore akan bergaris bawah merah. Klik ikon red bulb pada margin kiri atau klik nama method dan tekan Option-Return, pilih Create ‘decreaseScore(view)’ in ‘MainActivity’. Android Studio mebuat method decreaseScore() pada MainActivity.java.

3. Tambahkan atribut android:onClick untuk ImageButton kedua seperti berikut.

4. Ulangi langkah sub-tugas 1.6 nomor 2 (decreaseScore)pada method increaseScore.

5. Gunakan view.getID() untuk mendapatkan ID dari ImageButton yang diklik.

Tugas 2 : Membuat Drawable Resource

2.1 Membuat ShapeDrawable

Buka folder drawable. Klik kanan pada folder drawable > New > Drawable resource file. Beri nama button_background, lalu klik OK.

2. Buka button_background.xml, klik tab Text untuk mengedit kode. Hapus semua kode, kecuali kode berikut.

<?xml version="1.0" encoding="utf-8"?>

3. Tambahkan kode berikut untuk membuat bentuk lonjong dengan garis luar.

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
        <stroke 
            android:width="2dp"
            android:color="@color/colorPrimary"/>
</shape>

2.2 Mengaplikasikan ShapeDrawable sebagai Background

Buka file activity_main.xml.
Tambahkan Drawable sebagai background elemen ImageButton.

android:background="@drawable/button_background"

3. Klik tab Preview pada layout editor untuk melihat bahwa ukuran background secara otomatis sesuai dengan ukuran ImageButton.

4. Ubah ukuran android:layout_width dan android:layout_height menjadi 70dp.

5. Klik pada “70dp” , lalu tekan Alt+Enter dan pilih Extract dimension resource dari pop-up menu. Masukkan “button_size” pada kolom Resource name. Klik OK.

6. Ubah android:layout_height dan android:layout_width untuk masing-masing elemen ImageButton.

android:layout_width="@dimen/button_size"
android:layout_height="@dimen/button_size"

7. Klik panel Preview. ShapeDrawable kini telah digunakan pada elemen ImageButton.

Tugas 3 : Style Elemen View

3.1 Membuat Style Button

Buka file styles.xml.
Di antara tag <resources> , tambahkan tag berikut.

5. Buka file activity_main.xml. Hapus dan tambahkan atribut seperti berikut pada button Minus dan Plus.

3.2 Membuat Style TextView

Tambahkan atribut berikut pada semua elemen TextView.

android:textAppearance="@style/TextAppearance.AppCompat.Headline"

2. Klik kanan pada atribut TextView. Pilih Refactor > Extract > Style…

3. Beri nama ScoreText, lalu klik OK.

4. Klik OK.

5. Klik Do Refactor pada bagian panel bawah.

6. Jalankan aplikasi.

3.3 Mengupdate Style

Buka file strings.xml dan tambahkan kode berikut.

2. Buat style baru bernama TeamText.

3. Pada activity_main.xml, tambahkan kode berikut.

style="@style/TeamText"

4. Jalankan aplikasi.

Tugas 4 : Tema dan Finishing

4.1 Menelusuri Tema

Buka file AndroidManifest.xml dan ubah kode pada atribut android:theme menggunakan value berikut.

android:theme="@style/Theme.AppCompat.Light.NoActionBar"

2. Jalankan aplikasi. Kini, tidak ada tampilan toolbar pada aplikasi.

3. Kembalikan tema aplikasi seperti semula.

4.2 Menambahkan Tombol Tema pada Menu

Buka file strings.xml dan tambahkan kode berikut.

<string name="night_mode">Night Mode</string>
<string name="day_mode">Day Mode</string>

2. Klik kanan pada direktori res, lalu pilih Android resource file.

3. Beri nama main_menu, ubah Resource Type menjadi Menu dan klik OK. Akan muncul file bernama main_menu.xml.

4. Buka file main_menu.xml bagian tab Text. Tambahkan atribut berikut.

<item 
    android:id="@+id/night_mode"
    android:title="@string/night_mode"/>

5. Buka file MainActivity.java lalu tekan Ctrl + O pada keyboard untuk memilih menu Override Method. Pilih seperti pada gambar di bawah ini. Klik OK.

6. Tambahkan kode berikut.

getMenuInflater().inflate(R.menu.main_menu, menu);

4.3 Mengubah Tema dari menu

Buka file styles.xml, lalu modifikasi parent AppTheme dengan “Theme.AppCompat.DayNight.DarkActionBar”.

2. Tambahkan kode berikut pada file MainActivity.java.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
   //Check if the correct item was clicked
   if(item.getItemId()==R.id.night_mode){}
       // TODO: Get the night mode state of the app.
   return true;
}

3. Ubah komentar TODO: dengan kode berikut untuk mengaktifkan Night Mode nantinya.

if(item.getItemId()==R.id.night_mode){
    // Get the night mode state of the app.
    int nightMode = AppCompatDelegate.getDefaultNightMode();
    //Set the theme mode for the restarted activity
    if (nightMode == AppCompatDelegate.MODE_NIGHT_YES) {
        AppCompatDelegate.setDefaultNightMode
                          (AppCompatDelegate.MODE_NIGHT_NO);
} else {
   AppCompatDelegate.setDefaultNightMode
                         (AppCompatDelegate.MODE_NIGHT_YES);
}
// Recreate the activity for the theme change to take effect.
recreate();

4. Jalankan aplikasi. Kini terdapat opsi Night Mode pada bagian pojok kanan atas aplikasi.

5. Ganti kode statement return super.onCreateOptionsMenu(menu) pada method onCreateOptionsMenu()dengan kode berikut.

// Change the label of the menu based on the state of the app.
int nightMode = AppCompatDelegate.getDefaultNightMode();
if(nightMode == AppCompatDelegate.MODE_NIGHT_YES){
    menu.findItem(R.id.night_mode).setTitle(R.string.day_mode);
} else{
    menu.findItem(R.id.night_mode).setTitle(R.string.night_mode);
}
return true;
}

6. Jalankan aplikasi dan pilih Night Mode.

4.4 SaveInstanceState

Buka file MainActivity.java dan tambahkan kode berikut.

static final String STATE_SCORE_1 = "Team 1 Score";
static final String STATE_SCORE_2 = "Team 2 Score";

2. Pada baris akhir MainActivity.java, override method onSaveInstanceState() seperti berikut.

3. Pada baris akhir method onCreate() , tambahkan kode savedInstanceState seperti berikut.

4. Jalankan aplikasi. Tekan tombol Plus (+) untuk menambahkan skor dan putar device secara horizontal untuk memastikan bahwa skor tidak berubah.