We now know how to trigger code when the user interacts with the app. To build a complete app, though, we need to know how to do the reverse as well. We need to be able to write code that changes the user interface. Right now, we can write to the console. This is useful, but only for us as developers. We want to be able to modify what's on the app screen.

Here's the big picture: To interact with the UI, we need to get a reference to a View in our layout. If you recall, a View is any UI element that's on the screen: TextViews, Buttons, etc. To get a reference, we give our element an ID, and use that ID to access it in our code.

Reminder: not everything that we are about to do will fully make sense at this point. We're going to focus on achieving the objective of interacting with the UI. Many of the individual terms will start to make sense after you learn about variables and casting in the next section.

First, go to the layout and add a TextView. It might look something like this:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="text" />

We're going to give this an ID, so that we can access this later in our code. Add this attribute:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="text"
    android:id="@+id/greetingTextview" />

The id attribute lets us give the TextView an identifier. The first part, "@+id/", tells the layout that you want to create a new identifier. The text that follows is the identifier you want to give. This can be whatever you want (again, one word with no spaces). I've called this greetingTextview.

Next, we need to get a reference to this Textview in our code. We need this to happen in a block of code, so let's add in a button and create the onClick method. Refer to the previous section if you need help.

Enter this line inside the onClick method you've created:

TextView display = (TextView) findViewById(R.id.greetingTextview);

There's a bunch of things happening there, so let's focus on some of them. First, on the left, we are creating a reference to a TextView, and calling it display. On the other side of the equal sign, we are getting a reference to the TextView that we want. findViewById is a function that lets us find a View. In the brackets, we give the ID that we are looking for. R.id is a way to get all the IDs that we have created. You might notice as you type this out that the autocomplete lists all the IDs you have in a dropdown.

There's a lot of new syntax in that line, and it will make more sense soon. For now, just focus on the name of the reference (display) and how we get the ID (R.id.greetingTextview). These two could have been any name we wanted.

Now that we have a reference to the TextView, let's change what it says. Add this line to your block of code:

display.setText("hello!");

We are calling a function called setText here. This changes the text of a TextView. Our line of code tells display to set its text to "hello!".

Your full onClick method should look something like this:

public void buttonClick(View v) {
    TextView display = (TextView) findViewById(R.id.greetingTextview);
    display.setText("hello!");
}

Go ahead and run the app and see the TextView change!

Try: Add another button that changes the TextView to say something else.

Try: Add another TextView and try to do this process again.