1

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.

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
sb69lg
  • 15
  • 1
  • 7

1 Answers1

1

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

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
  • But this style (@style/Widget.App.Button.OutlinedButton.IconOnly) is common for all icon-only toggle buttons... And therefore all buttons will be green, but I need 1st - green, 2nd - yellow, 3rd - orange etc. I cannot create new style because it is based on material and how I understand I cannot apply different styles for buttons. Or is it not true? – sb69lg Oct 21 '20 at 19:49
  • About the style. You can define another style, for example ` – Gabriele Mariotti Oct 21 '20 at 20:03
  • I am sorry to stupid question, but that selector shall be in colors.xml? P.S. app:iconTint does not work – sb69lg Oct 21 '20 at 20:10
  • @sb69lg I've updated the answer.For the selector just create a file in `res/color/` folder. – Gabriele Mariotti Oct 21 '20 at 20:14
  • 1
    For each button new file with selector? And @color/icon_tint_selector is name of file? – sb69lg Oct 21 '20 at 20:19
  • "For the selector just create a file in res/color/ folder. " It is my first project and I am using structure from example android studio project. There colors are in colors.xml and I have not that folder "color". – sb69lg Oct 21 '20 at 20:26
  • @sb69lg You can create that folder :-) . Since you want different colors, yes you need different files and you can use the name that you prefer. – Gabriele Mariotti Oct 21 '20 at 20:34
  • Hello. Sorry for bothering you, I have question related to toggle buttons group. I hope you know the answer and could answer these few short questions. How can I check is any of toggle buttons in group selected? If any of buttons in group is selected then button 'Next' will be active, else button 'Next' will be inactive. Should I check each toggle button or there is a way to check group of toggle buttons? – sb69lg Oct 27 '20 at 14:05