Buttons are a great way to display interactive options for users. Today, I show you step by step how to add them to your apps.

In this tutorial, I show you how to add clickable buttons to your Android applications. You can find a video of this at the bottom of the page, code snippets throughout the page, and a link to my source code here.

NOTE: Remember to click Apply Changes in the Android Studio toolbar to update your app! 

Beginners: You can download this project from the link above and open it in Android Studio while you follow along with the video.
Advanced: I’ve included steps throughout the page along with code snippets. Feel free to use the video as a reference as well.

Requirements

• Android Studio and a newly created project with an empty Activity
• An Android Virtual Device
• BONUS: An IDE of your preference if you don’t want to use Android Studio to edit your code

Step 1: Style the layout with two Buttons. You can update your activity_main.xml using the code below.

• Change your layout to a LinearLayout
• Set the LinearLayout gravity to “center” and your orientation to “vertical”
• Add two Buttons with the text “Change to RED” and “Change to BLUE”
• Space the Buttons out using blank, weighted TextViews
• Add ids to both Buttons and your LinearLayout. This will allow you to access them from the MainActivity.java file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:gravity="center"
    android:id="@+id/myLayout"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_width="wrap_content" />

    <Button
        android:id="@+id/redButton"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Change to RED" />

    <TextView
        android:layout_height="wrap_content"
        android:layout_weight="1" 
        android:layout_width="wrap_content"/>

    <Button
        android:id="@+id/blueButton"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Change to BLUE" />

    <TextView
        android:layout_height="wrap_content"
        android:layout_weight="1" 
        android:layout_width="wrap_content"/>

</LinearLayout>

Step 2: Import these additional classes needed to make changes within the app. See the snippet after Step 5 for the entire MainActivity.java file.

import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

Step 3: Declare the Button objects and LinearLayout object within the class before overriding the onCreate() method. See the snippet after Step 5 for the entire MainActivity.java file.

Button buttonRed, buttonBlue;
LinearLayout layout;

Step 4: Instantiate the Button objects and LinearLayout object within the overridden onCreate() method. See the snippet after Step 5 for the entire MainActivity.java file.

buttonRed = findViewById(R.id.redButton);
buttonBlue = findViewById(R.id.blueButton);
layout = findViewById(R.id.myLayout);

Step 5: Set onClickListeners to change the background when the buttons are clicked. You can update your MainActivity.java file using the code below.

package com.example.clickingviews;

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

public class MainActivity extends AppCompatActivity {
    Button buttonRed, buttonBlue;
    LinearLayout layout;

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

        buttonRed = findViewById(R.id.redButton);
        buttonBlue = findViewById(R.id.blueButton);
        layout = findViewById(R.id.myLayout);

        buttonRed.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick (View v){
                layout.setBackgroundColor(Color.RED);
            }
        });

        buttonBlue.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick (View v){
                layout.setBackgroundColor(Color.BLUE);
            }
        });


    }
}

To see this in action, watch the YouTube video below.

Join the mailing list to see updates like this every week!
Coding Fanatic