Mendalami Drawable, Style, dan Tema pada Android

Dalam bagian ini, kita akan membuat proyek Android Studio, memodifikasi layout, dan menambahkan fungsionalitas onClick pada tombolnya

 

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

KEmudian kita akan menambahkan beberapa vector asset juga untuk merubah button dengan menjadi tanda + dan –

Tambahkan aset vektor

1. Pilih File > New > Vector Asset untuk membuka Vector Asset Studio.
2. Klik ikon untuk mengubahnya menjadi daftar file ikon material. Pilih kategori Content.
3. Pilih ikon plus dan klik OK.
4. Ubah nama file sumber daya “ic_plus” dan centang kotak Override di sebelah opsi ukuran.
5. Ubah ukuran ikon ke 40dp x 40dp.
6. Klik Next, lalu Finish.
7. Ulangi proses ini untuk menambahkan ikon “minus” dan beri nama file “ic_minus”

kemudian atur tampilan xml layout manjadi seperti berikut:

 

Kemudian kita akan mencoba mem fungsikan tombol dan beberapa attributa tadi

Untuk mencatat skor, kita memerlukan dua hal:

• Variabel integer agar kita bisa melacak skor.
• Referensi ke TextView skor kita di MainActivity sehingga kita bisa memperbarui skor.
• Dalam metode onCreate() MainActivity, temukan TextView skor kita menurut id dan tetapkan TextView ke variabel anggota.
• Buat dua variabel anggota integer, yang menunjukkan skor setiap tim, dan inisialisasi ke 0.

PAda method onclik decreaseScore dan IncreaseScore masukkan kode seperti berikut:

Di Android, grafik sering kali ditangani oleh sebuah sumber daya yang disebut Drawable

ShapeDrawable adalah bentuk geometris primitif yang didefinisikan di file xml oleh sejumlah atribut, yang mencakup warna, bentuk, padding, dan lainnya. Ini mendefinisikan grafik vektor, yang bisa diskalakan naik dan turun tanpa kehilangan definisi.

1. Klik kanan folder drawable di direktori sumber daya.
2. Pilih New > Drawable resource file.
3. Beri nama file “button_background” dan klik OK.
4. Buang semua kode, kecuali:

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

5. Tambahkan kode berikut yang membuat bentuk oval dengan garis luar:

tampilan sementara project kita adalah seperti berikut:

Kemudian kita akan menerapkan style dan menerapkannya ke beberapa tampilan dan layout, yang memungkinkan atribut umum diperbarui secara bersamaan dari satu lokasi.

Di Android, gaya bisa mewarisi properti dari gaya lain. Kita bisa mendeklarasikan induk untuk gaya kita menggunakan parameter “parent” opsional dan memiliki properti berikut:

• Atribut gaya apa pun yang didefinisikan oleh gaya induk otomatis disertakan di dalam gaya anak.
• Atribut gaya yang didefinisikan dalam gaya induk dan anak menggunakan definisi gaya anak (anak mengganti induk).
• Gaya anak bisa mencakup atribut tambahan yang tidak didefinisikan oleh induk.

Misalnya, keempat tombol dalam contoh ini memiliki drawable latar belakang umum yang sama, tetapi dengan ikon yang berbeda untuk plus dan minus. Terlebih lagi, dua tombol untuk menambah memiliki ikon yang sama, seperti halnya dengan dua tombol untuk mengurangi. Dengan demikian, kita bisa membuat 3 gaya:

1. Gaya tombol skor untuk semua tombol, yang menyertakan properti default tampilan ImageButton dan juga latar belakang drawable.
2. Gaya tombol minus untuk tombol kurang, yang mewarisi atribut gaya sebelumnya dan juga menyertakan ikon minus.
3. Gaya tombol plus untuk tombol tambah, juga mewarisi gaya tombol skor dan juga menyertakan ikon plus.

kembali pada project kita, kita tambahkan style berikut ini:

Kemudian kita akan menambahkan tema “mode malam” ke aplikasi kita, yang akan memungkinkan pengguna menggunakan versi kontras rendah pada aplikasi kita yang lebih nyaman untuk mata di malam hari, serta membuat beberapa sentuhan akhir pada Antarmuka Pengguna.

1. 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 kita.

2. Jalankan aplikasi kita. Bilah alat menghilang!

3. Ubah tema aplikasi kembali ke AppTheme yang merupakan anak tema Theme.Appcompat.Light.DarkActionBar seperti yang bisa dilihat di styles.xml.

Kemudian, kita akan menambahkan tombol menu yang akan mengalihkan aplikasi dari atau ke tema reguler dan tema “mode malam”.

1. Klik kanan direktori “res” dan pilih New > Android resource file.
2. Beri nama file “main_menu”, ubah Resource Type ke Menu, dan klik OK.
3. 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>

 

Kemudian, kita akan memodifikasi beberapa method berikut:

Hasil akhir tampilan adalah seperti berikut dengan fungsi yang sudah bekerja