Task 7: Making your app interactive

Currently you have buttons on your screen but they don’t do anything when pressed. In this task, you will make your buttons respond.

First, you will make the Toast button show a pop-up message called a toast. After that, you will make the Count button update the number displayed in TextView.

What you will learn

• Finding a view using its id
• How to add click listeners for a view
• Set and get property values of a view from the code

Step 1: Enabling Auto Imports

To make your life easier, you can enable auto-imports so that Android Studio automatically imports any classes that are needed by the Java code.

• Let’s open the settings editor by going to File → Settings → General.
• Select Auto Imports and in the Java section, make sure Add Unambiguous Imports on the fly is checked.
  
• Close the settings editor by pressing OK at the bottom of the editor.

Step 2: Showing a Toast

In this step, you will attach a Java method to the Toast button to show a toast when the user presses the button. A toast is a short message that appears briefly at the bottom of the screen.

• Open FirstFragment.java (app > java > com.example.android.myfirstapp > FirstFragment).

  This class has only three methods, onCreateView(), onDestroyView() and onViewCreated(). These methods execute when the fragment starts.

  As mentioned earlier, the id for a view helps you identify that view distinctly from other views. Using the findViewByID() method or the way onViewCreated() already predefined the method, your code can find the random_button using its id, R.id.random_button.

• Take a look at onViewCreated(). It sets up a click listener for the random_button, which was originally created as the Next button.
  

  Notice how it didn’t use findViewByID() but instead used binding. We will replace it using findViewByID() to make the click listener easier to understand. Delete the previous code.

  
• Just below that listener, add code to set up a click listener for the toast_button, which creates and displays a toast.
  
• Run the app and press the Toast button. Do you see the toasty message at the bottom of the screen?
  
• If you want, extract the message string into a resource as you did for the button labels.

You have learned that to make a view interactive you need to set up a click listener for the view which says what to do when the view (button) is clicked on. The click listener can either:

• Implement a small amount of code directly.
• Call a method that defines the desired click behavior in the activity.

Step 2: Make the Count button update the number on the screen

Update the Count button so that when it is pressed, the number on the screen increases by 1.

• In the fragment_first.xml layout file, notice the id for the TextView.
  
• In FirstFragment.java, add a click listener for the count_button below the other click listeners in onViewCreated(). Because it has a little more work to do, have it call a new method, countMe() (it’s okay that it shows as an error for now).
  
• In the FirstFragment class outside of the onViewCreated() method, add the method countMe() that takes a single View argument. This method will be invoked when the Count button is clicked and the click listener called.
  

If showCountTextView is showing an error, make sure that it is created just below the FirstFragment class declaration.

Step 3: Caching the TextView for repeated use

You could call findViewById() in countMe() to find showCountTextView. However, countMe() is called every time the button is clicked, and findViewById() is a relatively time consuming method to call. So it is better to find the view once and cache it.

• In onCreateView(), you will call findViewById() to get the TextView that shows the count. The findViewById() method must be called on a View where the search for the requested ID should start, so assign the layout view that is currently returned to a new variable, fragmentFirstLayout, instead.
  
• Call findViewById() on fragmentFirstLayout, and specify the id of the view to find, textview_first. Cache that value in showCountTextView. Return fragmentFirstLayout.
  

  This is what the method should look like. Delete the code that is commented out and says delete on the right.

  
• Run the app and the buttons should work as instructed.