5.1: Drawable, Gaya, dan Tema

Tugas 1: Membuat Aplikasi Scorekeeper

1.1 Buat proyek “Scorekeeper”

Mulai Android Studio dan buat proyek Android Studio baru.
- Beri nama proyek Anda “Scorekeeper”
- Terima default untuk Company Domain dan Project location.
Pilih template Empty Activity. 1 Terima nama default untuk aktivitas, pastikan Generate Layout Filedicentang dan klik Finish.

1.2 Buat layout untuk aktivitas utama

Buka file layout untuk aktivitas utama.
Hapus TextView yang berisi “Hello World.”
Ubah tampilan root menjadi LinearLayout dan tambahkan atribut berikut (tanpa menghapus atribut yang sudah ada):

Atribut Nilai

android:orientation “vertical”
Di dalam LinearLayout, tambahkan dua grup tampilan RelativeLayout (satu untuk menampung skor untuk setiap tim) dengan atribut berikut:

Atribut Nilai

android:layout_width “match_parent”

android:layout_height “0dp”

android:layout_weight “1”
Tambahkan dua tampilan ImageButton (satu untuk meningkatkan skor dan satu untuk menurunkan skor) dan sebuah TextView untuk menampilkan skor di antara tombol ke setiap RelativeLayout.
Tambahkan atribut android:id ke TextView skor dan semua ImageButton.
Tambahkan satu lagi TextView ke setiap RelativeLayout di atas skor untuk menunjukkan Nama Tim.

Implementasikan fungsionalitas onClick untuk tombol Anda.

Di MainActivity Anda, implementasi dua metode onClick: increaseScore() dan decreaseScore().

Catatan: semua metode onClick memiliki tanda tangan yang sama – metode ini mengembalikan void dan mengambil View sebagai argumen.
Tombol kiri akan mengurangi TextView skor, sedangkan tombol kanan akan menambahnya.

Tugas 2: Membuat sumber daya Drawable

2.1 Buat Drawable Bentuk

Klik kanan folder drawable di direktori sumber daya.
Pilih New > Drawable resource file.
Beri nama file “button_background” dan klik OK.
Buang semua kode, kecuali:
```
<?xml version="1.0" encoding="utf-8"?>
```
Tambahkan kode berikut yang membuat bentuk oval 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 Terapkan drawable bentuk sebagai latar belakang

Buka file layout untuk aktivitas utama Anda.
Untuk semua tombol, tambah drawable sebagai latar belakang: android:background="@drawable/button_background". Perhatikan bahwa latar belakang otomatis diskalakan agar pas dengan ukuran tampilan.
Ukuran tombol besarnya harus sedemikian rupa sehingga bisa dirender dengan benar di semua perangkat. Ubah “layout_height” dan “layout_width” untuk setiap tombol menjadi 70dp, yaitu ukuran yang baik untuk kebanyakan perangkat. Menggunakan dimensi yang di-hardcode bukanlah praktik terbaik, tetapi menggunakan ketebalan dengan layout linear yang dilapiskan untuk mendapatkan ukuran yang diinginkan akan melibatkan terlalu banyak detail untuk praktik ini.
```
android:layout_width="70dp"
android:layout_height="70dp"
```
Ekstrak sumber daya dimensi sehingga Anda bisa mengaksesnya di satu lokasi. Untuk informasi cara melakukannya, lihat Appendix.
Jalankan aplikasi Anda.

Tugas 3: Tata gaya tampilan Anda

3.1 Buat gaya tombol

Dalam direktori sumber daya, cari dan buka file “values/styles.xml”. Di file inilah semua kode gaya Anda ditempatkan. Gaya “AppTheme” selalu ditambahkan secara otomatis dan Anda bisa melihat bahwa gaya ini diluaskan dari “Theme.AppCompat.Light.DarkActionBar”.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

Buat gaya untuk tombol plus dengan melluaskan gaya “ScoreButtons”:

Buat gaya untuk tombol minus:

Di file layout untuk aktivitas utama, buang semua atribut yang Anda definisikan di gaya untuk setiap tombol dan ganti dengan gaya yang sesuai:

3.2 Buat gaya TextView

Tampilan teks untuk menampilkan nama tim dan skor juga bisa ditata gayanya karena warna dan font-nya sama. Lakukan yang berikut:

Tambahkan atribut berikut ke semua TextView:+
```
android:textAppearance="@style/TextAppearance.AppCompat.Headline"
```

Tugas 4: Tema dan Sentuhan Akhir

4.1 Jelajahi tema

Di file manifes Android, temukan atribut <application> tag dan ubah android:theme ke:
```
android:theme="@style/Theme.AppCompat.Light.NoActionBar"
```
Ini adalah tema yang ditentukan sebelumnya yang membuang bilah tindakan dari aktivitas Anda.
Jalankan aplikasi Anda. Bilah alat menghilang!
Ubah tema aplikasi kembali ke AppTheme yang merupakan anak tema Theme.Appcompat.Light.DarkActionBar seperti yang bisa dilihat di styles.xml.

Klik kanan direktori “res” dan pilih New > Android resource file.
Beri nama file “main_menu”, ubah Resource Type ke Menu, dan klik OK.
Tambahkan item menu dengan atribut berikut:
```
<item
    android:id="@+id/night_mode"
    android:title="@string/night_mode"/>
```
Buka “strings.xml” dan buat dua sumber daya string:
```
<string name="night_mode">Night Mode</string>
<string name="day_mode">Day Mode</string>
```
Tekan Ctrl – O untuk membuka menu Override Method di file Java aktivitas utama Anda dan pilih metode onCreateOptionsMenu yang terletak di bawah kategori “android.app.Activity”. Klik OK.
Mekarkan menu yang baru Anda buat di dalam metode onCreateOptionsMenu() :
```
getMenuInflater().inflate(R.menu.main_menu, menu);
```

Di file styles.xml, ubah induk AppTheme menjadi “Theme.AppCompat.DayNight.DarkActionBar.

Ganti metode onOptionsItemSelected() di MainActivity dan periksa item menu mana yang diklik:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
   //Check if the correct item was clicked
   if(item.getItemId()==R.id.night_mode){}
}

Sebagai respons terhadap klik pada tombol menu, Anda bisa memverifikasi setelan mode malam saat ini dengan memanggil AppCompatDelegate.getDefaultNightMode().

Jika mode malam diaktifkan, ubah menjadi status nonaktif:

//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);
}

Jika tidak, aktifkan mode ini:

else {
   AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
}

Tema hanya bisa berubah saat aktivitas sedang dibuat, sehingga panggil recreate() agar perubahan tema bisa diterapkan.
Metode onOptionsItemSelected() Anda harus mengembalikan true, karena klik item ditangani.
Jalankan aplikasi Anda. Menu “Mode Malam” sekarang akan mengalihkan tema aktivitas Anda. Anda mungkin memperhatikan bahwa label untuk item menu Anda selalu tampak sebagai “Night Mode” yang mungkin membingungkan pengguna jika aplikasi Anda sudah dalam tema gelap.

Tambahkan kode berikut di metode onCreateOptionsMenu:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
   //Inflate the menu from XML
   getMenuInflater().inflate(R.menu.main_menu, menu);

   //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;
}

Jalankan aplikasi Anda. Label tombol menu sekarang berubah dengan tema.

4.4 SaveInstanceState

Ganti metode onSaveInstanceState() di MainActivity agar mempertahankan nilai dua TextView skor:

@Override
protected void onSaveInstanceState(Bundle outState) {
   //Save the scores
   outState.putInt(STATE_SCORE_1, mScore1);
   outState.putInt(STATE_SCORE_2, mScore2);
   super.onSaveInstanceState(outState);
}

Di metode onCreate() MainActivity.java, periksa apakah terdapat savedInstanceState. Jika ada, pulihkan skor ke tampilan teks:

if (savedInstanceState != null) {
    mScore1 = savedInstanceState.getInt(STATE_SCORE_1);
    mScore2 = savedInstanceState.getInt(STATE_SCORE_2);

    //Set the score text views
    mScoreText1.setText(String.valueOf(mScore1));
    mScoreText2.setText(String.valueOf(mScore2));
}

Cukup demikian! Selamat, Anda sekarang memiliki Aplikasi Scorekeeper dengan gaya.

maulanahabibie's blog