Working with Buttons in Android Studio

While learning to build apps in Android Studio, I would always run into issues when trying to add custom styling to the Button elements.

This is because of the way Android Studio’s new-project wizard works, and the way it sets up the project’s theme.xml file. When you create a new project, it is based on the Theme.MaterialComponents.DayNight.DarkActionBar Android library (see below for more details).

A side effect of this is that any Button elements in a layout will get turned into a MaterialButton widget, and not a regular Button widget. MaterialButton will ignore the android:background tag.

To fix this, we have four choices:

Method #1

If all you want to do is change the background colour of the button element. Open your activity_main.xml file for your project and add the android:backgroundTint tag to your button(s) XML, along with the colour value that you wish to use:

<Button
        android:id="@+id/choiceButton1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp"
        android:layout_marginBottom="8dp"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:text="Button"
        android:textSize="20sp"
        android:backgroundTint="#ffffffff"
        app:layout_constraintBottom_toTopOf="@+id/choiceButton2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

Method #2

If you would rather use a drawable resource to style your button(s), you can use the following tags to set the app:backgroundTint to @null and add a background drawable resource instead:

<Button
        android:id="@+id/choiceButton1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp"
        android:layout_marginBottom="8dp"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:text="Button"
        android:textSize="20sp"
        app:backgroundTint="@null"
        android:background="@drawable/button_pink"
        app:layout_constraintBottom_toTopOf="@+id/choiceButton2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

Method #3

If you want a button that has a custom background colour, and your themes.xml file is set up to use Theme.MaterialComponents, you could change the XML element in the activity_main.xml file to be android.widget.Button instead of just Button:

<android.widget.Button
        android:id="@+id/choiceButton1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp"
        android:layout_marginBottom="8dp"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:text="Button"
        android:textSize="20sp"
        android:background="@drawable/button_pink"
        app:layout_constraintBottom_toTopOf="@+id/choiceButton2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

This should cause the Material Components for Android to ignore that element, which will allow you to manipulate this Button element normally, with respects to the XML attributes.

Method #4

A fourth option is to open your themes.xml file and change the following line of code, from:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Destini" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>

        <!-- Customize your theme here. -->
    </style>
</resources>

To:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Destini" parent="Theme.AppCompat.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>

        <!-- Customize your theme here. -->
    </style>
</resources>

The big difference here is that we are changing the Android library from Theme.MaterialComponents to Theme.AppCompat.

I hope this helps you avoid the frustrations of styling buttons in Android Studio.