轮廓的 MaterialButton 不显示任何边框

Question

I'm trying to build a layout with a bordered button as shown below (Expected behavior). From Material design documentation I read about Outlined Material Button that seemed to be perfect for my purpose. I defined the button in my layout, providing stroke width and stroke color but it isn't showing any border, what am I doing wrong?

<com.google.android.material.button.MaterialButton
            android:id="@+id/material_text_button"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:text="Change name"
            android:background="@android:color/transparent"
            android:textSize="12sp"
            app:layout_constraintBottom_toBottomOf="@+id/listTextView2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/listTextView2"
            app:layout_constraintTop_toTopOf="@+id/listTextView2"
            app:strokeColor="@color/green"
            app:strokeWidth="10dp" />

Expected behavior:

Current behavior:

Answer 1

Just add this attribute to your MaterialButton

android:theme="@style/Theme.MaterialComponents"

avoid to add it to your main theme.

example:

<com.google.android.material.button.MaterialButton
            android:id="@+id/material_text_button"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:theme="@style/Theme.MaterialComponents"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:text="Change name"
            android:background="@android:color/transparent"
            android:textSize="12sp"
            app:layout_constraintBottom_toBottomOf="@+id/listTextView2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/listTextView2"
            app:layout_constraintTop_toTopOf="@+id/listTextView2"
            app:strokeColor="@color/green"
            app:strokeWidth="10dp" />

Answer 2

Use this in your build.gradle app

    implementation 'com.google.android.material:material:1.2.0-alpha02'

I think it is a bug in google material.

Update: I Tested just right now. Use dependency in Gradle app below

implementation 'com.google.android.material:material:1.2.0-alpha05

and in your material button XML, add style

style="@style/Widget.MaterialComponents.Button.OutlinedButton"

it might not show in your xml preview but it will show when you run the app

Answer 3

try removing transparent background and style from your xml. and also make sure to change the style to MaterialComponents.

  <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> 

 <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        android:textSize="16sp"
        android:layout_marginEnd="20dp"
        android:text="works"
        android:textAllCaps="false"
        android:textColor="@color/white"
        app:strokeColor="@color/white"
        app:strokeWidth="2dp" />

Answer 4

Dependency

implementation 'com.google.android.material:material:1.2.1'

Adding android:backgroundTint="@color/colorPrimary"

<com.google.android.material.button.MaterialButton
     android:id="@+id/material_text_button"
     style="@style/Widget.MaterialComponents.Button.OutlinedButton"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Pick Date"
     android:background="@drawable/register_edittext_background"
     android:textSize="12sp"

     app:backgroundTint="@color/colorPrimary"
/>

Answer 5

This worked for me

 <style name="oval_button_outline" 
     parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="cornerFamily">rounded</item>
    <item name="cornerRadius">16dp</item>
    <item name="android:textColor">@color/dark_color</item>
</style>



 <com.google.android.material.button.MaterialButton
        android:id="@+id/start_login"
        style="@style/oval_button_outline"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="sans-serif-medium"
        android:textStyle="normal"
        android:textSize="14sp"
        android:letterSpacing="0.09"
        android:lineSpacingExtra="2sp"
        android:gravity="center_horizontal"
        android:text="@string/login"
        android:textColor="@color/dark_color"
        android:theme="@style/Theme.MaterialComponents"
        app:strokeColor="@color/dark_color"
        app:strokeWidth="2dp" />