Custom Buttons In Android Using Android Studio

Introduction

 
In this article, we are going to see how to create custom buttons with different attributes such as different colors, shapes, sizes, etc. Here we can assign different tasks to each button and each button will perform the assigned task.
 
Step 1
 
Create a new project in Android Studio.
 
Android
 
Give a name to the project and click "Next".
 
Android
 
Select the "Phone and Tablet" and click "Next".
 
Android
 
Select an empty activity and click "Next".
 
Android
 
At last, give the activity name and click on "Finish".
 
Android
 
Step 2
 
Go to app>>res>>drawable and create a new item as follows,
 
Android
 
Name the item in the circle and click ok.
 
Android
 
Repeat the same step to create another 3 items named oval, rectangle, and round
 
Android
 
Step 3
 
Go to circle.xml in a drawable folder and type the code as follows,
 
Android
 
Source code is here,
  1. <?xml version="1.0" encoding="UTF-8"?> -  
  2. <shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <size android:height="100dp" android:width="100dp" />  
  4.     <stroke android:width="3dp" android:color="#000000" />  
  5.     <solid android:color="#00ff51" />  
  6. </shape>  
Step 4
 
Go to oval.xml in a drawable folder and type the code as follows,
 
Android
 
Source code is here,
  1. <?xml version="1.0" encoding="UTF-8"?> -  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <corners android:radius="50dp" />  
  4.     <stroke android:color="#000000" android:width="3dp" />  
  5.     <solid android:color="#0004ff" />   
  6. </shape>  
Step 5
 
Go to rectangle.xml in a drawable folder and type the code as follows,
 
Android
 
Source code is here,
  1. <?xml version="1.0" encoding="UTF-8"?> -  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <stroke android:color="#000000" android:width="3dp" />  
  4.     <solid android:color="#ff0400" />   
  5. </shape>  
Step 6
 
Go to round.xml in a drawable folder and type the code as follow,
 
Android
 
Source code is here,
  1. <?xml version="1.0" encoding="UTF-8"?> -  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <corners android:radius="10dp" />  
  4.     <stroke android:color="#000000" android:width="3dp" />  
  5.     <solid android:color="#fff700" />   
  6. </shape>  
Step 7
 
Next, go to app >> res >> layout >> activity_main.xml. Select activity page,
 
Android
 
And just type the code as follows.
 
Android
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. -  
  3. <android.support.constraint.ConstraintLayout tools:context="com.moqueet.abdul.custombutton.MainActivity"   
  4. android:layout_height="match_parent"   
  5. android:layout_width="match_parent"  
  6.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  7.     xmlns:tools="http://schemas.android.com/tools"  
  8.     xmlns:android="http://schemas.android.com/apk/res/android">  
  9.     <Button android:layout_height="wrap_content"   
  10.          android:layout_width="200dp"   
  11.          android:layout_marginTop="61dp"   
  12.          app:layout_constraintTop_toTopOf="parent"   
  13.          app:layout_constraintRight_toRightOf="parent"   
  14.          app:layout_constraintLeft_toLeftOf="parent"   
  15.          android:background="@drawable/rectangle"   
  16.          android:textColor="#FFF"   
  17.          android:text="Rectangle"   
  18.          android:id="@+id/rect"/>  
  19.     <Button android:layout_height="wrap_content"   
  20.          android:layout_width="200dp"   
  21.          android:layout_marginTop="38dp"   
  22.          app:layout_constraintRight_toRightOf="parent"   
  23.          app:layout_constraintLeft_toLeftOf="parent"   
  24.          android:background="@drawable/round"   
  25.          android:textColor="#FFF"   
  26.          android:text="Round Corner"   
  27.          android:id="@+id/rou"   
  28.          app:layout_constraintTop_toBottomOf="@+id/rect"/>  
  29.     <Button android:layout_height="wrap_content"   
  30.          android:layout_width="200dp"   
  31.          android:layout_marginTop="36dp"   
  32.          app:layout_constraintRight_toRightOf="parent"   
  33.          app:layout_constraintLeft_toLeftOf="parent"   
  34.          android:background="@drawable/oval"   
  35.          android:textColor="#FFF"   
  36.          android:text="Oval"   
  37.          android:id="@+id/oval"   
  38.          app:layout_constraintTop_toBottomOf="@+id/rou"/>  
  39.     <Button android:layout_height="wrap_content"   
  40.          android:layout_width="wrap_content"   
  41.          android:layout_marginTop="49dp"   
  42.          app:layout_constraintRight_toRightOf="parent"   
  43.          app:layout_constraintLeft_toLeftOf="parent"  
  44. package com.moqueet.abdul.custombutton;  
  45. import android.support.v7.app.AppCompatActivity;  
  46. import android.os.Bundle;  
  47. import android.view.View;  
  48. import android.widget.Button;  
  49. import android.widget.Toast;  
  50. public class MainActivity extends AppCompatActivity 
  51.    {  
  52.       Button rect, round, oval, circle;  
  53.       @Override  
  54.       protected void onCreate(Bundle savedInstanceState) {  
  55.          super.onCreate(savedInstanceState);  
  56.          setContentView(R.layout.activity_main);  
  57.          rect = (Button)findViewById(R.id.rect);  
  58.          round = (Button)findViewById(R.id.rou);  
  59.          oval = (Button)findViewById(R.id.oval);  
  60.          circle = (Button)findViewById(R.id.cir);  
  61.       rect.setOnClickListener(new View.OnClickListener() {  
  62.          @Override  
  63.       public void onClick(View v) {  
  64.             Toast.makeText(getApplicationContext(),"Rectangle Button clicked!",Toast.LENGTH_SHORT).show();  
  65.       }  
  66.    });  
  67. round.setOnClickListener(new View.OnClickListener() {  
  68.    @Override  
  69.    public void onClick(View v) {  
  70.       Toast.makeText(getApplicationContext(),"Round Button clicked!",Toast.LENGTH_SHORT).show();  
  71.       }  
  72.    });  
  73.    }  
  74. }  
  75. android:background="@drawable/circle"   
  76. android:textColor="#FFF"   
  77. android:text="Circle"   
  78. android:id="@+id/cir"   
  79. app:layout_constraintTop_toBottomOf="@+id/oval"/>  
  80. </android.support.constraint.ConstraintLayout>  
Step 8
 
Next, go to app >> java>>Mainactivity.java. Select Mainactivity page,
 
Android
 
And just type the code as follows:
 
Android
  1. package com.moqueet.abdul.custombutton;  
  2. import android.support.v7.app.AppCompatActivity;  
  3. import android.os.Bundle;  
  4. import android.view.View;  
  5. import android.widget.Button;  
  6. import android.widget.Toast;  
  7. public class MainActivity extends AppCompatActivity {  
  8.     Button rect, round, oval, circle;  
  9.     @Override  
  10.     protected void onCreate(Bundle savedInstanceState) {  
  11.         super.onCreate(savedInstanceState);  
  12.         setContentView(R.layout.activity_main);  
  13.         rect = (Button) findViewById(R.id.rect);  
  14.         round = (Button) findViewById(R.id.rou);  
  15.         oval = (Button) findViewById(R.id.oval);  
  16.         circle = (Button) findViewById(R.id.cir);  
  17.         rect.setOnClickListener(new View.OnClickListener() {  
  18.             @Override  
  19.             public void onClick(View v) {  
  20.                 Toast.makeText(getApplicationContext(), "Rectangle Button clicked!", Toast.LENGTH_SHORT).show();  
  21.             }  
  22.         });  
  23.         round.setOnClickListener(new View.OnClickListener() {  
  24.             @Override  
  25.             public void onClick(View v) {  
  26.                 Toast.makeText(getApplicationContext(), "Round Button clicked!", Toast.LENGTH_SHORT).show();  
  27.             }  
  28.         });  
  29.     }  
  30. }  
Step9
 
Verify the preview.
->After the code is applied, the preview will appear like this.
 
Android
 
Step 10
 
Next, go to Android Studio and deploy the application. Select an Emulator or your Android mobile with USB debugging enabled. Give it a few seconds to make installations and set permissions.
 
Android
 
Run the application in your desired emulator (Shift + F10).
 
Android
 
Finally, we have successfully created custom buttons.
 
Explanation of source code
 
The source code used in this app will create the button and set up the attributes to that button such as size shape and color.
 

Summary

 
Here, we created a new project named custom button and added few buttons to our app with the custom shape, size, and color. Finally, we have deployed that app for the final output.
 
*Support and share. Thank you!*