Search code examples
androidandroid-layoutandroid-drawableandroid-buttonmaterial-components-android

Custom Button not completly shown


I tried to set a drawable as a background for a button, but just the corners are rounded now.

Here is the code for the drawable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="1000dp"/>

    <solid android:color="@color/light_notlight_themebased_accentColor" />

    <padding
        android:bottom="7dp"
        android:top="7dp"
        android:left="7dp"
        android:right="7dp" />

    <stroke
        android:color="@color/ContrastAndText"
        android:width="10dp" />
</shape>

And here is the code for the Button:

<Button
            android:id="@+id/loginButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:background="@drawable/login_loginbutton_default"
            android:text="@string/login_loginButton"
            android:textAllCaps="true"
            android:textColor="@color/NavbarAccent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.498"
            app:layout_constraintStart_toStartOf="parent" />

The stroke and the color is not shown (it stays the backgroundcolor), only the corners are rounded...

Here is what it looks like:

In the AndroidStudio Preview (Canary 4.1): In the AndroidStudio Preview (Canary 4.1)

Final result on the device:

Final result on device

Whats my fault? Thanks in advance!


Solution

  • If you are using a MaterialComponents Theme there is no difference between <Button /> and <com.google.android.material.button.MaterialButton />. Check this answer for more details.

    If you want to use the android:background attribute in your Button you have to use the version 1.2.0-alpha06 or higher.

    <MaterialButton
        app:backgroundTint="@null"
        android:background="@drawable/button_gradient"
        ... />
    

    Otherwise you have to use the AppCompatButton component.

    Checking your shape you don't need to set a background. Just use

       <com.google.android.material.button.MaterialButton
            app:cornerRadius="@dimen/..."
            app:strokeColor="@color/.."
            app:strokeWidth="@dimen/.."
            ..>