[FIXED] How to achieve partially color changing of drawable?

Issue

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

src="https://i.stack.imgur.com/9S9Z6.png" alt="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.

Solution

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

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 */) }

Answered By - Akaki Kapanadze
Answer Checked By - Candace Johnson (JavaFixing Volunteer)