Search code examples
androiddrawableandroid-buttonmaterial-componentsmaterial-components-android

Drawable does not apply formatting to my button


I have this Drawable aiming to make my round button:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary"/>
            <corners android:radius="150dp"/>
        </shape>
    </item>
</selector>

I call him in the background of my button normally ...

<Button
        android:id="@+id/btnPhoto"
        android:background="@drawable/bg_btn_rounded"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="42dp"
        android:layout_marginEnd="8dp"
        android:text="@string/btnphoto"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

But no changes are applied to the component, I tried to use Drawable on other components and it doesn't apply ... I have no idea why this happens.

My complete screen:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.misael.appchat.RegisterActivity">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tUsername"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="16dp"
        android:hint="@string/usernameHint"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnPhoto">


        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/editUsername"
            android:layout_width="match_parent"
            android:layout_height="68dp" />

    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tEmail"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:layout_marginTop="24dp"
        android:hint="@string/loginHint"
        app:layout_constraintEnd_toEndOf="@+id/tUsername"
        app:layout_constraintStart_toStartOf="@+id/tUsername"
        app:layout_constraintTop_toBottomOf="@+id/tUsername">


        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/editEmail"
            android:layout_width="match_parent"
            android:layout_height="68dp" />

    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tSenha"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:layout_marginTop="24dp"
        android:hint="@string/passwordHint"
        app:layout_constraintEnd_toEndOf="@+id/tEmail"
        app:layout_constraintStart_toStartOf="@+id/tEmail"
        app:layout_constraintTop_toBottomOf="@+id/tEmail">


        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/editPassword"
            android:layout_width="match_parent"
            android:layout_height="68dp"
            android:inputType="textPassword" />

    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnRegister"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="0dp"
        android:layout_height="58dp"
        android:layout_marginTop="32dp"
        android:text="@string/signinButton"
        android:textColor="#7517bd"
        app:layout_constraintEnd_toEndOf="@+id/tSenha"
        app:layout_constraintStart_toStartOf="@+id/tSenha"
        app:layout_constraintTop_toBottomOf="@+id/tSenha" />

    <Button
        android:id="@+id/btnPhoto"
        android:background="@drawable/bg_btn_rounded"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="42dp"
        android:layout_marginEnd="8dp"
        android:text="@string/btnphoto"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Solution

  • If you are using a Material Theme there is an auto-inflation enabled which will replace <Button> with <com.google.android.material.button.MaterialButton> at runtime.
    Check also this question.

    Just use the app:backgroundTint attibute to define the background color and the app:cornerRadius to define the corner radius.

    Something like:

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnPhoto"
        app:backgroundTint="@color/primaryLightColor"
        app:cornerRadius="150dp"
        android:layout_width="150dp"
        android:layout_height="150dp"/>
    

    enter image description here