5.1: Drawables, Styles, and Themes

Task 1: Create The Scorekeeper App

In this section, you will create your Android Studio project, modify the layout, and add onClick functionality to its buttons.

1.1 Create the “Scorekeeper”

buat project baru dengan nama “scorekeeper”

1.2 Create the layout for the main activity

tambahkan vector assets + dan –

isi name, icon size, check pada overrde seperti dibawah

lalu finish

isi name, icon size, check pada overrde seperti dibawah

lalu finish

masukkan kodingan untuk layout seperti dibawah

hasilnya :

1.3 Initialize your TextViews and score count variables

pada MainActivity.java tambahkan seperti berikut

1.4 Implement the onClick functionality for your buttons

tambahkan event handler untuk decrease dan increase score dan tambahkan kodingan seperti dibawah

setelah ditambah kodingan diatas hasilnya score bisa ditambah maupun dikurangi

Task 2: Create a Drawable resource

2.1 Create a Shape Drawable

tambahkan drawable resource file seperti dibawah

isikan dengan nama berikut

masukkan kodingan seperti dibawah

2.2 Apply the shape drawable as a background

pada setiap imagebutton tambahkan kodingan yang diberi highlight kuning baik untuk score team 1 maupun score team 2

lalu tampilannya kaan seperti dibawah, karena sebelumnya button_background telah di setting berbentuk oval di dalam button_background.xml

Task 3: Style your views

3.1 Create button styles

berikan kodingan seperti dibawah

setelah itu pada setiap imagebutton  tambahkan kodinga seperti yang di highlight kuning dibawah

3.2 Create TextView styles

masukkan kodingan dibawah

lalu lakukan refactor pilih extract lalu style

masukkan style name-nya

3.3 Updating the styles

masukkan kodingan yang di highlight dibawah

setelah itu tampilannya akan seperti dibawah ini

Task 4: Themes and Final Touches

4.1 Explore themes

buka manifest dan ganti theme seperti dibawah

maka hasilnya tidak ada action bar, setelah percobaan ini kembalikan kodingan theme seperti semula

4.2 Add theme button to the menu

klik kanan pada res setelah itu klik pada android resource file

isikan file name, dan ganti resource type menjadi menu lalu ok

lalu pada main_menu.xml tambahkan kodingan berikut

setelah itu string seperti berikut

lalu buat oncreateoption

setelah itu maka akan ada pada mainactivity.java oncreate menu tadi

4.3 Change the theme from the menu

ubah app theme menjadi seperti berikut

setelah itu masukkan kodingan dibawah

setelah itu masukkan lagi kodingan berikut

maka pada menu hasilnya seperti berikut, di bawah merupakan day mode

jika di klik night mode maka tampilan akan seperti berikut

4.4 SaveInstanceState

saat merotate layar maka untuk mencegah score kembali ke 0, kita memakai kodingan seperti dibawah

lalu hasilnya seperti berikut