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.

Join the Discussion ...

Please be aware that all comments are held for moderation and are manually approved prior to being published on this site. Email addresses are neither published or shared. Required fields are marked with an asterisk *