How to create customized Buttons in Android with different shapes and colors

19 Feb, 2021
A Button is a user interface that are used to perform some action when clicked or tapped.
Default Shape of Button
In this article, we will try to change the shape and color of Button to various designs, like:
Oval Button
Rectangular Button
Cylindrical Button
Below are the various steps to created customized Buttons:Step 1: Start a new Android Studio projectPlease refer to this article to see in detail about how to create a new Android Studio project.
Step 2: Add the ButtonSince we only need to customize Buttons, we will just add Buttons in our layout. We don’t need any other widget. This can be done either by writing the code in XML or using the Design Tab. Here, we will do so by adding its XML code.
Now since we need to customize the Button as per 3 shapes (as shown above), we will add 3 buttons and add the customization of each separately, lets say the buttons be – oval, rectangle and cylindrical.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?><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"    tools:context=".MainActivity"    android:orientation="vertical"    android:background="#ffff00">      <!-- 1st Button: Oval -->    <Button        android:layout_width="180dp"        android:layout_height="60dp"        android:layout_marginLeft="180dp"        android:layout_marginTop="20dp"        android:text="oval"        android:textColor="#388e3c"/>      <!-- 2nd Button: Rectangle -->    <Button       android:layout_width="180dp"       android:layout_height="60dp"       android:layout_marginLeft="180dp"       android:layout_marginTop="20dp"       android:text="rectangle"       android:textColor="#FFFF"/>      <!-- 3rd Button: Cylindrical -->    <Button       android:layout_width="180dp"       android:layout_height="60dp"       android:layout_marginLeft="180dp"       android:layout_marginTop="20dp"       android:text="cylindrical"       android:textColor="#3e2723"/>  </LinearLayout>
Initially, all three buttons have default values and will look as per the default look shown above.
Step 3: Customizing the buttonIn order to customize the button, as shown above, we will be needing few attributes of Button in particular:
shape: This defines the shape of the widget that is being used. For example: oval, rectangle, etc.color This attribute takes the Hexadecimal color code as parameter and sets the color as per the codecorner::radius: This attribute defines how much curved corners of the button has to be. For example, no curve will lead to rectangle and increasing the curve can result in circle as well.stroke: This attribute refers to the thickness of the outline of the button. The more the stroke, the thicker the outline will be.
shape: This defines the shape of the widget that is being used. For example: oval, rectangle, etc.
color This attribute takes the Hexadecimal color code as parameter and sets the color as per the code
corner::radius: This attribute defines how much curved corners of the button has to be. For example, no curve will lead to rectangle and increasing the curve can result in circle as well.
stroke: This attribute refers to the thickness of the outline of the button. The more the stroke, the thicker the outline will be.
These attributes can be set for a widget with the help of a Drawable resource file.
Creating a new drawable resource file:We will be creating a new drawable file which will contain the customizations such as shape, color, and gradient which we want to set on our button. To create a drawable file, click on: app -> res -> drawable(right click) -> New -> Drawable resource file and name it anything you want.Adding code to the resource file:Now that we have this drawable resource file, we can customize our button by adding tags like shape, color, stroke, or any other attribute which we want.custom_button.xmlcustom_button2.xmlcustom_button3.xmlcustom_button.xml<?xml version="1.0" encoding="utf-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval" >      <stroke        android:color="#388e3c"        android:width="2dp"/>    <corners        android:radius="5dp"/>    <solid        android:color="#ffff"/></shape>custom_button2.xml<?xml version="1.0" encoding="utf-8"?><shape     xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <stroke        android:color="@color/colorPrimary"        android:width="1dp"/>    <corners        android:radius="15dp"/>    <gradient        android:startColor="#2e7d32"        android:endColor="#e0f7fa"/></shape>custom_button3.xml<?xml version="1.0" encoding="utf-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">      <stroke        android:color="@color/colorPrimary"         android:width="1dp"/>    <corners         android:radius="190dp"/>    <solid         android:color="#76ff03"/>    <gradient         android:startColor="#76ff03"/></shape>Adding these customizations to our original button:We can now add these customizations to the default button which we created previously. To do this, we just change the background attribute of our Button to the drawable resource file we just created.android:background=”@drawable/custom_button”
Creating a new drawable resource file:We will be creating a new drawable file which will contain the customizations such as shape, color, and gradient which we want to set on our button. To create a drawable file, click on: app -> res -> drawable(right click) -> New -> Drawable resource file and name it anything you want.
We will be creating a new drawable file which will contain the customizations such as shape, color, and gradient which we want to set on our button. To create a drawable file, click on: app -> res -> drawable(right click) -> New -> Drawable resource file and name it anything you want.
Adding code to the resource file:Now that we have this drawable resource file, we can customize our button by adding tags like shape, color, stroke, or any other attribute which we want.custom_button.xmlcustom_button2.xmlcustom_button3.xmlcustom_button.xml<?xml version="1.0" encoding="utf-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval" >      <stroke        android:color="#388e3c"        android:width="2dp"/>    <corners        android:radius="5dp"/>    <solid        android:color="#ffff"/></shape>custom_button2.xml<?xml version="1.0" encoding="utf-8"?><shape     xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <stroke        android:color="@color/colorPrimary"        android:width="1dp"/>    <corners        android:radius="15dp"/>    <gradient        android:startColor="#2e7d32"        android:endColor="#e0f7fa"/></shape>custom_button3.xml<?xml version="1.0" encoding="utf-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">      <stroke        android:color="@color/colorPrimary"         android:width="1dp"/>    <corners         android:radius="190dp"/>    <solid         android:color="#76ff03"/>    <gradient         android:startColor="#76ff03"/></shape>
Adding code to the resource file:
Now that we have this drawable resource file, we can customize our button by adding tags like shape, color, stroke, or any other attribute which we want.
custom_button.xml
custom_button2.xml
custom_button3.xml
<?xml version="1.0" encoding="utf-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval" >      <stroke        android:color="#388e3c"        android:width="2dp"/>    <corners        android:radius="5dp"/>    <solid        android:color="#ffff"/></shape>
<?xml version="1.0" encoding="utf-8"?><shape     xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <stroke        android:color="@color/colorPrimary"        android:width="1dp"/>    <corners        android:radius="15dp"/>    <gradient        android:startColor="#2e7d32"        android:endColor="#e0f7fa"/></shape>
<?xml version="1.0" encoding="utf-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">      <stroke        android:color="@color/colorPrimary"         android:width="1dp"/>    <corners         android:radius="190dp"/>    <solid         android:color="#76ff03"/>    <gradient         android:startColor="#76ff03"/></shape>
Adding these customizations to our original button:We can now add these customizations to the default button which we created previously. To do this, we just change the background attribute of our Button to the drawable resource file we just created.android:background=”@drawable/custom_button”
android:background=”@drawable/custom_button”
This is how our activity_main.xml file will look now:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?><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"    tools:context=".MainActivity"    android:orientation="vertical"    android:background="#ffff00">      <!-- 1st Button: Oval -->    <Button        android:layout_width="180dp"        android:layout_height="60dp"        android:layout_marginLeft="180dp"        android:layout_marginTop="20dp"        android:text="oval"        android:textColor="#388e3c"        android:background="@drawable/custom_button"/>      <!-- 2nd Button: Rectangle -->    <Button       android:layout_width="180dp"       android:layout_height="60dp"       android:layout_marginLeft="180dp"       android:layout_marginTop="20dp"       android:text="rectangle"       android:textColor="#FFFF"       android:background="@drawable/custom_button2"/>      <!-- 3rd Button: Cylindrical -->    <Button       android:layout_width="180dp"       android:layout_height="60dp"       android:layout_marginLeft="180dp"       android:layout_marginTop="20dp"       android:text="cylindrical"       android:textColor="#3e2723"       android:background="@drawable/custom_button3"/>  </LinearLayout>
Step 4: Running the project to see the output
Output:
Android-Button
Android
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Android SDK and it's Components
Android RecyclerView in Kotlin
Android Project folder Structure
Navigation Drawer in Android
Flutter - Custom Bottom Navigation Bar
Retrofit with Kotlin Coroutine in Android
Content Providers in Android with Example
CardView in Android With Example
How to Post Data to API using Retrofit in Android?
Flutter - Stack Widget