Updating the View Layer

Now that you have been introduced to MVC, you are going to update GeoQuiz’s view layer to include a NEXT button.

In Android, objects in the view layer are typically inflated from XML within a layout file. The sole layout in GeoQuiz is defined in activity_main.xml. This layout needs to be updated as shown in Figure 2.5. (Note that to save space we are not showing the attributes of unchanged widgets.)

Figure 2.5  New button!

New button!

So the changes you need to make to the view layer are:

  • Give the TextView an android:id attribute. This widget will need a resource ID so that you can set its text in MainActivity’s code. Position the TextView’s text in the center of the text view by setting gravity to "center".

  • Remove the android:text attribute from the TextView. You no longer want a hardcoded question to be part of its definition. Instead, you will set the question text dynamically as the user clicks through the questions.

  • Specify a default string for the Design tab to display in the TextView when rendering a preview of your layout. To do this, add a tools:text attribute to the TextView and point it to a string resource representing a question using @string/.

    You will also need to add the tools namespace to the root tag of your layout so that Android Studio can make sense of the tools:text attribute. This namespace allows you to override any attribute on a widget for the purpose of displaying it in the Android Studio preview. The tools attributes are ignored when rendering the widgets on a device at runtime. You could use android:text and just overwrite the value at runtime, but using tools:text instead makes it clear that the value you provide is for preview purposes only.

  • Add the new Button widget as a child of the root LinearLayout.

Return to activity_main.xml and make it happen.

Listing 2.2  New button … and changes to the text view (res/layout/activity_main.xml) 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ... >

    <TextView
        android:id="@+id/question_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="24dp"
        android:text="@string/question_text"
        tools:text="@string/question_australia" />

    <LinearLayout ... >
        ...
    </LinearLayout>

    <Button
        android:id="@+id/next_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/next_button" />

</LinearLayout>

You will see familiar errors alerting you about missing string resources.

Return to res/values/strings.xml. Rename question_text and add a string for the new button.

Listing 2.3  Updating strings (res/values/strings.xml) 

<string name="app_name">GeoQuiz</string>
<string name="question_text">Canberra is the capital of Australia.</string>
<string name="question_australia">Canberra is the capital of Australia.</string>
<string name="true_button">True</string>
<string name="false_button">False</string>
<string name="next_button">Next</string>
...

While you have strings.xml open, go ahead and add the strings for the rest of the geography questions that will be shown to the user.

Listing 2.4  Adding question strings (res/values/strings.xml) 

<string name="question_australia">Canberra is the capital of Australia.</string>
<string name="question_oceans">The Pacific Ocean is larger than
  the Atlantic Ocean.</string>
<string name="question_mideast">The Suez Canal connects the Red Sea
  and the Indian Ocean.</string>
<string name="question_africa">The source of the Nile River is in Egypt.</string>
<string name="question_americas">The Amazon River is the longest river
  in the Americas.</string>
<string name="question_asia">Lake Baikal is the world's oldest and deepest
  freshwater lake.</string>
...

Notice that you use the escape sequence ' in the last value to get an apostrophe in your string. You can use all the usual escape sequences in your string resources, such as for a new line.

Return to activity_main.xml and preview your layout changes in the graphical layout tool.

That is all for now for GeoQuiz’s view layer. Time to wire everything up in your controller class, MainActivity.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.130.31