• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 6/21/19

Reference Graphical Elements In Your Activity

Log in or subscribe for free to enjoy all this course has to offer!

The GUI is ready - now it's time to look at the Activity's Java code. Open MainActivity located in  thejava/name.of.your.package  directory.

Displaying the Interface

The  MainActivity  class was created automatically by Android Studio when we chose the Empty Activity template. The only implemented method:

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

The  onCreate()  method is invoked when Android creates the Activity (we'll learn about the Activity life cycle at the end of this course). The line that interests us here is line 4: the setContentView() determines which layout file to associate with this Activity.

We specify the layout file with a special syntax:R.layout.filename (without the XML extension). When compiling the project, Android Studio generates a Java class called R (for Resources), which contains numerical identifiers for every project resource. These resources can be layout files, text strings, images, and so on. We will take a closer look at this class after compiling the project.

Referencing Graphical Elements

Declare Variables

As a reminder, we have three graphic elements in our interface:

  • The welcome text

  • The input field for the user's first name

  • And the play button

To interact with these elements in code, we have to reference them in our Activity. Add three member variables to the MainActivity class:

private TextView mGreetingText;
private EditText mNameInput;
private Button mPlayButton;

As you type these (e.g.  TextView ), the type appears in red. That's because this type is unknown: we have to import the class wherever we define this type. For example, for the TextView type, import the TextView class located in the android.widget package by typing the following line at the top of the file:

import android.widget.TextView;

To save yourself countless hours of typing lines character by character, place your cursor anywhere on the demarcated line and click alt + enter (return). Android Studio will offer import options corresponding to the unknown class name. Select the correct one, then hit enter once again to import the class. Time: saved.

Automatic import
Automatic import

Identify the Graphic Elements

Imagine that you have five TextView elements, one after another. How would you distinguish them? By providing each with an identifier. To do this, we use the android:id attribute, and its value must always be "@+id/{your-identifier}." For example:

<TextView
    android:id="@+id/activity_main_greeting_txt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="20dp"
    android:text="Welcome! What's your name?"/>

<EditText
    android:id="@+id/activity_main_name_input"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="20dp"
    android:layout_marginEnd="20dp"
    android:hint="Please type your name"/>

<Button
    android:id="@+id/activity_main_play_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:padding="30dp"
    android:layout_gravity="center_horizontal"
    android:text="Let's play"/>

Linking Variables

Now we are ready to reference the three graphical elements from code. We will use findViewById() to accomplish this. The method requires one parameter: the integer identifier of the view that we want. The method returns the corresponding view (if found). The syntax we use for the parameter is specific: you must specify R.id.{view_identifier}.

Also note that findViewById() returns a View. Therefore, in most cases, we need to cast View to the specific type we need.

Here is the sample code you can add to onCreate() :

mGreetingTextView = (TextView) findViewById(R.id.activity_main_greeting_txt);
mNameInput = (EditText) findViewById(R.id.activity_main_name_input);
mPlayButton = (Button) findViewById(R.id.activity_main_play_btn);

With our three graphical elements properly referenced, we can start playing with them.

Let's recap!

In this chapter, we discovered how to reference graphical elements in an Activity. Notably:

  • How to display the interface by specifying the layout file (R.layout.filename )

  • How to reference graphical elements by:

    • Declaring variables

    • Using the  android:id  attribute to identify them 

    • Linking variables using  findViewById()

  • That an identifier must be unique at the project level.  Be sure to name files using a prefix with the filename, then add the description, and then suffix with the element type.

Referencing the graphic elements in the code is a necessary step to implement the application's business logic, to modify View properties, and to react to user input.

Example of certificate of achievement
Example of certificate of achievement