Android Material Design Button Style Design With Example

Today we’ll dive deep into Android Buttons in Material Design and develop an application that showcases the different styles of a Button.

Android Material Design Button

Buttons in Android are used to communicate our actions with the application. The introduction of Material Design has brought along many different kinds of Button styles which are compatible with pre-Lollipop devices too.

A basic Button in the layout is defined like this:

The above Button has the default style: Widget.AppCompat.Button

To set a different style on the Button, we use the android:background attribute.

The output of both of the above Buttons looks like this:
android button styling old way

As it is visible, setting the background removes the click effect. Though there is the raised effect that’s a part of the style itself.

So either we can create a drawable selector as we’d done in Android Button Selector Tutorial, or the other better approach is by setting styles. We’ll be looking at the later in the below section.

android:backgroundTint attribute can also be used to set the tint color on a Button. Though it’ll work only when for Android SDK > 21.

Android Button Styling

In Material Design, Buttons broadly fall under the following two categories.

  • Raised Buttons – These are the default ones.
  • Flat Buttons – These are borderless. They are typically used in dialogs

Following are the primary Button styles that are available.

The last two styles fall under the Flat Buttons category.

Android Colored Buttons

We can set the default colored Button style on a button in the following way:

This would give the following output:
android button styling colored default

Why is the color PINK?
The Colored Button takes the color of the colorAccent attribute from the styles.xml file.


Change the color of colorAccent to one of your choice to get the desired background color.

Now, there are two important attributes to style a button :

colorButtonNormal: The normal color of the button.

colorControlHighlight: The ripple color when the button is pressed.

Setting these inside the AppTheme tag in the styles.xml would give the following output.

android button styling colored

We’ve added a few colors to our colors.xml pallete as shown below.

We’ve removed colorAccent, still the ColoredButton shows a different color.


colorButtonNormal and colorControlHighlight inside the Application’s theme are applicable only on the Buttons with default styles. It applies on ALL buttons with default style in the application.

So let’s create a custom theme for the ColoredButton. Add the following in the styles.xml file:

Note: We need to set the style of the button as Colored as the parent.

The following code is for the Button in the xml with the theme set.

The output looks like this:
android button styling colored example

To change the default Button style of the application we can use the android:buttonStyle attribute in the AppTheme style inside the styles.xml.


This sets default colored button to all. Overrriding Everything.

Android Flat Buttons

Flat Buttons can be Borderless or Borderless.Colored

Borderless.Colorless implies the text color should be colored. Not the background.

Add the following style in the styles.xml file

Now add the following Buttons in the xml layout.

The output of the above application is given below.
android flat buttons

The Button with the style Borderless doesn’t have the textcolor set from the theme, though the textColor attribute is present in the theme.
Notice that the Button with the style Borderless.Colored has the text color set from the theme.

This brings an end to this tutorial. All the styles are available in the Android ButtonStyling Project source code below.

By admin

Leave a Reply

%d bloggers like this: