Mengatasi Bug Warna Icon Statis pada AppBar/SearchBar Material 3

Apabila import icon menggunakan Vector Asset, berikut ini adalah contoh kodenya

<vector android:height="24dp" android:tint="#000000"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z"/>
</vector>

Nah, problemnya jika Anda menggunakan AppBar atau SearchBar pada Material 3, ikon tersebut akan statis. Alias warnanya akan tetap sama walaupun light mode maupun dark mode.

Seperti yang dilihat, warna ikon walaupun menggunakan dark mode. Hal ini berbeda kalau kita masih menggunakan Material 2. Ia akan otomatis menyesuaikan dengan warna backgroud-nya.

Nah, ternyata setelah mencari ke sana ke sini. Solusinya sangat simpel. Tapi kalau tidak teliti juga tidak ketemu solusinya karena di Stack Overflow belum ada :D

Lalu bagaimana cara mengatasinya?

Checkitout…

Awalnya, hint untuk solusinya aku temukan di dokumentasi TopAppBar ini

https://github.com/material-components/material-components-android/blob/master/docs/components/TopAppBar.md#contextual-action-bar:~:text=In%20menu/navigation%20icons%3A

Disebutkan bahwa ketika menggunakan ikon control, pada bagian xml icon menggunakan tint ?attr/colorControlNormal.

Akhirnya, aku coba dan berhasil.

Tapi setelah lihat-lihat guideline terkait App Bar di sini

Ternyata warna yang paling pas seharusnya adalah On Surface. Jadi, kode pada icon harusnya seperti ini.

<vector android:height="24dp" android:tint="?attr/colorOnSurface"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z"/>
</vector>

Alhasil, sekarang warnanya sudah sesuai. Hore~

Sekian. Semoga manfaat!

Change will not come if we wait for some other person or some other time. We are the ones we’ve been waiting for. We are the change that we seek.

- Barack Obama