Theming Material Design Buttons in Android with Examples
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 >
< style name = "AppTheme" parent = "Theme.MaterialComponents.Light.DarkActionBar" >
< 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
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
tools:context = ".MainActivity"
tools:ignore = "HardcodedText" >
< Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center"
android:layout_marginTop = "64dp"
android:text = "Contained Button" />
< 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" />
< 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" ?>
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
tools:context = ".MainActivity"
tools:ignore = "HardcodedText" >
< 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" />
< 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" />
< 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 >
< style name = "AppTheme" parent = "Theme.MaterialComponents.Light.DarkActionBar" >
< item name = "colorPrimary" >@color/colorPrimary</ item >
< item name = "colorPrimaryDark" >@color/colorPrimaryDark</ item >
< item name = "colorAccent" >@color/colorAccent</ item >
< item name = "textAppearanceButton" >@style/TextAppearance.App.Button</ item >
< item name = "shapeAppearanceSmallComponent" >@style/ShapeAppearance.App.SmallComponent</ item >
</ style >
< 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 >
< 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 >
< style name = "AppTheme" parent = "Theme.MaterialComponents.Light.DarkActionBar" >
< item name = "colorPrimary" >@color/colorPrimary</ item >
< item name = "colorPrimaryDark" >@color/colorPrimaryDark</ item >
< item name = "colorAccent" >@color/colorAccent</ item >
< item name = "materialButtonStyle" >@style/myCustomContainedButton</ item >
< item name = "materialButtonOutlinedStyle" >@style/myCustomOutlinedButton</ item >
</ style >
< style name = "myCustomContainedButton" parent = "Widget.MaterialComponents.Button" >
< item name = "shapeAppearance" >@style/customContainedButtonTheme</ item >
< item name = "android:textAppearance" >@style/myCustomTextForMaterialButtons</ item >
</ style >
< style name = "customContainedButtonTheme" >
< item name = "cornerFamily" >rounded</ item >
< item name = "cornerSize" >24dp</ item >
</ style >
< style name = "myCustomOutlinedButton" parent = "Widget.MaterialComponents.Button.OutlinedButton" >
< item name = "shapeAppearance" >@style/customOutlinedButtonTheme</ item >
< item name = "android:textAppearance" >@style/myCustomTextForMaterialButtons</ item >
</ style >
< style name = "customOutlinedButtonTheme" >
< item name = "cornerFamily" >cut</ item >
< item name = "cornerSize" >12dp</ item >
</ style >
< 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
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
tools:context = ".MainActivity"
tools:ignore = "HardcodedText" >
< Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center"
android:layout_marginTop = "64dp"
android:text = "Contained Button" />
< 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" />
< 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
Last Updated :
19 Jul, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...