Part 3: Laying Out the User Interface

Laying Out the User Interface
Currently, activity_quiz.xml defines the default activity layout. The defaults change frequently, but the XML will look something like Listing 1.1.
Listing 1.1 Default activity layout (activity_quiz.xml)
<RelativeLayout
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"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".QuizActivity">
<TextView
android:text="@string/hello_world"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
The default activity layout defines two widgets: a RelativeLayout and a TextView.
Widgets are the building blocks you use to compose a user interface. A widget can show text or graphics,interact with the user, or arrange other widgets on the screen. Buttons, text input controls, and checkboxes are all types of widgets.
The Android SDK includes many widgets that you can configure to get the appearance and behavior you want. Every widget is an instance of the View class or one of its subclasses (such as TextView or Button).
Figure 1.9 shows how the RelativeLayout and TextView defined in Listing 1.1 would appear on screen.
Figure 1.9 Default widgets as seen on screen

But these are not the widgets you are looking for. The interface for QuizActivity requires five widgets:

•  A vertical LinearLayout
•  A TextView
•  A horizontal LinearLayout
•  Two Buttons

Figure 1.10 shows how these widgets compose QuizActivity’s interface.
Figure 1.10 Planned widgets as seen on screen

Now you need to define these widgets in activity_quiz.xml.
In activity_quiz.xml, make the changes shown in Listing 1.2. The XMLthat you need to delete is struck through, and the XMLthat you need to add is in a bold font. This is the pattern we will use throughout the book.
Do not worry about understanding what you are typing; you will learn how it works next. However, do be careful. Layout XMLis not validated, and typos will cause problems sooner or later.
Depending on your version of the tools, you might get errors on the three lines that start with android:text. Ignore these errors for now; you will fix them soon.
Listing 1.2 Defining widgets in XML (activity_quiz.xml)
<RelativeLayout
     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"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingRight="@dimen/activity_horizontal_margin"
       android:paddingTop="@dimen/activity_vertical_margin"
       android:paddingBottom="@dimen/activity_vertical_margin"
       tools:context=".QuizActivity">
<TextView
     android:text="@string/hello_world"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content" />
</RelativeLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp"
android:text="@string/question_text" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/true_button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/false_button" />
</LinearLayout>
</LinearLayout>
Compare your XML with the user interface shown in Figure 1.10. Every widget has a corresponding XML element. The name of the element is the type of the widget.
Each element has a set of XML attributes. Each attribute is an instruction about how the widget should be configured. To understand how the elements and attributes work, it helps to look at the layout from a hierarchical perspective.