Android Material Button - @drawable specs not recognized

Question

New to AS. Trying to use MaterialButton, overriding default background with @drawable, but it's not working.

Environment Android Studio: 4.0 Dependencies: implementation "androidx.appcompat:appcompat:$dependency_version_appcompat" implementation "com.google.android.material:material:$dependency_version_material"

Drawable

<shape xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:shape="rectangle">
    <solid
            app:backgroundTint ="?attr/ColorBackgroundAppBar">
    </solid>
    <stroke
            android:width="1px"
            android:color="?attr/ColorBorderDark">
    </stroke>
</shape>

Layout

<com.google.android.material.button.MaterialButton
android:id="@+id/common_appbar_btn_lang_mode"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:background = "@drawable/common_appbar_btn_background"
android:elevation="@dimen/common_elevation_height_btn"
... />

With the above, I just get the default MaterialButton background.

If I set backgroundTint to @null

<com.google.android.material.button.MaterialButton
android:id="@+id/common_appbar_btn_lang_mode"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
app:backgroundTint="@null"
android:background = "@drawable/common_appbar_btn_background"
android:elevation="@dimen/common_elevation_height_btn"
... />

With the above, the drawable specs are recognized, but if I change the theme style, that doesn't work.

These are the only settings that work:

<com.google.android.material.button.MaterialButton
android:id="@+id/common_appbar_btn_lang_mode"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:backgroundTint = "?attr/ColorBackgroundAppBar"
app:strokeColor="?attr/ColorBackgroundAppBar"
app:strokeWidth="0px"
android:elevation="@dimen/common_elevation_height_none"
android:fontFamily="@font/font_family_kaiti"
android:text="简"
android:textAlignment="center"
android:textColor="?attr/ColorTextPrimary"
android:textStyle="normal"
android:textFontWeight="700"
android:textSize="24dp" />

Am I doing sth wrong...or is MaterialButton not quite there yet? I can live with the last solution, but it increases maintenance...

Answer 1

Define you app theme using Theme.MaterialComponents.DayNight:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryVariant">@color/colorPrimaryLight</item>
    <item name="colorSecondary">@color/colorSecondary</item>
    <!-- ....  -->
</style>

Then, if you need, define the colors for the light and dark mode:

Example: res\values\colors.xml:

   <color name="colorPrimary">.....</color>

In res\values-night\colors.xml folders define the same color:

   <color name="colorPrimary">.....</color>

Finally define a style for your button (you don't need 2 different styles for dark and light mode):

<style name="Widget.App.Button" parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/....</item>
    <item name="strokeColor">@color/....</item>
    <item name="strokeWidth">@dimen/....</item>
</style>

Last step assign the style to the Button in the layout.

<com.google.android.material.button.MaterialButton
   style="@style/Widget.App.Button"
   .../>

or globally in your app theme:

<item name="materialButtonStyle">@style/Widget.App.Button</item>

For your Button since you are not using a gradient you can use the standard attributes provided by the MaterialButton.

If you prefer to use the android:background attribute with a custom drawable you can use:

<style name="Widget.App.Button" parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@null</item>
    <item name="android:background">@drawable/.....</item>
</style>

Then inside the drawable just use the colors or attributes defined in the app theme and in the res\values\colors.xml and res\values-night\colors.xml folders.