Theming Material Design Buttons in Android with Examples
Last Updated :
23 Jul, 2025
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
Similar Reads
Android Tutorial In this Android Tutorial, we cover both basic and advanced concepts. So whether you are a fresher (graduate) or an experienced candidate with several years of Android Development experience, you can follow this Android tutorial to kick-start your journey in Android app development. Our Android Tutor
15+ min read
Basics
Introduction to Android DevelopmentAndroid operating system is the largest installed base among various mobile platforms across the globe. Hundreds of millions of mobile devices are powered by Android in more than 190 countries of the world. It conquered around 71% of the global market share by the end of 2021, and this trend is grow
5 min read
History of AndroidAndroid devices form a very essential part of a huge section of mobile phone users in today's world. With the global turmoil in the COVID-19 eras, the population has now entered a digital sphere. Android is the most used OS in smartphones during these days of transformation. But when did something l
15+ min read
Best Way to Become Android Developer – A Complete RoadmapAndroid is an open-source operating system, based on the Linux kernel and used in mobile devices like smartphones, tablets, etc. Further, it was developed for smartwatches and Android TV. Each of them has a specialized interface. Android has been one of the best-selling OS for smartphones. Android O
7 min read
Android Development Prerequisites [2025] - Things to Learn Before Android DevelopmentHave you ever wondered how your phone's apps—such as those for making calls, playing games, or checking the weather—are created? Android Development is the procedure used to generate these apps. The Android operating system powers the majority of phones, just like an engine powers a car. To ensure t
8 min read
Android App Development Fundamentals for BeginnersAndroid is an operating system that is built basically for Mobile phones. It is based on the Linux Kernel and other open-source software and is developed by Google. It is used for touchscreen mobile devices such as smartphones and tablets. But nowadays these are used in Android Auto cars, TV, watche
6 min read
Android ArchitectureAndroid architecture contains a different number of components to support any Android device's needs. Android software contains an open-source Linux Kernel having a collection of a number of C/C++ libraries which are exposed through application framework services. Among all the components Linux Kern
5 min read
Android System ArchitectureThe Android software stack generally consists of a Linux kernel and a collection of C/C++ libraries that are exposed through an application framework that provides services, and management of the applications and run time. Linux KernelAndroid was created on the open-source kernel of Linux. One main
3 min read
Android Boot ProcessBooting Process In computing, booting is starting up a computer or computer appliance until it can be used. It can be initiated by hardware such as a button press, or by software command. After the power is switched on the computer is relatively dumb, and can read only part of its storage called Rea
4 min read
Difference between Java and Kotlin in Android with ExamplesKotlin KOTLIN is a cross platform, statically types, general purpose programming language with type inference. KOTLIN is designed to interoperate fully with java but type inference allows its syntax to be more concise.KOTLIN is sponsored by JetBrains and Google through the Kotlin Foundation. Java JA
3 min read
Interesting Facts About AndroidAndroid is a Mobile Operating System that was released on 23, September 2008. Android is free, open-source operating system and is based on modified version of Linux kernel. Open Handset Alliance (OHA) developed the Android and Google commercially sponsored it. It is mainly designed for touchscreen
3 min read
Software Setup and Configuration
Android Studio Tutorial It is stated that "If you give me six hours to chop down a tree then I will spend the first four hours in sharpening the axe". So in the Android Development World if we consider Android Development as the tree then Android Studio should be the axe. Yes, if you are starting Android Development then y
9 min read
File Structure & Components
Core Topics
How Does Android App Work?Developing an android application involves several processes that happen in a sequential manner. After writing the source code files, when developers click the Run button on the Android studio, plenty of operations and process starts at the backend. Every operation happening in the background is a c
7 min read
Activity Lifecycle in Android with Demo AppIn Android, an activity is referred to as one screen in an application. It is very similar to a single window of any desktop application. An Android app consists of one or more screens or activities. Each activity goes through various stages or a lifecycle and is managed by activity stacks. So when
9 min read
Introduction to GradleGradle is an open-source construction tool that is capable of controlling the development tasks with compilation and packaging, including testing, deployment and publishing. It is an automation tool that is based on Apache Ant and Apache Maven. This tool is capable of developing applications with in
4 min read
What is Context in Android?Android Applications are popular for a long time and it is evolving to a greater level as users' expectations are that they need to view the data that they want in an easier smoother view. Hence, the android developers must know the important terminologies before developing the app. In Android Progr
9 min read
Bundle in Android with ExampleIt is known that Intents are used in Android to pass to the data from one activity to another. But there is one another way, that can be used to pass the data from one activity to another in a better way and less code space ie by using Bundles in Android. Android Bundles are generally used for passi
6 min read
Activity State Changes In Android with ExamplePrerequisites: Activity lifecycle in android As it is known that every Android app has at least one activity associated with it. When the application begins to execute and runs, there are various state changes that activity goes through. Different events some user-triggered and some system triggered
6 min read
Processes and Application Lifecycle in AndroidAs an android developer, if one does not know the application lifecycle of android application or does not have in-depth knowledge about it, there are very high chances that the application will not have a good user experience. Not having proper knowledge of the application lifecycle will not affect
7 min read
Desugaring in AndroidGoogle has officially announced Kotlin as a recommended language for Android Development and that's why so many developers are switching from Java to Kotlin for Android development. So day by day new APIs are been introduced in Android by the Google Team and which are available in newer versions of
4 min read
Difference Between AndroidX and Android Support LibrariesSupport library packages in Android are a set of code libraries whose prime purpose is to provide backward-compatibility to the code and Android API framework. In the real world, there is a strong possibility that an application that is developed on the latest Android version is used on an older ver
3 min read
Memory Leaks in AndroidA memory leak is basically a failure of releasing unused objects from the memory. As a developer one does not need to think about memory allocation, memory deallocation, and garbage collection. All of these are the automatic process that the garbage collector does by itself, but the situation become
7 min read
Layout & View
Layouts in Android UI DesignLayout Managers (or simply layouts) are said to be extensions of the ViewGroup class. They are used to set the position of child Views within the UI we are building. We can nest the layouts, and therefore we can create arbitrarily complex UIs using a combination of layouts.There is a number of layou
3 min read
Android UI LayoutsLayouts in Android define the user interface and hold UI controls or widgets that appear on the screen of an application. Every Android application consists of View and ViewGroup elements. Since an application contains multiple activities—each representing a separate screen—every activity has multip
5 min read
LinearLayout and its Important Attributes with Examples in AndroidLinearLayout is one of the most basic layouts in android studio, that arranges multiple sub-views (UI elements) sequentially in a single direction i.e. horizontal or vertical manner by specifying the android:orientation attribute. If one applies android:orientation="vertical" then elements will be a
3 min read
Android LinearLayout in KotlinLinearLayout in Android is a ViewGroup subclass, used to arrange child view elements one by one in a singular direction either horizontally or vertically based on the orientation attribute. We can specify the linear layout orientation using the android:orientation attribute. All the child elements a
2 min read
Android RelativeLayout in KotlinRelativeLayout in Android is a ViewGroup subclass, that allows users to position child views relative to each other (e.g., view A to the right of view B) or relative to the parent (e.g., aligned to the top of the parent). Instead of using LinearLayout, we have to use RelativeLayout to design the use
4 min read
ConstraintLayout in AndroidConstraintLayout is the most advanced layout in Android that lets you create complex and responsive UIs while minimizing nested views due to its flat view hierarchy. ConstraintLayout is similar to that of other View Groups which we have seen in Android such as RelativeLayout, LinearLayout, and many
6 min read
TextView widget in Android with ExamplesWidget refers to the elements of the UI (User Interface) that help the user interact with the Android App. TextView is one of many such widgets which can be used to improve the UI of the app. TextView refers to the widget which displays some text on the screen based on the layout, size, colour, etc
5 min read
TextView in KotlinAndroid TextView is simply a view that are used to display the text to the user and optionally allow us to modify or edit it. First of all, open Kotlin project in Android Studio. Following steps are used to create Steps to Implement TextViewSteps by Step implementation for creating an application wh
3 min read
Working With the TextView in AndroidTextView in Android is one of the basic and important UI elements. This plays a very important role in the UI experience and depends on how the information is displayed to the user. This TextView widget in Android can be dynamized in various contexts. For example, if the important part of the inform
7 min read
Autosizing TextView in AndroidIf the user is giving the input and the input needs to be shown as TextView and if the user inputs the stuff which can go out of the screen, then in this case the font TextView should be decreased gradually. So, in this article, it has been discussed how the developer can reduce the size of TextView
6 min read
Button
Intent and Intent Filters
What is Intent in Android?In Android, it is quite usual for users to witness a jump from one application to another as a part of the whole process, for example, searching for a location on the browser and witnessing a direct jump into Google Maps or receiving payment links in Messages Application (SMS) and on clicking jumpin
4 min read
Implicit and Explicit Intents in Android with ExamplesPre-requisites: Android App Development Fundamentals for Beginners Guide to Install and Set up Android Studio Android | Starting with the first app/android project Android | Running your first Android app This article aims to tell about the Implicit and Explicit intents and how to use them in an and
6 min read
How to Send Data From One Activity to Second Activity in Android?This article aims to tell and show how to "Send the data from one activity to second activity using Intent" . In this example, we have two activities, activity_first which are the source activity, and activity_second which is the destination activity. We can send the data using the putExtra() method
7 min read
How to open dialer in Android through Intent?The phone dialer is an activity available with the Android operating system to call a number. Usually, such activity may or may not have an EditText, for taking the number as input, and a Call button. When the user presses the Call button, it invokes the dialer app activity. Use of 'tel:' prefix is
3 min read
Creating Multiple Screen Applications in AndroidThis article shows how to create an android application to move from one activity to another using the concept of Explicit Intents. Below are the steps for Creating a Simple Android Application to move from one activity to another activity.Step By Step ImplementationStep 1: Create a New Project in A
6 min read
How to Open Camera Through Intent and Display Captured Image in Android?The purpose of this article is to show how to open a Camera from inside an App and click the image and then display this image inside the same app. An android application has been developed in this article to achieve this. The opening of the Camera from inside our app is achieved with the help of th
6 min read
Toast & RecyclerView
Toasts for Android StudioA toast provides a simple popup message that is displayed on the current activity UI screen (e.g. Main Activity). Example: Syntax:// To get ContextContext context = getApplicationContext(); // Message to displayString text = "Toast message"; // Toast time duration, can also set manual value int dura
2 min read
What is Toast and How to Use it in Android with Examples?Pre-requisites: Android App Development Fundamentals for BeginnersGuide to Install and Set up Android StudioAndroid | Starting with the first app/android projectAndroid | Running your first Android appWhat is Toast in Android? A Toast is a feedback message. It takes a very little space for displayin
6 min read
Android Toast in KotlinA Toast is a short alert message shown on the Android screen for a short interval of time. Android Toast is a short popup notification which is used to display information when we perform any operation in our app. In this tutorial, we shall not just limit ourselves by creating a lame toast but also
3 min read
How to Change Toast font in Android?A Toast is a feedback message. It takes a very little space for displaying while overall activity is interactive and visible to the user. It disappears after a few seconds. It disappears automatically. If user wants permanent visible message, Notification can be used. Note: Toast disappears automati
3 min read
How to add a custom styled Toast in AndroidA Toast is a feedback message. It takes very little space for displaying and it is displayed on top of the main content of an activity, and only remains visible for a short time period. This article explains how to create Custom Toast messages, which has custom background, image, icon, etc, which ar
4 min read
RecyclerView in Android with ExampleRecyclerView is a ViewGroup added to the android studio as a successor of the GridView and ListView. It is an improvement on both of them and can be found in the latest v-7 support packages. It has been created to make possible construction of any lists with XML layouts as an item which can be custo
7 min read
Android | Horizontal RecyclerView with ExamplesRecycler View is a ViewGroup added to Android Studio as a successor of the GridView and ListView. It is an improvement on both of them and can be found in the latest v-7 support packages. It has been created to make possible construction of any lists with XML layouts as an item which can be customiz
4 min read
How to create a nested RecyclerView in AndroidA nested RecyclerView is an implementation of a RecyclerView within a RecyclerView. An example of such a layout can be seen in a variety of apps such as the Play Store, where the outer (parent) RecyclerView is of vertical orientation, whereas the inner (child) RecyclerViews are of horizontal orienta
5 min read
How to Create RecyclerView with Multiple ViewType in Android?RecyclerView forms a crucial part of the UI in Android app development. It is especially important to optimize memory consumption when displaying a long list of items. A RecyclerView inflates a customized list of items, which can have either similar layouts or multiple distinct layouts. Here, we dev
6 min read
RecyclerView using ListView in Android With ExampleRecyclerView is a more flexible and advanced version of ListView and GridView. RecyclerView is used for providing a limited window to a large data set, which means it is used to display a large amount of data that can be scrolled very efficiently by maintaining a limited number of Views. In Recycler
5 min read