How to Create Custom Button in Android || Custom Button Example in Android

Custom Button Example in Android

Custom Button

Hello Friends, Today we will teach you how to create a custom Button in Android.
friends, as can you see the normal buttons, are not so attractive and beautiful, and if you want to make your app more beautiful and attractive then you need to create custom buttons for your app so today we teach you how to create custom buttons in android.

What is a custom button?

Friends, the custom button is the button that we can make according to our requirements, you can fill in the color and make the design according to our requirements so that those buttons look much better than a normal button on Android.

Friends, as you all know, today is a time of competition, everyone is starting to do something new and what you are doing, you do not know how many more people are doing. In the world of Android, the app that you are making today may be someone else who is also making the app, at such a time. friends are able to make their app popular, which has made its user interface very good and easy to run. which can be run by everyone very easily.

Friends, we do custom buttons to make our app nice and beautiful, for a good design and a good user interface so that our apps are better in appearance than others. Because friends make everyone a normal button, but if we want to make our app look better and better than other apps, then we have to give ourselves a good look or a very good design using which a user is very Have a good feeling and friends when you make a custom button you will know how much difference there is between a custom button and a normal button on Android.

Let's start:-

Friends, first of all, you have to open Android Studio and open the project in which you have to create a custom button or you can also create a new project.

Friends, after that you have to come to the file of activity_main.xml or go to your xml file and create a button.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_centerInParent="true"
        android:id="@+id/btn"/>

</RelativeLayout>

Now set the id and name.
Friends, now we have to create an xml file for our button, for the button design, we have to create an xml file of a drawable for that.
now you have to click on the folder of the app in Android Studio and go to the res folder and click on the drawable folder and move the cursor of the mouse to the right. You have to click and select New and click on the Drawable resource file.
Now a new window will open in front of you, you will give the name of your drawable file, we have given the name button_style in this tutorial, and now the button of OK Click on it.
Now you will see the selector written, you have to change it and write the shape on it.

Now you have to write <solid inside it and select the color in it and select the color of your choice. You can use any color.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/holo_blue_dark"/>
    <corners android:radius="50dp"/>
</shape>

After taking the color you have to take the <corners below it and give the radius in it, we are giving 50dp in this tutorial you can see the change according to your own and friends use radius rounded all four corners. And remember friends whenever you use radius, you must give padding in the xml of the button. If you do not do this, then the name of your button may be the button Touch the border.

Now where we have created the button, we have to go and write the background and select the file of the button_style on it.

<Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/btn"
       android:padding="10dp"
       android:text="Custom Button"
       android:background="@drawable/button_style"
       android:layout_centerInParent="true"/>

Now you can see that the design and color of the button have become the same as we had given it.
Now we have to show toast on its click, so now we will go to the file of Java and we will take that button and also its object.
Now by finding the id of the button's object, we will make an event called on the object which is setOnClickListener.
Now inside setOnClickListener we will write Toast.makeText and together with the name of our current activity first and write "This is Custom Button" in the text, and select the length of toast according to your length long or short.
Friends long and short means, if you want to show toast longer, then you have to select length_long or else length_short.

Now, after giving us the length of toast to make the toast appear at the click of the button .show (); We have to write more so that our toast will show.

MainActivity.java :-

package com.akshayarora.mydemo;

import androidx.appcompat.app.AppCompatActivity;

import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button = (Button)findViewById(R.id.btn);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "This is Custom Button", Toast.LENGTH_SHORT).show();
            }
        });
    }
}