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

Last Updated : 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

Approach:

Below are the various steps to created customized Buttons:
Step 1: Start a new Android Studio project
Please refer to this article to see in detail about how to create a new Android Studio project.

Step 2: Add the Button
Since 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 button
In 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 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.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”

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> 