sb69lg
sb69lg

Reputation: 15

How can I change color of icon in icon-only toggle button in my case?

I am using Material Design and I have a problem with it. I have a group com.google.android.material.button.MaterialButtonToggleGroup which includes icon-only toggle buttons with style @style/Widget.App.Button.OutlinedButton.IconOnly. I am using style from documentation:

<style name="Widget.App.Button.OutlinedButton.IconOnly" parent="Widget.MaterialComponents.Button.OutlinedButton">
        <item name="iconPadding">0dp</item>
        <item name="android:insetTop">0dp</item>
        <item name="android:insetBottom">0dp</item>
        <item name="android:paddingLeft">12dp</item>
        <item name="android:paddingRight">12dp</item>
        <item name="android:minWidth">48dp</item>
        <item name="android:minHeight">48dp</item>
</style>

There is screenshot how it looks: without selection and selected. When button is selected icon has colorPrimary color. But I wish each button has its own color when selected (e.g. 1st button - green, 2nd - yellow etc.) I tried to use tips from this question, but it causes an error. iconColor, tint etc. cause errors too. Probably 'cause I am using Material Style... How can I change icon's color in icon-only toggle button? Not necessarily change color only when button is selected, I would be happy if button will be green before selection and will have colorPrimary when selected.

Upvotes: 1

Views: 1286

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363577

I would be happy if button will be green before selection and will have colorPrimary when selected.

The icon is gray because the default color is tinted with android:alpha="0.60" android:color="?attr/colorOnSurface".

You can change it overriding in the style the iconTint attribute:

     <com.google.android.material.button.MaterialButtonToggleGroup>
    
         <com.google.android.material.button.MaterialButton               
         style="@style/Widget.App.Button.OutlinedButton.IconOnly.Green"
         />
    
         <com.google.android.material.button.MaterialButton
           style="@style/Widget.App.Button.OutlinedButton.IconOnly.Red"
         />

where:

<style name="Widget.App.Button.OutlinedButton.IconOnly.Green">
    <item name="iconTint">@color/icon_tint_selector</item>
</style>

with a selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="1.00" android:color="?attr/colorPrimary" android:state_checkable="true" android:state_checked="true" android:state_enabled="true"/>
    <item android:alpha="0.60" android:color="@color/green500" android:state_checkable="true" android:state_checked="false" android:state_enabled="true"/> <!-- this color -->
    <item android:alpha="1.00" android:color="?attr/colorPrimary" android:state_enabled="true"/>
    <item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>

enter image description here enter image description here

Upvotes: 2

Related Questions