
In Android Studio, There are many different types of Android Button available for usefull operation such as: Button, Toggle Button, Radio Button, Image Button etc. You will see all the working examples of of these buttons one by one so stay here and read this tutorial with concentration and be happy while reading it will makes your mood on to learn faster and faster.
An Android Button consist of a icon, text or both (icon and text) and it will responds when users touches or press it. Whether you need a button with text or icon or both you can create button with 3 types in your Android XML Layout file such as:
Simple Button Type:
Simple Button can be use with Text like that below code in your XML Layout file:

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Android Tutorials" />
Image Button:
If you want to use icon in button than you can use Image Button like below:

<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_play" android:contentDescription="@string/app_name" />
Button With Icon & Text:
If you Want to use both icon and text then you you can achieve it using android:drawableStart attibute like that below code:

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Android Tutorials" android:drawableStart="@drawable/ic_play"/>
Button Decoration:
If you want to make your button UI cool than you can do this by using following way:
Button Text Size: To Set Button Text Size Use:
android:textSize="20sp"
You have to to just add this line in this way: and just replace 20sp to any text size.
<Button android:textSize="20sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Android Tutorials" />
Button Background: To set a background on button you can use this:
android:background="@color/colorPrimary"
Then you can add above line in button tag like this way:
<Button android:textSize="20sp" android:background="@color/colorPrimary" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Android Tutorials" />
Button Text Color: To change the button text colot you add this line:
android:textColor="@color/white"
Now button look like this below image:

Now you check carefully that button still not looking cool because of button text has no space from its start point and in the end point, so add some padding to it like below way:
android:padding="15dp"
You can set padding according to your needs. Now our final button look like below image:

Now in the same way you can use it with Image Button and drawbaleStart Button. Button with drawableStart look like below image:

You can see that Button with drawableStart looking cool but it still has something missing yes it icon not looking cool so chage it to white: using this code:
android:drawableTint="@color/white"
At this time our Button look like below image:

Now add some padding to make it more cool like this way:
android:drawablePadding="10dp"

The complete code is give below:
<Button android:textSize="20sp" android:background="@color/colorPrimary" android:textColor="@color/white" android:padding="15dp" android:drawableStart="@drawable/ic_play" android:drawableTint="@color/white" android:drawablePadding="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Android Tutorials" />
Gradient Button:
Yes you can add gradient color to your android button using set background as drawable file. To add gradient color to your Android Button you have to create a drawable xml file. How to create Drawable XML File Click Here. At this time you can add below code to your this drawable code:
<?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <gradient android:angle="45" android:centerColor="#0091EA" android:endColor="#6200EA" android:startColor="#00C853" android:type="linear" /> <corners android:radius="20dp"/> </shape>


Final Gradient Color Button Code is give by:
<Button android:textSize="20sp" android:background="@drawable/gradeint" android:textColor="@color/white" android:padding="15dp" android:drawableStart="@drawable/ic_play" android:drawableTint="@color/white" android:drawablePadding="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Android Tutorials" />
Gradient Image Button:
In the same way you can set Gradeint color to your Image Button like this way:

Code of Gradient Image Button is give by:
<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_play" android:tint="@color/white" android:contentDescription="@string/app_name" android:background="@drawable/gradeint" android:padding="5dp" android:drawableTint="@color/white" />
Button Click Events:
we can add button click in many ways but here you will learn the easiest method recommended by google Android which is: onClick Method.
android:onClick="ClickMe"
You can replace “ClickMe” text with your text as you want it is the method by which your button perform some operation on click event. You can use this method in your XML Layout file in button tag like below way:
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20sp" android:background="@drawable/gradeint" android:textColor="@color/white" android:padding="15dp" android:drawableStart="@drawable/ic_play" android:drawableTint="@color/white" android:drawablePadding="10dp" android:onClick="ClickMe" android:text="Android Tutorials" />
Now in your above code keep the cursor on “ClickMe” and Press “Alt + Enter” and choose “Create ‘ClickMe(View)’ in ‘MainActivity’” as shown in the below screenshot:

Now above request will create a method in your MainActivity.java file like below:
public void ClickMe(View view) { }
Now this method don’t has any command to perform a operation or a task. So suppose that if you want to show a message on click of this button than you can add below code insde this tags { }.
Toast.makeText(this, "Your Message", Toast.LENGTH_LONG).show();
and add belo code to import the toast library in MainActivity.java file:
import android.widget.Toast;
So final code for Button onClick will look like the below code:
public void ClickMe(View view) { Toast.makeText(this, "Your Message", Toast.LENGTH_LONG).show(); }
And when you click on this button it will display: “Your Message” as a toast. There are many other onClick Button method availabe we will discuss them later because they will reqire some other knowledge to perform on click task.
If you have any probelm feel free to comment below. If you like this tutorial please share it with your friends.
Leave a Comment
You must be logged in to post a comment.