Android Button

Filed Under: Android

In this tutorial, we will look into Android Button. We will create android studio application and look into various things about button designing, styling, click events etc.

Android Button

Android Buttons are GUI components that the users can click upon to either goto the next screen, confirm an option/trigger any event created by you, the Android Developer.
The android.widget.Button is a subclass of Android TextView.
android button tutorial, android studio button example
Buttons in Android can be of the following forms:

In the following sections, we’ll be discussing the default button class, creating it programmatically, styling it.

Creating Button in Layout

We can define the Button widget in our layout file in Android Studio in the following way.


<?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"
    android:gravity="center"
    tools:context="com.journaldev.androidbutton.MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="DEFAULT BUTTON"
        android:onClick="clickMe"/>

</LinearLayout>

In the above code, we’ve wrapped our Button widget inside a LinearLayout
The id represents the unique identifier.
The onClick attribute requires the method name as the value. This method name should be defined in the corresponding activity of the layout.
It’ll get triggered when the button is clicked.
Setting android:background as a color would remove the selection animation from the button.
We can set an image inside the button alongise the text by using the attribute android:drawableLeft to set the image to the left of the text.
Our MainActivity.java class looks like this:


package com.journaldev.androidbutton;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

    public void clickMe(View view)
    {
        Toast.makeText(getApplicationContext(),"Button is clicked",Toast.LENGTH_LONG).show();
    }
}

On clicking the button a Toast notification would be displayed onto the screen.

android button onclick

Create Button Programmatically

Let’s set the attributes on the button programmatically and create one button programmatically.


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        Button button  = findViewById(R.id.button);
        button.setTextColor(Color.RED);
        button.setClickable(false);
    }

We hook the xml button id to the corresponding instance in the class using the findViewById method.
setTextColor() is used to set the text color,
setClickable accepts a boolean value. Setting it to false would make the button not clickable and the clickMe method won’t be triggered.

Creating Button Programmatically

The following code creates a button programmatically and adds it to the root hierarchy.


        Button programmaticButton = new Button(this);
        programmaticButton.setId(R.id.button2);
        programmaticButton.setText("CREATED PROGRAMMATICALLY");
        programmaticButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),"Programmatic Button is clicked",Toast.LENGTH_LONG).show();
            }
        });

        LinearLayout linearLayout = findViewById(R.id.linearLayout);
        linearLayout.addView(programmaticButton);

We can set an ID programmatically using setId. We can create ids in the folder res | values | ids.xml as shown below:

android button ids programmatically

setOnClickListener has an interface callback that listens for the click and triggers the onClick method whenever the button is clicked.

Now let’s add another buttons in our layout programmatically in our MainActivity.java class.


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

        Button button = findViewById(R.id.button);
        button.setTextColor(Color.RED);
        button.setClickable(false);

        //Creating a Button programmatically
        Button programmaticButton = new Button(this);
        programmaticButton.setId(R.id.button2);
        programmaticButton.setText("CREATED PROGRAMMATICALLY");
        programmaticButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "Programmatic Button is clicked", Toast.LENGTH_LONG).show();
            }
        });

        LinearLayout linearLayout = findViewById(R.id.linearLayout);
        linearLayout.addView(programmaticButton);

        programmaticButton = new Button(this);
        programmaticButton.setId(R.id.button3);
        programmaticButton.setText(getResources().getString(R.string.another_button));
        programmaticButton.setBackgroundColor(ContextCompat.getColor(this, R.color.colorAccent));
        programmaticButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "Another Programmatic Button is clicked", Toast.LENGTH_LONG).show();
            }
        });

    }

setBackgroundColor() method is to set a color on the button programmatically.
Ideally, we should use string resources to set text on the button instead of hardcoding them in the java class itself.
In the above code, we’ve created two buttons and each of them has a separate interface callback for the listener. This means we’ll have a different object created in the memory for each of the buttons. This would add up in the heap memory and eventually the application would use more memory than required from the device. We can fix this performance issue by making the class implement the View.OnClickListener itself.

Instead of using separate setOnClickListener callbacks for every Button, implement the interface on the class itself.

So with the View.OnClickListener implemented in the class itself, our MainActivity.java class would look like this:


package com.journaldev.androidbutton;

import android.graphics.Color;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

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

        Button button = findViewById(R.id.button);
        button.setTextColor(Color.RED);
        button.setClickable(false);

        //Creating a Button programmatically
        Button programmaticButton = new Button(this);
        programmaticButton.setId(R.id.button2);
        programmaticButton.setText("CREATED PROGRAMMATICALLY");
        programmaticButton.setOnClickListener(this);

        LinearLayout linearLayout = findViewById(R.id.linearLayout);
        linearLayout.addView(programmaticButton);

        programmaticButton = new Button(this);
        programmaticButton.setId(R.id.button3);
        programmaticButton.setText(getResources().getString(R.string.another_button));
        programmaticButton.setBackgroundColor(ContextCompat.getColor(this, R.color.colorAccent));
        programmaticButton.setOnClickListener(this);

        linearLayout.addView(programmaticButton);

    }

    public void clickMe(View view) {
        Toast.makeText(getApplicationContext(), "Button is clicked", Toast.LENGTH_LONG).show();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button2:
                Toast.makeText(getApplicationContext(), "Programmatic Button is clicked", Toast.LENGTH_LONG).show();
                break;
            case R.id.button3:
                Toast.makeText(getApplicationContext(), "Another Programmatic Button is clicked", Toast.LENGTH_LONG).show();
                break;

        }
    }
}

We’ve set each of the setOnClickListener to the common View.OnClickListener interface using this. In the switch block we detect the Button view that was clicked using their id.
This saves a lot of memory!

Setting Text Size

Text size of a button is typically set in sp units.


<Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="DEFAULT BUTTON"
        android:textSize="20sp"
        android:background="#147D03"
        android:onClick="clickMe"/>

OR do the following in your activity.


Button button = findViewById(R.id.button);
button.setTextColor(Color.RED);
button.setClickable(false);
button.setTextSize(22); //size in float

We’ve added a few more buttons to the layout and attached their listeners in the Activity.
Following is the output of the application in action.

android studio button design

This brings an end to this tutorial. You can find the source code for the Android Button Project below.
In the next tutorial, we’ll be discussing the Button states and selectors.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages