How to achieve partially color changing of drawable?

user_7906057 0
Viewed 163

I am changing my app's design infrastructure to Material Design Components and would like to achieve something like this:

enter image description here

This is from toggle button and it shows that a drawable can be colored partially, but there is no implementation example how to achieve this. In my app I have a text formatting toolbar with foreground color and I need to get shown the selected text color exactly in that way.

material-components-android drawable android
1 Answers

You can split icon into 2 parts (same sized), for example we can take "format color text" icon from material icons

2

and then simple combine two drawables into one using <layer-list> (LayerDrawable)

ic_format_color_text.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_format_color_text_black_part1_24dp" />
    <item android:drawable="@drawable/ic_format_color_text_black_part2_24dp" />
</layer-list>

Now, this drawable can be used as an icon for your button (MaterialButtonToggleGroup + MaterialButton). To tint "bottom shape" part only:

val dr = (colorTextBtn.icon as? LayerDrawable)?.getDrawable(0 /* colored shape layer index*/)
dr?.let { DrawableCompat.setTint(dr, /* color */) }

enter image description here

user_101729150
Related