Belajar Style dan Theme Dalam Pembuatan Aplikasi Android

Pada bagian ini, Anda akan mempelajari prinsip desain yang ada di Android. Anda juga akan mempelajari bagaimana menerapkan struktur dan tampilan view dalam sebuah berkas style. 

Prinsip dasar dalam merancang antarmuka aplikasi Android harus mematuhi kaidah yang ditetapkan oleh Design Guideline. Guideline ini dibuat oleh tim Android di Google. Beberapa prinsipnya adalah:

1. Menampilkan informasi yang hanya dibutuhkan.
2. Jika aplikasi meminta izin pengguna untuk melakukan sebuah aksi, maka pengembang harus menyediakan mekanisme untuk membatalkan izin tersebut.
3. Lakukan interupsi jika diperlukan.
4. Menggunakan teks secara singkat. Gunakan gambar untuk menjelaskan informasi secara lebih deskriptif.
5. Jaga data pengguna.
6. Permudah pengguna untuk melakukan sesuatu yang penting secara cepat.
7. Jika terlihat sama, maka perilaku haruslah sama.
8. Bantu pengguna untuk membuat keputusan tapi tetap biarkan pengguna menentukan keputusannya.

Best Practice

Terdapat beberapa langkah terbaik (best practice) yang harus diperhatikan ketika mengembangkan sebuah aplikasi Android, di antaranya:

1. Desain yang baik untuk performa aplikasi
   Aplikasi yang dirancang dengan baik harus dapat dijalankan dengan cepat dan jika terdapat proses yang memakan waktu, maka jalankan di background dan asynchronous.
2. Desain yang baik agar aplikasi dapat bersifat responsif
   Berikan feedback ke pengguna terhadap aksi yang dilakukannya. Contohnya, jika pengguna menekan sebuah tombol, maka aplikasi harus menampilkan efek tekan.
3. Desain yang mengakomodasi kebutuhan informasi pengguna
   Aplikasi Anda harus menampilkan informasi yang dibutuhkan pengguna. Bila diperlukan, aplikasi perlu menampilkan informasi terakhir yang diperoleh, sehingga pengguna tidak perlu lagi menunggu aplikasi memuat data dari server.
4. Desain untuk optimasi pengunaan baterai
   Usahakan agar aplikasi menggunakan daya baterai yang kecil. Minimalisir penggunaan background service yang tidak perlu. Berhentikan semua listener jika aplikasi tidak sedang dijalankan. Manfaatkan alarmmanager dan jobscheduler jika memang terdapat task yang harus dilakukan secara berkala.
5. Desain untuk efisiensi pengunaan koneksi jaringan
   Aplikasi yang baik adalah yang efisien dalam memanfaatkan koneksi ke jaringan internet. Ia memilah-milah task mana yang perlu dijalankan saat perangkat pengguna terhubung ke wifi (unmetered network) atau pun network lain. Penggunaan koneksi jaringan yang baik akan menjadi hal wajib jika aplikasi Anda ingin tetap digunakan oleh pengguna.

Nilai yang bagus pada poin tampilan akan mendukung kualitas fungsi aplikasi yang dibuat. Pengguna akan mempertahankan aplikasi Anda dan tetap menggunakannya selama aplikasi dibutuhkan dan memenuhi poin-poin di atas.

Kembali pada topik style dan theme. Jika Anda pernah mengembangkan sebuah aplikasi berbasis web, maka sudah pasti tidak asing lagi dengan CSS (Cascading Style Sheet). Ia mengatur tampilan dari sebuah halaman website. Pendekatan yang serupa juga berlaku di Android. Inilah yang dinamakan style.

Style merupakan sebuah kumpulan properti yang dibutuhkan untuk mendefinisikan bagaimana sebuah komponen view dan layar jendela (bisa activity maupun fragment) ditampilkan. Contoh properti ini adalah height, width, background_color.

Style terdefinisi dalam file xml sendiri. Anda bisa menemukannya di res →  values  →  styles.xml.

Sebagai contoh, Anda memiliki sebuah textview yang berisi berbagai atribut seperti contoh kode di bawah ini. Textview ini berguna untuk menampilkan konten dari detail informasi yang terdapat di keseluruhan aplikasi.

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#00FF00"
android:typeface="monospace"
android:text="@string/hello" />

Sangat tidak efektif jika kita melakukan copy paste dari satu layout xml ke layout xml lainnya. Kita dapat menyederhanakan hal tersebut menjadi:

<TextView
style="@style/CodeFont"
android:text="@string/hello" />

Attribute layout_width, layout_height, textcolor, dan typeface bisa kita pindahkan menjadi sebuah style sendiri untuk textview tersebut dan dapat digunakan kembali untuk semua obyek textview sejenis.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CodeFont" parent="@android:style/TextAppearance.Medium">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textcolor">#00FF00</item>
    <item name="android:typeface">monospace</item>
</style>
</resources>

Beberapa aturan yang harus diperhatikan ketika kita menggunakan styles yaitu:

1. Semua style yang dibuat harus berada dalam tag resources.
2. Semua style yang ingin didefinisikan harus berada dalam tag style.
   

   
   <style name="CodeFont" parent="@android:style/TextAppearance.Medium">
   
   

   Name      :    Nama dari style yang Anda buat.
   Parent    :     Nilai style yang akan mewarisi style (termasuk attribute di dalamnya) yang telah ada, umumnya bawaan dari sdk ataupun platform.
   Style yang diwarisi akan dapat diubah dan ditambahkan atributnya dalam style baru yang Anda buat. Android sudah menyediakan beragam style yang bisa Anda gunakan untuk beragam tampilan.
3. Semua atribut yang didefinisikan dalam sebuah style harus berada dalam tag item.
   

   
   <item name="android:layout_width">match_parent</item>
   
   

   Name                  :    Nama atribut yang ingin didefinisikan.
   Match_parent :    Nilai dari atribut tersebut.

Andaikan dalam satu kasus Anda ingin membuat turunan dari style yang telah Anda buat. Misalnya Anda ingin membuat style CodeFont berwarna merah, Anda dapat melakukannya dengan cara berikut ini:

<style name="CodeFont.Red">
<item name="android:textColor">#FF0000</item>
</style>

atau berwarna merah dan juga dengan ukuran yang besar menjadi seperti ini :

<style name="CodeFont.Red">
<item name="android:textColor">#FF0000</item>
<item name="android:textSize">30sp</item>
</style>

Mudah bukan? Anda baru saja belajar tentang bagaimana sebuah style dibuat dan diimplementasikan. Selanjutnya Anda akan mempelajari theme.

Theme atau tema itu sendiri merupakan sebuah style yang diterapkan khusus untuk activity dan application pada berkas AndroidManifest.xml. Pada proyek sebelumnya, kita mendefinisikannya dengan cara berikut ini:

android:theme="@style/AppTheme"

Di mana AppTheme pada styles.xml berisi :

<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>
</resources>

Sebuah styles yang inherit ke tema AppCompat untuk varian light dan memiliki DarkActionBar. Semua nilai pada atribut terdapat pada berkas colors.xml yang berisi.

<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
</resources>

Saat ini, pengembangan aplikasi Android mengacu pada implementasi prinsip material design untuk merancang user interface dan user experience. Anda bisa mempelajari lebih lanjut tentang material design pada tautan berikut:

• Material Design

Semenjak material design ditetapkan sebagai acuan utama untuk pengembangan user interface dan user experience, terdapat penyederhanaan komponen inti yang digunakan. Pada gambar di atas, terlihat titik-titik mana saja yang hanya kita gunakan untuk menjadi fondasi dasar style aplikasi yang dibuat.

Bila Anda tertarik untuk mengetahui prinsip sebelum material design, Anda dapat melihat video berikut ini:

• Video From Holo to Material

Tujuan

Pada codelab kali kita akan menerapkan style dan theme pada contoh aplikasi yang telah kita buat sebelumnya pada modul Views dan Viewgroup. Beberapa poin yang didapatkan pada materi ini adalah:

1. Bagaimana memanfaatkan style pada aplikasi?
2. Bagaimana memanfaatkan theme pada aplikasi?

 Hasil dari aplikasi yang dibuat akan jadi seperti ini.

Codelab Style dan Theme

1. Buka kembali proyek sebelumnya (MyViewAndViews) atau unduh di sini :
   • Source Code MyViewAndViews (Java)
   • Source Code MyViewAndViews (Kotlin)
     
2. Buka berkas colors.xml di res → values → colors.xml. Ubah setiap nilai yang ada saat ini dengan nilai-nilai berikut :

   
   <?xml version="1.0" encoding="utf-8"?>
   <resources>
       <color name="colorPrimary">#607D8B</color>
       <color name="colorPrimaryDark">#455A64</color>
       <color name="colorAccent">#FF5722</color>
       <color name="colorSubTitle">#757575</color>
   </resources>
   
   

   
   
3. Selanjutnya, buka berkas styles.xml di res → values → styles.xml dan tambahkan beberapa style seperti di bawah ini:

1. <resources>
2.  
3.     <!-- Base application theme. -->
4.     <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
5.         <!-- Customize your theme here. -->
6.         <item name="colorPrimary">@color/colorPrimary</item>
7.         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
8.         <item name="colorAccent">@color/colorAccent</item>
9.     </style>
11.     <style name="TextContent" parent="@style/TextAppearance.AppCompat">
12.         <item name="android:layout_width">wrap_content</item>
13.         <item name="android:layout_height">wrap_content</item>
14.         <item name="android:layout_marginLeft">16dp</item>
15.         <item name="android:layout_marginRight">16dp</item>
16.     </style>
18.     <style name="TextContent.Small">
19.         <item name="android:textAppearance">@style/TextAppearance.AppCompat.Small</item>
20.     </style>
22.     <style name="TextContent.Small.White">
23.         <item name="android:textColor">@android:color/white</item>
24.     </style>
26.     <style name="TextContent.Subtitle">
27.         <item name="android:textColor">@color/colorSubTitle</item>
28.         <item name="android:textSize">12sp</item>
29.     </style>
31.     <style name="TextContent.Black">
32.         <item name="android:textColor">@android:color/black</item>
33.     </style>
35.     <style name="TextSpec">
36.         <item name="android:textSize">14sp</item>
37.     </style>
39.     <style name="TextSpec.Field">
40.         <item name="android:layout_width">wrap_content</item>
41.         <item name="android:layout_height">wrap_content</item>
42.         <item name="android:layout_marginRight">16dp</item>
43.         <item name="android:textColor">@color/colorSubTitle</item>
45.     </style>
47.     <style name="TextSpec.Value">
48.         <item name="android:layout_width">match_parent</item>
49.         <item name="android:layout_height">wrap_content</item>
50.         <item name="android:layout_weight">1</item>
51.         <item name="android:textColor">@android:color/black</item>
52.     </style>
53.  
54. </resources>

Jika selesai, kita akan implementasikan beberapa style yang baru saja dibuat ke dalam berkas activity_main.xml dan kondisikan seperti ini:

1. <?xml version="1.0" encoding="utf-8"?>
2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:id="@+id/activity_main"
4.     android:layout_width="match_parent"
5.     android:layout_height="match_parent"
6.     android:background="@android:color/white">
7.  
8.     <LinearLayout
9.         android:layout_width="match_parent"
10.         android:layout_height="wrap_content"
11.         android:orientation="vertical">
12.  
13.         <FrameLayout
14.             android:layout_width="match_parent"
15.             android:layout_height="wrap_content">
16.  
17.             <ImageView
18.                 android:layout_width="match_parent"
19.                 android:layout_height="wrap_content"
20.                 android:adjustViewBounds="true"
21.                 android:scaleType="fitXY"
22.                 android:src="@drawable/pixel_google" />
23.  
24.             <TextView
25.                 style="@style/TextContent.Small.White"
26.                 android:layout_gravity="bottom"
27.                 android:layout_marginStart="16dp"
28.                 android:layout_marginBottom="16dp"
29.                 android:background="#4D000000"
30.                 android:drawableStart="@drawable/ic_collections_white_18dp"
31.                 android:drawablePadding="4dp"
32.                 android:gravity="center_vertical"
33.                 android:padding="8dp"
34.                 android:text="@string/dummy_photos"
35.                 android:textColor="@android:color/white" />
36.         </FrameLayout>
37.  
38.         <TextView
39.             style="@style/TextContent.Black"
40.             android:layout_marginTop="16dp"
41.             android:layout_marginBottom="8dp"
42.             android:text="@string/dummy_value"
43.             android:textSize="32sp" />
44.  
45.         <TextView
46.             style="@style/TextContent.Subtitle"
47.             android:layout_marginBottom="16dp"
48.             android:text="@string/stock" />
49.  
50.         <TextView
51.             style="@style/TextContent"
52.             android:layout_marginBottom="16dp"
53.             android:lineSpacingMultiplier="1"
54.             android:text="@string/content_text"
55.             android:textColor="@android:color/black" />
56.  
57.         <TextView
58.             style="@style/TextContent.Subtitle"
59.             android:layout_marginBottom="8dp"
60.             android:text="@string/specification" />
61.  
62.         <TableLayout
63.             android:layout_width="match_parent"
64.             android:layout_height="wrap_content"
65.             android:layout_marginLeft="16dp"
66.             android:layout_marginRight="16dp"
67.             android:layout_marginBottom="16dp">
68.  
69.             <TableRow
70.                 android:layout_width="match_parent"
71.                 android:layout_height="wrap_content"
72.                 android:layout_marginBottom="8dp">
73.  
74.                 <TextView
75.                     style="@style/TextSpec.Field"
76.                     android:text="@string/display" />
77.  
78.                 <TextView
79.                     style="@style/TextSpec.Value"
80.                     android:text="@string/content_specs_display" />
81.             </TableRow>
82.  
83.             <TableRow
84.                 android:layout_width="match_parent"
85.                 android:layout_height="wrap_content"
86.                 android:layout_marginBottom="8dp">
87.  
88.                 <TextView
89.                     style="@style/TextSpec.Field"
90.                     android:text="@string/size" />
91.  
92.                 <TextView
93.                     style="@style/TextSpec.Value"
94.                     android:text="@string/content_specs_size" />
95.             </TableRow>
96.  
97.             <TableRow
98.                 android:layout_width="match_parent"
99.                 android:layout_height="wrap_content"
100.                 android:layout_marginBottom="8dp">
101.  
102.                 <TextView
103.                     style="@style/TextSpec.Field"
104.                     android:text="@string/battery" />
105.  
106.                 <TextView
107.                     style="@style/TextSpec.Value"
108.                     android:text="@string/content_specs_battery" />
109.             </TableRow>
110.         </TableLayout>
111.  
112.         <TextView
113.             style="@style/TextContent.Subtitle"
114.             android:layout_marginBottom="8dp"
115.             android:text="@string/seller" />
116.  
117.         <RelativeLayout
118.             android:layout_width="match_parent"
119.             android:layout_height="wrap_content"
120.             android:layout_marginLeft="16dp"
121.             android:layout_marginRight="16dp"
122.             android:layout_marginBottom="16dp">
123.  
124.             <de.hdodenhof.circleimageview.CircleImageView
125.                 android:id="@+id/profile_image"
126.                 android:layout_width="56dp"
127.                 android:layout_height="56dp"
128.                 android:layout_centerVertical="true"
129.                 android:layout_marginEnd="16dp"
130.                 android:layout_marginRight="16dp"
131.                 android:src="@drawable/photo_2" />
132.  
133.             <TextView
134.                 style="@style/TextContent"
135.                 android:layout_toEndOf="@+id/profile_image"
136.                 android:layout_toRightOf="@id/profile_image"
137.                 android:text="@string/my_name"
138.                 android:textColor="@android:color/black" />
139.         </RelativeLayout>
140.  
141.         <Button
142.             android:layout_width="match_parent"
143.             android:layout_height="wrap_content"
144.             android:layout_marginLeft="16dp"
145.             android:layout_marginRight="16dp"
146.             android:layout_marginBottom="16dp"
147.             android:text="@string/buy" />
148.     </LinearLayout>
149. </ScrollView>

3. Jika selesai coba jalankan aplikasi Anda. Seharusnya hasilnya seperti ini:
   
   Perhatikan bagaimana penulisan di setiap obyek TextView menjadi lebih sederhana:
   
   

   
   <TextView
       style="@style/TextContent.Subtitle"
       android:layout_marginBottom="8dp"
       android:text="@string/seller" />
   
   

4. Masih ada yang perlu kita perbaiki. Tombol masih berada dalam kondisi default.
   Yuk coba ubah agar lebih menyatu dengan tema aplikasi. Buka kembali styles.xml dan tambahkan kode berikut di atas tag </resources>.

   
   <style name="ButtonGeneral" parent="@style/Widget.AppCompat.Button.Colored">
       <item name="android:layout_width">match_parent</item>
       <item name="android:layout_height">wrap_content</item>
       <item name="android:layout_marginRight">16dp</item>
       <item name="android:layout_marginLeft">16dp</item>
       <item name="android:layout_marginBottom">16dp</item>
   </style>
   
   

   
   
5. Pada activity_main.xml kondisikan bagian obyek Button menjadi seperti ini:

   
   <Button
       android:text="@string/buy"
       style="@style/ButtonGeneral"/>
   
   

   
   
6. Jalankan aplikasi Anda. Seharusnya tampilannya akan menjadi seperti ini:

3. Sekarang coba Anda klik dan tahan tombolnya. Bila perangkat Android Anda berada di bawah Lollipop (API  level 21), seharusnya tombol akan berwarna lebih gelap. Sedangkan jika di atas Lollipop, akan ada efek air (ripple) ketika tombol Anda tekan. 
   Sistem akan secara otomatis mengambil nilai accentColor sebagai nilai warna indikator aktif untuk Button dan nilai pada atribut colorButtonNormal sebagai nilai gelap ketika obyek Button ditekan.

Bedah Kode

Style

Selesai! Saat ini Anda sudah memahami bagaimana Theme dan Style diterapkan dalam membangun sebuah aplikasi di Android. Pengelompokan atribut untuk view yang sama akan lebih memudahkan Anda dalam menentukan dan menyeragamkan format view yang akan ditampilkan ke dalam layar.

Contohnya lihat kode berikut:

<TextView
    style="@style/TextContent.Subtitle"
    android:layout_marginBottom="8dp"
    android:text="@string/seller" />

Anda bisa menyusun View menjadi lebih rapi dan cepat, ketika Anda memiliki komponen yang sama. Anda bisa memanggil style tersebut setiap halaman yang Anda butuhkan. 

Anda dapat mendalami lebih lanjut materi modul ini dengan membaca tautan berikut:

• Ui Theme
• Material Design

Source code dapat diunduh pada tautan berikut:

• Source Code Style and Theme (Java)
• Source Code Style and Theme (Kotlin)

Selamat! Satu langkah besar sudah anda lalui, sekarang ayo kita lanjut ke materi yang lebih seru