Android Material Design Buttons – Best Approach

One of the most basic design component in any Android app is a button. Google released a new design pattern lately by the name of Material Design. With material design, Google released new standards for buttons. These buttons have a unique feature that they show a ripple when touched. When speaking of Android material design buttons, they are broadly categorized into four types:

1. Raised Button – A normal button
2. Flat Button – A button for cards, toolbars and dialogs
3. Floating Button – A hovering button for most important or promoted action
4. Other Buttons – Icons, drop downs etc.

Here we will discuss how to make raised and flat buttons according to the material design specifications for Android, with full backward support. Google has very clearly defined, how a material design button should look and feel when touched. But one of the most basic problem still prevails. How should a button look in the earlier versions of Android?

As of now, if you create a normal button with Button xml tag, it would look like a material design button in Android 5.0 and above. But before that it would look, as it should on the respective version. Another point that I would like to make is here is that, with android support v7 AppCompat library, you can support material theme to an extent. But sadly even with support library, as of now you may not be able to show Android material design buttons on all versions of android.

Android Material Design Raised Button

1) Standard Button

Use the code below to make a raised button:

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView"
        android:layout_centerHorizontal="true"
        android:text="Normal Button"/>

First button in the screenshot below shows this button.

2) Material design raised button with CardView

If you want to make a button, which looks like the material design button, with backward support. Try using the CardView library for it. Have a look at the code below:

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="wrap_content"
        android:layout_height="36dp"
        android:layout_below="@+id/button2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:clickable="true"
        android:foreground="?android:attr/selectableItemBackground"
        card_view:cardBackgroundColor="#d9d9d9"
        card_view:cardCornerRadius="2dp"
        card_view:cardElevation="1dp">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:gravity="center"
                android:minWidth="88dp"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:singleLine="true"
                android:text="CARDVIEW BUTTON"
                android:textColor="#000000"/>
        </RelativeLayout>
    </android.support.v7.widget.CardView>

The above piece of code would make a raised button according to the Android material design guideline, with support from API 11 and above. If you closely notice I have used the "?android:attr/selectableItemBackground" property to show ripples on this view. This property can make any view to show ripples, if they detect touch events. Also please don’t forget to make CardView clickable by adding android:clickable="true" property as shown above. This button would look exactly the same across all supported devices. Learn more about CardView here. Have a look in the screen shot below, its the third button:

You can attach an OnClickListener to this button and make it work just like a normal button:

        CardView cv = (CardView)findViewById(R.id.card_view);
        cv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.i("Activity", "Clicked");
            }
        });

Although the ripple effect would show only in 5.0 and above devices as even CardView or any other view does not support it on earlier versions. On earlier versions of Android, this is how the selection would appear:

But the button would still appear like a card, as expected. Therefore the above piece of code would make an Android material design button with backward support but with some limitations. Unfortunately there is no support from Google on it right now. Also in some of their posts they have mentioned, that ripple effect is not added in support library as it degrades performance. Just a personal thought: maybe in future, they might start supporting ripples too.

Android Material Design Flat Button

Another type of button is flat button. These type of buttons are used to avoid gratuitous layering. For example it is suggested to use this type of button on a CardView, instead of normal raised button. The main purpose of this button is to minimize the user distraction from content. To make a button flat button just add style="?android:attr/borderlessButtonStyle" in your button layout. Just like the code below:

    <Button
        android:id="@+id/button2"
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:text="Borderless Button"/>

This button is shown at number 2 in the screen shot above.

Conclusion

Although android material design buttons are not fully supported by all the versions till now. Still I would say that they add, great value to the style quotient of your app. They give a neat and clean look to your app. Hence I would suggest to use them with all the backward support available. Also I have not mentioned here, a lot of open-source libraries are also available which, endorse material design buttons. Hope this helped, please connect with us on Facebook, Google+ and Twitter for more updates.

Mohit Gupt

Born in New Delhi, India. A software engineer by profession, an android enthusiast and an evangelist. My motive here is to create a group of skilled developers, who can develop something new and good. Reason being programming is my passion, and also it feels good to make a device do something you want. In a very short span of time professionally I have worked with many tech firms. As of now too, I am employed as a senior engineer in a leading tech company. In total I may have worked on more than 20 projects professionally, and whenever I get spare time I share my thoughts here at Truiton.