Unable to style custom button

Question

I'm trying to style a custom button - but most of the styles I've declared in styles.xml aren't applied.

<!-- styles.xml -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
  <item name="selectableFlatButton">@style/SelectableFlatButton</item>
</style>

<style name="SelectableFlatButton" parent="FlatButton">
    <item name="backgroundTint">@color/bg_selectable_button_color</item>
    <item name="android:textColor">@color/selectable_button_text_color</item>
    <item name="iconTint">@color/selectable_button_text_color</item>
</style>

<style name="FlatButton" parent="Widget.MaterialComponents.Button.UnelevatedButton">
    <item name="android:elevation">0dp</item>
    <item name="cornerRadius">0dp</item>
    <item name="backgroundTint">@color/gray98</item>
    <item name="rippleColor">@color/colorPrimaryLight</item>
    <item name="android:textColor">@color/colorPrimary</item>
    <item name="android:selectable">true</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="android:textAllCaps">false</item>
    <item name="iconGravity">textStart</item>
    <item name="iconTint">@color/colorPrimary</item>
</style>

<!-- attrs.xml -->
<resources>
    <attr name="selectableFlatButton" format="reference" />
</resources>

The Button implementation. All it does is set default style.

import android.content.Context
import android.util.AttributeSet
import android.widget.Button
import com.guyca.R


class SelectableFlatButton(context: Context, attrs: AttributeSet? = null) : Button(context, attrs, R.attr.selectableFlatButton)

Usage in layout file:

<com.guyca.SelectableFlatButton
    android:id="@+id/selectButton"
    android:layout_width="0dp"
    android:layout_height="56dp"
    android:text="@string/select"
    app2:icon="@drawable/ic_delete_sweep_24dp" />

If instead if using my SelectableFlatButton, I use androids' Button and pass the style as style="@style/SelectableFlatButton" - it looks as expected.

It seems like the only style properties which work are android:textAllCaps and android:textColor - the rest have no effect on my Button.

Answer 1

Since you are using a MaterialTheme you can extend a MaterialButton:

class SelectableFlatButton(context: Context, attrs: AttributeSet? = null) :
    MaterialButton(context, attrs, R.attr.selectableFlatButton)

Then define the default attribute style:

<style name="AppTheme" parent="Theme.MaterialComponents.*">
  <item name="selectableFlatButton">@style/SelectableFlatButton</item>
  ...
</style>

and:

  <!-- Custom -->
  <style name="FlatButton" parent="Widget.MaterialComponents.Button.UnelevatedButton">
    <item name="elevation">0dp</item>
    <item name="cornerRadius">0dp</item>
    <item name="backgroundTint">@color/...</item>
    <item name="rippleColor">@color/....</item>
    <item name="android:textColor">@color/....</item>
    <item name="android:insetTop">...</item>
    <item name="android:insetBottom">...</item>
    <item name="android:textAppearance">@style/MyTextAppearance.MaterialComponents</item>
    <item name="android:selectable">true</item>
    <item name="iconGravity">textStart</item>
    <item name="iconTint">@color/....</item>
  </style>

  <style name="MyTextAppearance.MaterialComponents" parent="TextAppearance.MaterialComponents.Button">
    <item name="android:textAllCaps">false</item>
  </style>

  <style name="SelectableFlatButton" parent="FlatButton">
    <item name="backgroundTint">@color/...</item>
    <item name="android:textColor">@color/...</item>
    <item name="iconTint">@color/....</item>
  </style>

Using in your layout:

   <com.google.android.material.button.MaterialButton
        app:icon="@drawable/...."
        style="@style/SelectableFlatButton"
        ../>


   <com.xxxx.SelectableFlatButton
        app:icon="@drawable/..."
        .../>

you have the same result.