Android Themes & Style's

 Halo semuanya, Ini adalah catatan singkat saya terkait styling di Android dengan targetSDK 32, minSDK 23, dan compileSDK 32.

mulai android 11 dan seterusnya, Android akan men-support Dark Theme, maka kita sebagai Android Engineer perlu untuk men-support Dark Theme tersebut agar tampilan aplikasi kita nyaman saat digunakan oleh user saat user memilih untuk menggunakan device dengan konfigurasi dark theme. (tentunya dalam hal ini, anda harus bekerja sama dengan designer untuk menghasilkan color pallete yang baik)

Issue

naah, sekarang permasalahan muncul ketika saya mencoba untuk membuat styling pada file 'themes.xml' di project app saya. 

File themes.xml

<style name="ButtonBlackSqueezeFull" parent="Widget.AppCompat.Button">
    <item name="fontFamily">@font/roboto_regular</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">@dimen/button_height_full_width</item>
    <item name="android:minHeight">0dp</item>
    <item name="android:minWidth">0dp</item>
    <item name="android:background">@drawable/bg_rounded_black_squeeze_6dp</item>
    <item name="android:textColor">@color/jade</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:letterSpacing">0</item>
</style>

 

file layout.xml

<Button
    android:id="@+id/btnAllInfo"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    style="@style/ButtonBlackSqueezeFull"
    android:layout_marginStart="@dimen/spacing_normal"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="@dimen/spacing_normal"
    android:layout_marginBottom="@dimen/spacing_smaller"
    android:text="@string/see_all_health_info" />

sekilas, terlihat seperti tidak ada yang salah, saya menerapkan style ButtonBlackSqueezeFull untuk widget button. 

namun berulang kali saya cek bulak-balik, saya gonta-ganti atribut yang ada di style ButtonBlackSqueezeFull pada file themes.xml kok perubahan yang saya terapkan tidak tampil juga.

kemudian saya sampai coba untuk clean project dan rebuild project. masih tetap tidak ada perubahan, sampai akhirnya saya mencoba iseng untuk menyesuaikan persis dengan komponen parent yang ada di themes.xml yaitu Widget.AppCompat.Button

parent="Widget.AppCompat.Button"

 

Solution

jadi, saya iseng untuk merubah Button menjadi androidx.appcompat.widget.AppCompatButton

 

sebelum :

<Button
    android:id="@+id/btnAllInfo"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    style="@style/ButtonBlackSqueezeFull"
    android:layout_marginStart="@dimen/spacing_normal"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="@dimen/spacing_normal"
    android:layout_marginBottom="@dimen/spacing_smaller"
    android:text="@string/see_all_health_info" />

 

sesudah :

<androidx.appcompat.widget.AppCompatButton
    android:id="@+id/btnAllInfo"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    style="@style/ButtonBlackSqueezeFull"
    android:layout_marginStart="@dimen/spacing_normal"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="@dimen/spacing_normal"
    android:layout_marginBottom="@dimen/spacing_smaller"
    android:text="@string/see_all_health_info" />

naah, masalah terselesaikan. jadi ternyata memang jenis Parent style-nya harus persis dengan jenis widget/component yang ingin kita terapkan stylenya.

 

okay, problem solved. now, what's actually the problem?

Conclusion

berdasarkan beberapa referensi yang coba untuk saya cari2 setelah saya capek coba2 wkwkwk, ternata memang Button dan AppCompatButton menggunakan styling yang berbeda.

Key Takeaway?

untuk seterusnya, alangkah lebih baiknya teman2 gunakan widget yang jelas asal muasal style-nya. jadi sebagai contoh: ketimbang menggunakan Button lebih baik menggunakan androidx.appcompat.widget.AppCompatButton, ketimbang menggunakan TextView lebih baik menggunakan androidx.appcompat.widget.AppCompatTextView.

tapi ingat, ini kalau teman2 mau pakai styling AppCompat yaa.. kalau tidak ya silahkan sesuaikan saja parent styling-nya dengan widget-nya

 

references

https://stackoverflow.com/questions/56702904/androidx-appcompatbutton-looks-different-from-button-even-on-high-api-level-devi