A button in any application is the simplest way to start any action or function when tapped on. In android, there are different types of buttons such as a simple Button, Image Button, Radio Button, Toggle Button. One can use any of these as per the requirement of the application. These buttons can have some text or an image on them. These texts and images can be set to the button using various attributes. A few of the important attributes of a button in android are mentioned below in the article. First, let’s take a look at how to add a button in android.

Adding a simple button in android:

Once you create a new project or open up your existing project, you can find an XML file by the name “activity_main.xml” and a JAVA file by the name “MainActivity.java“. As you know, we will be implementing the design of the button in the XML file and then set On Click Listeners to the button in the respective JAVA file. To do so, open the “activity_main.xml” file and follow the simple 5 steps given below to add a new button in android.

Step 1:

Make sure you remove all the views from within the layout that comes along when you create a project or new activity. If you already have implemented any views then let them be. The XML file will look something like below.

For this example, we are going to use the Constraint Layout, in which we have to set constraints to any two sides of a view to making sure it does not jump back to ( 0, 0 ) position.

Step 2:

Now, it’s time to actually write the code for the button. Have a look at the code below, that’s how a button is implemented in XML.


<Button
    android:layout_width="180dp"
    android:layout_height="60dp" />

This is the necessary code for implementing a button. You will be able to see the button in the preview besides. In the next step, we will add text and color to the button.

Make sure to write this code between:

<androidx.constraintlayout.widget.ConstraintLa yout>

and

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3:

Now let’s add the code for adding text, increasing the text size and giving color to the button.

We need the attributes “android:test” for adding text to the button, “android:testSize” for changing text size and “android:background” for changing the background of the button. Note that we can set a color or an image as the background for an image. In this example, we have set a color as the background. To set an image as background just use this line of code:

android:background=”@drawable/NAME_OF_IMG”

Make sure you add an image in the “drawable” folder first.


<Button
    android:layout_width="180dp"
    android:layout_height="60dp"
    android:text="Click Me!"
    android:textSize="18sp"
    android:background="@color/colorPrimary" />

Step 4:

In order to perform a function on a button, we need to assign it an ID by which the JAVA file can identify the button and then set functions to it.

“android:id” attribute is used to set id to a button. In this example we have setting the id of the button as “button1”.


<Button
    android:id="@+id/button1"
    android:layout_width="180dp"
    android:layout_height="60dp"
    android:text="Click Me!"
    android:textSize="18sp"
    android:background="@color/colorPrimary" />

Step 5:

At the end, as we are using constraint layout, we need to ad constraints to our button. If we don’t do that the button will jump back to ( 0, 0 ) position when we run the application. To do that, click on the “Design” tab in the left-bottom corner of your editor besides the “Text” tab. Now you will be able to drag the button anywhere. Drag it right in center of the layout just as shown below.

Now, select the button, and right-click on it. A dialog will appear, select:

Constrain >> parent Top

Do it again and this time select:

Constrain >> parent Start

The constrains will appear

Complete code for implementing a button in android with constrains.


<Button
    android:id="@+id/button1"
    android:layout_width="180dp"
    android:layout_height="60dp"
    android:layout_marginStart="115dp"
    android:layout_marginTop="335dp"
    android:layout_marginBottom="336dp"
    android:background="@color/colorPrimary"
    android:text="Click Me!"
    android:textSize="18sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Attributes for Button:

Attribute	Description
android:id	used to assign a unique identity to a view.
android:layout_width	used to define the width of the view.
android:layout_height	used to define the height of the view.
android:text	used to set the display text inside a button.
android:textSize	used to define the size of the text inside a button. (Note: text size is always given in "sp")
android:textStyle	used to set style (bold/italic/etc.) to the text
android:layout_margin	Used to set a margin from all sides of the view.
android:layout_marginTop	used to set top margin of the view.
android:layout_marginBottom	used to set bottom margin of the view.
android:layout_marginStart	used to set a margin from the left side of the view.
android:layout_marginEnd	used to set a margin from the right side of the view.
android:background	used to change the background of the view.
android:padding	used to set a padding for the view.
android:drawableLeft	used to set drawable (icon) to the felt of the view.
android:drawableRight	used to set drawable (icon) to the right of the view.

There are many more such attributes that can be used to design a button. Press Cltr+Space when writing these attributes to get suggestions of the various attributes you can use.

Performing Action on Button Click:

To perform an action when a button is clicked we make the use of a method- View.setOnClickListener. Well, this method is used for performing actions whenever any view is clicked and a button being a view in android it also uses the same method. Whatever our view is may it be a button or an imageView or anything else, just replace the “View” with variables name and you are all set to go.

Now, let’s take a look at how are we supposed to implement onCliclListener for the button we previously implemented. Fro this example we are going to display a simple Toast message when the user clicks the button. Remember that, our button has an id- “button1“. Follow the following steps to implement onClickListener on a button.

Step 1:

Open the “MainActivity.java” file or any of your respective java files.

First, we have to declare a Button variable to access the button we implemented. It is suggested to do it just above the onCreate( ) method. This will enable you to access the button form anywhere in the class.

Declare a Button variable named “Button1” as shown below.

...

public class MainActivity extends AppCompatActivity {

    //Declaring button variable
    Button Button1;


    @Override
    public void onCreate(Bundle savedInstanceState) {

...

Step 2:

Now, we have to initialize the “Button1” variable. The ID that we gave to our button earlier will now come in use. This ID is used by our variable to find the button view we intend to use. The method used to link the XML views with JAVA variables is- findViewById(R.id.Id_Of_The_View). This method takes a Resource Id as a parameter.

...

public class MainActivity extends AppCompatActivity {

    //Declaring button variable
    Button Button1;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Linking XML Button view with JAVA variable
        Button1 = findViewById(R.id.button1);
...

    }
}

As you can see, the parameter needs to be given in a certain way, i.e. “R.id.Id_Name”. Here, the R is for the class android.R, which in turn belongs to the java.lang.Object class. For better understanding, the syntax for passing the parameter is- Resource(R)+type(id/layout/drawable)+id_name.

Step 3:

Now that we have linked our XML button view to out JAVA variable, it’s time to set OnClickListener to our button.


...

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //Linking XML Button view with JAVA variable
    Button1 = findViewById(R.id.button1);

    //Setting onClickListener to perform action on button click
    Button1.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            //Displaying a simple toast message.
            Toast.makeText(getApplicationContext(),
                    "Button is clicked!",
                    Toast.LENGTH_SHORT)
                    .show();

        }
    });

    ...

The setOnClickListener( ) takes a paramenter

View.onClickListener( ) inside which an onClick( ) method is present. This onClick( ) method in turns takes a View as parameter . What ever you code inside this onClick( ) method is executed when you click the button.

Using this setOnclickListener( ) method, any view can be made clickable and actions can be performed when the click event occurs.

As you can see, inside the onClick( ), is the code for displaying a simple Toast. The syntax for Toast is: Toast.makeText(Context, CharSequence text, Int duration).

Here, context refers to which activity wants do display the Toast, a message string needs to be passed after that and we have to specify for how long do we want to display the Toast message. “Toast.LENGTH_SHORT” & “Toast.LENGHT_LONG”, are used to define the duration of Toast. In the end, the .show( ) method is used to display the Toast message. Without it, the Toast will not be displayed.

And that’s all, our button is now clickable. This is how the output will look like.

And that’s pretty much it. Below is the entire code for this example. If there occur any issues while implementing this example, refer to the code below. If your issues still don’t resolve, feel free to write a comment, we would love to help.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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:id="@+id/button1"
        android:layout_width="180dp"
        android:layout_height="60dp"
        android:layout_marginLeft="115dp"
        android:layout_marginTop="335dp"
        android:layout_marginBottom="336dp"
        android:background="@color/colorPrimary"
        android:text="Click Me!"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

MianActivity.java

package comcodensi.app1;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    //Declaring button variable
    Button Button1;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Linking XML Button view with JAVA variable
        Button1 = findViewById(R.id.button1);

        //Setting onClickListener to perform action on button click
        Button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //Displaying a simple toast message.
                Toast.makeText(getApplicationContext(),
                        "Button is clicked!",
                        Toast.LENGTH_SHORT)
                        .show();

            }
        });

    }
    
}

Button in Android – How to add a button in android and perform actions on button-click

Adding a simple button in android:

Step 1:

Step 2:

Step 3:

Step 4:

Step 5:

Attributes for Button:

Performing Action on Button Click:

Step 1:

Step 2:

Step 3:

activity_main.xml

MianActivity.java

Leave a Reply Cancel reply

Search

RecentPosts

Contact Book Android Application – How to create a contact book android application – Part 3

Contact Book Android Application – How to create a contact book android application – Part 2

Contact Book Android Application – How to create a contact book android application – Part 1

Recent Comments

Categories

Button in Android – How to add a button in android and perform actions on button-click

Adding a simple button in android:

Step 1:

Step 2:

Step 3:

Step 4:

Step 5:

Attributes for Button:

Performing Action on Button Click:

Step 1:

Step 2:

Step 3:

activity_main.xml

MianActivity.java

Related Posts

Contact Book Android Application – How to create a contact book android application – Part 1

How to Create a New Android Studio Project – Create Your First Ever Android Project.

Contact Book Android Application – How to create a contact book android application – Part 3

Leave a Reply Cancel reply

Search

RecentPosts

Contact Book Android Application – How to create a contact book android application – Part 3

Contact Book Android Application – How to create a contact book android application – Part 2

Contact Book Android Application – How to create a contact book android application – Part 1

Recent Comments

Categories