0

I'm trying to create a button with the following look in android studio.

enter image description here

The theme I use is Theme.MaterialComponents.Light.NoActionBar and I understood (maybe not correctly) that the default theme to use now days is "Material".

From what I see, it is not possible to create the border from the button properties itself. I found the following example to create a shape with the dashes I want.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
            <corners android:radius="100dp" />
            <stroke
                android:width="5dp"
                android:dashWidth="12dp"
                android:color="@color/light_green"
                android:dashGap="5dp"
                />
        </shape>
    </item>
</selector>

Then, I tried to attach it to my button using android:background="@drawable/dash_border". This added the border to my button but my button still had a "green" background. Then, I found out MaterialButton uses the PrimaryColor as the background and to override it you need to specify the button it's own theme. See the answer here.

    <style name="EmptyButtonTheme" parent="Widget.MaterialComponents.Button">
        <item name="materialThemeOverlay">@style/EmptyButtonStyle</item>
    </style>

    <style name="EmptyButtonStyle">
        <item name="colorPrimary">@color/white</item>
        <item name="colorOnPrimary">@color/black</item>
    </style>

And then adding android:theme="@style/EmptyButtonTheme" to my button. Now final result I got into is: enter image description here

which is not the green button I wanted.

Notice that light_green is <color name="light_green">#9DC88D</color>

How can I get to the desired result in the easiest way? I might have used MaterialButton in an over-kill way.

Notice that the same result happen with com.google.android.material.button.MaterialButton and Button as my button type.

I also saw this question but it use the default button properties which doesn't work in my case.

MyNick
  • 536
  • 1
  • 9
  • 25
  • And the solution is https://stackoverflow.com/questions/63328270/android-button-background-is-taking-the-primary-color/63331089#63331089. `Button` and `MaterialButton` are the same with a `MaterialComponents` Theme. To avoid that the custom background doesn't get tinted with the `attr/colorPrimary` defined in your theme. you have to add `app:backgroundTint="@null"`to your `MaterialButton` – Gabriele Mariotti Apr 16 '21 at 15:56

1 Answers1

1
 <style name="Button.MyTheme" parent="Widget.MaterialComponents.Button">
     
        <item name="android:textStyle">bold</item>
        <item name="backgroundTint">@null</item>
        <item name="android:background">@drawable/dash_border</item>
        <item name="android:textColor">@color/text_color_white</item>
        <item name="android:textSize">@dimen/text_size_16</item>
    </style>

Apply this Style directly to your button

End User
  • 792
  • 6
  • 14