How to add a button and build a simple interactive Android App
Today, I’m going to show you how to add a button, add a listener to a button and finally we will build a simple interactive app that displays random quote with each click. Let’s dive right into it.
Launch a new blank empty project in Android Studio.
Add a simple string to your app
Just drag and drop the textview from palette to your app as shown below.
Now give your string an id and also let’s add “My Favorite Quotes” as text as shown below. I have chosen quote but it can be any thing that helps you recognize that item on the screen.
Now if you remember from previous posts its always a good practice to store our strings in a separate file. So extract and store the string in strings.xml and let’s do it in a new way. Just click the “…” next to text box as shown above and a new dialog box will open that will let you store the string as shown below.
Add a simple button to your app
Now adjust the button’s properties. We want to change the text to”Click here” and as always save the string as a resource just like we did above.
Our app should look like below.
Time to get coding
So far we have only played with drag and drop and adding text to our app and now it’s time to get coding. Open your MainActivity.java file.
What happens when you click a button?
By itself? nothing. You need to code what should happen when the button is clicked or in other words you need to listen for an event. An event such as a click on button. There are two ways to do it.
onClick vs setOnClickListener
A good explanation of the difference between the two can be found here .
onClick is a way to add event handling directly in xml while setOnClickListener is added in activity file. I’m going to use the activity way or setOnClickListener as it separates the action from view which is xml.
onClick can be added from property box by just providing the method name as shown in the screenshot below.
To setup setOnClickListener you open your activity file and follow the steps below
- First declare a variable of type Button and give it a name . I’m using main. Note it will ask you to import android.widget.Button library. Just press ALT+Enter and it will automatically be added.
Next we will grab our button and give it a reference. The code below will go inside onCreate method.
main = (Button) findViewById(R.id.button);
Let’s go over what this line of code actually does.
main is the name of our button variable. We are casting it as a (Button) to tell the compiler that variable main is indeed a type of Button.
findViewbyId is a method in Android that allow us to grab our button from view.
R.id.button is how we id our button(remember we id’d our button as button). R.java is a special file in android that stores references to resources and allows us to refer our view elements inside activity file.
so now variable main contains a reference to our button and we can use it freely inside our activity file to interact with it with name main.
Add a string array of quotes.
String myQuotes[] = {"Life is 10% what happens to you and 90% how you react to it.",
"Good, better, best. Never let it rest. 'Til your good is better and your better is best.",
"With the new day comes new strength and new thoughts.",
"In order to succeed, we must first believe that we can.",
"Keep your eyes on the stars, and your feet on the ground."
};
You may use your own quotes . I just picked them randomly off internet.
Let’s get a reference to textview.
Just like we got a reference to our button in activity file above. we will now use the same procedure to get our textview that will display our quotes.
I’m not going to go over it so below is what our code looks so far.
package com.andtuts.helloworld;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
String myQuotes[] = {"Life is 10% what happens to you and 90% how you react to it.",
"Good, better, best. Never let it rest. 'Til your good is better and your better is best.",
"With the new day comes new strength and new thoughts.",
"In order to succeed, we must first believe that we can.",
"Keep your eyes on the stars, and your feet on the ground."
};
TextView myFavQuotes;
Button main;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
main = (Button) findViewById(R.id.button); // link to button we id'd button.
myFavQuotes = (TextView) findViewById(R.id.quote); // link to textview we id'd quote.
}
}
So far we have links to both of our views. Our button and textview. We have a string array of 5 quotes and now we just need to add event handler for our button or the method that will be called when our button is clicked.
Official Android docs have a very good explanation of all things Button including sample code for listener. Click here to read it.
Adding setOnClickListener
Now we are ready to add event listener method that will be triggered whenever button is clicked. Add the code as shown below to your activity file inside onCreate method.
main.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// Perform action on click
}
});
If View appears red. just hover or click your cursor over it and press ALT+ENTER to import the view library. Below is the entire code for activity file.
package com.andtuts.helloworld;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
String myQuotes[] = {"Life is 10% what happens to you and 90% how you react to it.",
"Good, better, best. Never let it rest. 'Til your good is better and your better is best.",
"With the new day comes new strength and new thoughts.",
"In order to succeed, we must first believe that we can.",
"Keep your eyes on the stars, and your feet on the ground."
};
TextView myFavQuotes;
Button main;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
main = (Button) findViewById(R.id.button); // link to button we id'd button.
myFavQuotes = (TextView) findViewById(R.id.quote); // link to textview we id'd quote.
main.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// Perform action on click
}
});
}
}
“Perform action here” is where you will put the code that will be executed when your press the button.
Random Number
Now we need to generate a random number between 0 and 5 so that random quotes are loaded from array whenever “click here” is clicked or pressed. nextInt actually generates a pseudo random number as described here .
I’m not going into too much detail on how random numbers work in java but lets add an int for random number and generate a random number..
setText
is a built in function that allows us to (as the name implies) set text of a textview to anything we want. In our case we are setting it to a random position in our array with each click.
Final Code
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import java.util.Random;
public class MainActivity extends AppCompatActivity {
String myQuotes[] = {"Life is 10% what happens to you and 90% how you react to it.",
"Good, better, best. Never let it rest. 'Til your good is better and your better is best.",
"With the new day comes new strength and new thoughts.",
"In order to succeed, we must first believe that we can.",
"Keep your eyes on the stars, and your feet on the ground."
};
TextView myFavQuotes;
Button main;
int RandomNumber;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
main = (Button) findViewById(R.id.button); // link to button we id'd button.
myFavQuotes = (TextView) findViewById(R.id.quote); // link to textview we id'd quote.
main.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// Perform action on click
Random rand = new Random();
RandomNumber = rand.nextInt(myQuotes.length);
myFavQuotes.setText(myQuotes[RandomNumber]);
}
});
}
}
Above is the final code in our activity file.
Test
Time to launch an emulator and test our app. If you followed the instructions it should work exactly as shown below.
As you can see sometimes the quote doesn’t change despite the click as our random number isn’t perfect and it repeats the same number sometimes but other than that it works perfectly.
There you have it. Let me know what you guys think by commenting below.