How to apply custom button to the activity in Android Studio?

My MainActivity has 4 buttons, serving as navigation. UI is as below

MainActivity UI

And, I also created button.xml under the drawable folder.

<!-- res/drawable/button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#457B9D"/>
    <corners android:radius="20dp"/>
    <stroke android:color="#fff" android:width="2dp"/>
</shape>

In the activity_main.xml, I wanted to apply the custom button to the view using android:background="@drawable/button"

<?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"
    android:background="#A8DADC"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/button1"
            android:layout_width="350dp"
            android:layout_height="80dp"
            android:layout_marginBottom="50dp"
            android:background="@drawable/button"
            android:text="@string/enter_current_job"
            android:textAllCaps="false"
            android:textSize="20sp" />

        <Button
            android:id="@+id/button2"
            android:layout_width="350dp"
            android:layout_height="80dp"
            android:layout_marginBottom="50dp"
            android:background="@drawable/button"
            android:text="@string/enter_job_offer"
            android:textAllCaps="false"
            android:textSize="20sp" />

        <Button
            android:id="@+id/button3"
            android:layout_width="350dp"
            android:layout_height="80dp"
            android:layout_marginBottom="50dp"
            android:background="@drawable/button"
            android:text="@string/adjust_comparison_settings"
            android:textAllCaps="false"
            android:textSize="20sp" />

        <Button
            android:id="@+id/button4"
            android:layout_width="350dp"
            android:layout_height="80dp"
            android:background="@drawable/button"
            android:text="@string/compare_job_offers"
            android:textAllCaps="false"
            android:textSize="20sp" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Also, I changed themes.xml a little bit to NoActionBar

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.JobCompare6300" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

But I am still having the default button. Did I miss anything or did I do something wrong?

Actual MainActivity UI

As you use MaterialComponents theme, your Button is a MaterialButton which manages its own background drawable and therefore it is not recommanded to use android:background.

To achieve the style you want, you can use these custom attributes: app:backgroundTint, app:cornerRadius, app:strokeWidth and app:strokeColor

 <Button
   android:id="@+id/button2"
   android:layout_width="350dp"
   android:layout_height="80dp"
   android:layout_marginBottom="50dp"
   app:backgroundTint="#457B9D"
   app:cornerRadius="20dp"
   app:strokeColor="#fff"
   android:text="qzeazeazeza"
   android:textAllCaps="false"
   android:textSize="20sp"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintTop_toTopOf="parent" />

Or if you need a specific drawable, you can always use android.widget.Button or use AppCompat as theme instead of MaterialComponents

 <android.widget.Button
   android:id="@+id/button2"
   android:layout_width="350dp"
   android:layout_height="80dp"
   android:layout_marginBottom="50dp"
   android:background="@drawable/button"
   android:text="@string/enter_job_offer"
   android:textAllCaps="false"
   android:textSize="20sp" />

How to apply custom button to the activity in Android Studio?

2 Answers