Theming Material Design Buttons in Android with Examples
Last Updated : 19 Jul, 2022
Material Design Components (MDC Android) offers designers and developers a way to implement Material Design in their Android application. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional Android applications. If you like the way how the UI elements from Google Material Design Components for android which are designed by Google are pretty awesome, then here are some steps that need to be followed to get them, and one of them is Google Material Design Components (MDC) Buttons. A Button is a user interface that is used to perform some action when clicked or tapped. In the previous article Material Design Buttons in Android with Example, we have discussed four types of Buttons, Contained Button, Outlined Button, Text Button, and Toggle Button. So in this article, we are going to discuss another popular type of Button i.e Theming Material Design Buttons. At the end of this article, one can easily add icons to material design buttons and change or override the default theme of the material design buttons. A sample image is given below to get an idea about what types of Button we are going to create in this article.
Step for Creating Theming Material Design Buttons
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
Step 2: Add Material design dependency on the app level Gradle file
Invoke the following line of code into the dependencies field.
implementation 'com.google.android.material:material:1.3.0-alpha02'
If unable to locate the app level Gradle file refer to the following image to get it under Project view.
Step 3: Change the Base application theme
Go to app > src > main > res > values > styles.xml and change the base application theme. The MaterialComponents contains various action bar theme styles, one may invoke any of the MaterialComponents action bar theme styles, except AppCompat styles. Below is the code for the styles.xml file.
XML <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources>
If unable to locate the styles.xml file refer to the following image.
Step 4: Working with the activity_main.xml
In this case, a typical 3 material design buttons are invoked. Those are the Contained Button, Outlined Button, Text Button. To know the usage and how to invoke them, one can read the Material Design Buttons in Android with Example article. Invoke the following code in the activity_main.xml file to implement all types of material design buttons. Comments are added inside the code to understand the code in more detail.
XML <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity" tools:ignore="HardcodedText"> <!--Contained Button--> <!--there is no style attribute for contained button--> <!--by default the button itself is a contained button--> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="64dp" android:text="Contained Button" /> <!--Outlined Button--> <!--need to carefully invoke the style attribute--> <Button style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="64dp" android:text="Outlined Button" /> <!--Text Button--> <!--need to carefully invoke the style attribute--> <Button style="@style/Widget.MaterialComponents.Button.TextButton.Icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="64dp" android:text="Text Button" /> </LinearLayout>
Output: Run on Emulator
Steps to Add Icons to the Material Design Buttons
Step 1: Import vector icon(s) to the drawable folder
To import the vector icons to the drawable folder right click on the drawable folder > goto New > click on Vector Asset. Now select the desired vector from the pop-up window. One can refer to the following image to get a vector icon selector pop-up window.
Click on the marked button in the below image, to select the desired vector icons.
Step 2: Working with the activity_main.xml file
By adding the app:icon attribute in each of the buttons and selecting the desired vector icon from the drawable folder, will add the icon to the material design buttons. So, invoke the following code.
XML <?xml version="1.0" encoding="utf-8"?><!--there is need to invoke the app namespace to add icons to material design button--> <LinearLayout 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:orientation="vertical" tools:context=".MainActivity" tools:ignore="HardcodedText"> <!--Contained Button--> <!--there is no style attribute for contained button--> <!--by default the button itself is a contained button--> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="64dp" android:text="Contained Button" app:icon="@drawable/ic_add_black_24dp" /> <!--Outlined Button--> <!--need to carefully invoke the style attribute--> <Button style="@style/Widget.MaterialComponents.Button.OutlinedButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="64dp" android:text="Outlined Button" app:icon="@drawable/ic_add_black_24dp" /> <!--Text Button--> <!--need to carefully invoke the style attribute--> <Button style="@style/Widget.MaterialComponents.Button.TextButton.Icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="64dp" android:text="Text Button" app:icon="@drawable/ic_add_black_24dp" /> </LinearLayout>
Output: Run on Emulator
There are two methods of overriding the theme of the material design buttons:
Here the icons are optional. So, in this case, the icon has been removed. However, the theme can be overridden with or without the icon.
Method 1:
This method of implementation will affect other material components, as well as material design buttons. Invoke the following code in the styles.xml file to override the default theme of the material design buttons.
XML <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <!--this item is to override the fontFamily of the material design buttons--> <item name="textAppearanceButton">@style/TextAppearance.App.Button</item> <!--this item is to override the cornerFamily and cornerSize of the material design buttons--> <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.App.SmallComponent</item> </style> <!--This overrides the fontFamily and textSize of material design buttons--> <style name="TextAppearance.App.Button" parent="TextAppearance.MaterialComponents.Button"> <item name="fontFamily">sans-serif-black</item> <item name="android:fontFamily">sans-serif</item> <item name="android:textSize">18sp</item> </style> <!--This overrides the cornerFamily and cornerSize of the default material design button--> <style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent"> <item name="cornerFamily">cut</item> <item name="cornerSize">8dp</item> </style> </resources>
Output: Run on Emulator
One can notice the change in the corner cut of 8dp, similar in all the buttons.
Note: By using this method if the application contains the material design floating action button, the default theme of those all floating action button overridden by same attributes invoke in above code.
Method 2:
This method of overriding the default theme of the material design button will affect each of the individual buttons. In this case, different attributes can be overridden for Contained Button, Outlined Button, and Text Button. Invoke the following code in the styles.xml file.
XML <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <!--this item is invoked in app theme to override the contained material button--> <item name="materialButtonStyle">@style/myCustomContainedButton</item> <!--this item is invoked in app theme to override the outlined material button--> <item name="materialButtonOutlinedStyle">@style/myCustomOutlinedButton</item> </style> <!--Base application theme ends here--> <!--theming of contained button begins here--> <!--parent name is to be give carefully--> <style name="myCustomContainedButton" parent="Widget.MaterialComponents.Button"> <!--these all styles are implemented outside, because to get all the overridden attributes easily--> <item name="shapeAppearance">@style/customContainedButtonTheme</item> <item name="android:textAppearance">@style/myCustomTextForMaterialButtons</item> </style> <!--overriding cornerSize and cornerFamily of the contained button--> <style name="customContainedButtonTheme"> <item name="cornerFamily">rounded</item> <item name="cornerSize">24dp</item> </style> <!--theming of contained button ends here--> <!--theming of outlined button begins here--> <!--parent name is to be give carefully--> <style name="myCustomOutlinedButton" parent="Widget.MaterialComponents.Button.OutlinedButton"> <!--these all styles are implemented outside, because to get all the overridden attributes easily--> <item name="shapeAppearance">@style/customOutlinedButtonTheme</item> <item name="android:textAppearance">@style/myCustomTextForMaterialButtons</item> </style> <!--overriding cornerSize and cornerFamily of the outlined button--> <style name="customOutlinedButtonTheme"> <item name="cornerFamily">cut</item> <item name="cornerSize">12dp</item> </style> <!--theming of outlined button ends here--> <!--Font family and size of all the buttons in the entire application should be same--> <!--so this child is common for all the material buttons in entire application--> <style name="myCustomTextForMaterialButtons"> <item name="fontFamily">sans-serif-condensed-medium</item> <item name="android:textSize">18sp</item> <item name="android:fontFamily">sans-serif</item> </style> </resources>
Note that here the default theme of the text button is not overridden, because it's not much affected as it has no border and no background color. Only the text color and text font can be changed in the activity_main.xml file itself. After overriding the default theme of all buttons, there is a need to change the style attribute of the outline button in the activity_main.xml file. This needs to be changed because the outlined button is child class of material button, if not invoked the outlined button will be inheriting the style of the contained button.
XML <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity" tools:ignore="HardcodedText"> <!--Contained Button--> <!--there is no style attribute for contained button--> <!--by default the button itself is a contained button--> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="64dp" android:text="Contained Button" /> <!--Outlined Button--> <!--need to carefully invoke the style attribute--> <Button style="@style/myCustomOutlinedButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="64dp" android:text="Outlined Button" /> <!--Text Button--> <!--need to carefully invoke the style attribute--> <Button style="@style/Widget.MaterialComponents.Button.TextButton.Icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="64dp" android:text="Text Button" /> </LinearLayout>
Output: Run on Emulator