How to create custom buttons in Android?
In this blog, we’re going to see how to create custom buttons in android. Before going to create a custom button first, let’s discuss what is a button in android.
A Button is a Push-button that can be pressed by the user to act. The android.widget.button is a subclass of TextView class and CompoundButton is the subclass of the Button class. The button consists of text or an icon (or both text and an icon) that describes what action occurs when the user clicks it.
There are different types of attributes of a button that are used to create a button or make it visible for the user. We can find it by clicking this What is a button inAndoird.
We can create a button in the layout file in three ways using text, an icon, or both text and an icon:
· With text, using the Button class:
<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/button_text”
… />
· With an icon, using the ImageButton class:
<ImageButton
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:src=”@drawable/button_icon”
android:contentDescription=”@string/button_icon_desc”
… />
· With text and an icon, using the Button class with the android:drawableLeft attribute:
<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/button_text”
android:drawableLeft=”@drawable/button_icon”
… />
Create Custom Buttons:
- Create an android project in Android Studio.
- First, we learn how to use android properties to customize the button background.
- In the first button, there is a property named android: layout_width, here we used this property as match_parent. This property is used to define the width of the view in full screen horizontally. And android: layout_height is used as wrap_content, it is used to display big enough to enclose its content only. Also, we used an android: layout_margin. It gives space to the layout from all sides. For highlighting the text we used background as colorPrimary.
<Button
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_marginTop=”20dp”
android:text=”Button 1"
android:textSize=”18sp”
android:background=”@color/colorPrimary”
android:textColor=”@android:color/white”/>
Output of the code snippet:
- In the second button, change the width of the button to 300dp. And set the background to black.
<Button
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Button 2"
android:textSize="18sp"
android:background="@android:color/black"
android:textColor="@android:color/white"/>
Output of the code snippet:
- In the third button, the layout width and height are set as much we need. Here width is 300dp and height is 80dp.
<Button
android:layout_width="300dp"
android:layout_height="80dp"
android:layout_marginTop="20dp"
android:text="Button 3"
android:textSize="18sp"
android:background="@android:color/black"
android:textColor="@android:color/white"/>
Output of the code snippet:
- In the fourth button, let’s use a gradient background. For the gradient background, we need to create a drawable resource XML file inside the drawable directory (res > drawable > drawable resource file), and give the name of the file then paste the below code.
<?xml version=”1.0" encoding=”utf-8"?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android"
android:shape=”rectangle”>
<gradient
android:startColor=”#E91E63"
android:centerColor=”#FF9191"
android:endColor=”#E978FF”
android:angle=”90"/><corners android:radius=”25dp”/>
</shape>
You can change the color, radius, and shape as per your requirement.
- Now set the background of the button as the drawable file name.
<Button
android:layout_width="300dp"
android:layout_height="80dp"
android:layout_marginTop="20dp"
android:text="Button 4"
android:textSize="18sp"
android:background="@drawable/gradient_backgrnd"
android:textColor="@android:color/white"/>
Output of the code snippet:
- In the last button, set the width and height of the button as wrap_content and add some padding from all the sides to look good without the gradient background.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:padding="10dp"
android:text="Button 5"
android:textSize="18sp"
android:background="@android:color/black"
android:textColor="@android:color/white"/>
Output of the code snippet:
activity_main.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=”.MainActivity2">
<Button
android:id=”@+id/button1"
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_marginTop=”20dp”
android:background=”@color/colorPrimary”
android:text=”Button 1"
android:textColor=”@android:color/white”
android:textSize=”18sp” />
<Button
android:id=”@+id/button2"
android:layout_width=”300dp”
android:layout_height=”wrap_content”
android:layout_marginTop=”20dp”
android:background=”@android:color/black”
android:text=”Button 2"
android:textColor=”@android:color/white”
android:textSize=”18sp” />
<Button
android:id=”@+id/button3"
android:layout_width=”300dp”
android:layout_height=”80dp”
android:layout_marginTop=”20dp”
android:background=”@android:color/black”
android:text=”Button 3"
android:textColor=”@android:color/white”
android:textSize=”18sp” />
<Button
android:id=”@+id/button4"
android:layout_width=”300dp”
android:layout_height=”80dp”
android:layout_marginTop=”20dp”
android:background=”@drawable/gradient_backgrnd”
android:text=”Button 4"
android:textColor=”@android:color/white”
android:textSize=”18sp” />
<Button
android:id=”@+id/button5"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginTop=”20dp”
android:background=”@android:color/black”
android:padding=”10dp”
android:text=”Button 5"
android:textColor=”@android:color/white”
android:textSize=”18sp” />
</LinearLayout>
MainActivity.java
package com.codewithgolap.fragment;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;public class MainActivity2 extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
Button button1 = findViewById(R.id.button1);
Button button2 = findViewById(R.id.button2);
Button button3 = findViewById(R.id.button3);
Button button4 = findViewById(R.id.button4);
Button button5 = findViewById(R.id.button5);
}
}
Output:
In this blog, I’m trying to give you a small idea of how to use the different attributes of the button view. You can change it as you want to use it in your code.
