Search code examples
androidmaterial-designandroid-buttonmaterial-components-androidmaterial-components

Style defined in material button is not comprehending with the AppTheme


I chnaged the Apptheme attributes according to the new material guidelines, due to this my material button which I have used in all my project lost their theme colors.

I have tried making custom styles by making the defaults its parent and making them change their primary and secondary colors.

XML file for Button

<com.google.android.material.button.MaterialButton
    android:id="@+id/bs_create_business"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="left|center_vertical"
    android:text="@string/create_business"
    android:textAllCaps="true"
    app:backgroundTint="@color/browser_actions_bg_grey" />

styles.xml

    <style name="AppTheme"parent="Theme.MaterialComponents.Light.NoActionBar">
        <item name="colorPrimary">@color/foopprimary_500</item>
        <item name="colorPrimaryDark">@color/foopprimary_900</item>
        <item name="colorAccent">@color/foopsecondary_500</item>
        <itemname="android:windowBackground">@android:color/white</item>
        <item name="fontFamily">@string/default_font</item>

        <item name="colorSecondary">@color/foopsecondary_500</item>
        <item name="colorOnSecondary">@color/foopprimary_500</item>
    </style>

My output is coming like this : enter image description here


Solution

  • To change the colors in the Widget.MaterialComponents.Button.OutlinedButton style just use something lke:

      <style name="MyButton" parent="Widget.MaterialComponents.Button.OutlinedButton" >
        <!-- Border color -->
        <item name="strokeColor">@color/stroke_color_selector</item>
        <!-- Text color -->
        <item name="android:textColor">@color/text_color_selector</item>
        <!-- Background color -->
        <item name="backgroundTint">@color/text_btn_bg_color_selector</item>
      </style>
    

    enter image description here

    The default value for the selector are:

    StrokeColor:

      <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="?attr/colorPrimary" android:state_checked="true"/>
        <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_checked="false"/>
      </selector>
    

    TextColor:

      <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="?attr/colorOnSurface" android:state_checkable="true" android:state_checked="false" android:state_enabled="true"/>
        <item android:alpha="1.00" android:color="?attr/colorPrimary" android:state_enabled="true"/>
        <item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
      </selector>
    

    Background:

      <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:alpha="0.08" android:color="?attr/colorPrimary" android:state_checked="true"/>
        <item android:color="@android:color/transparent" android:state_checked="false"/>
      </selector>