This chapter is from the book
This chapter is from the book
This chapter is from the book
3.6 Examining the main.xml File
XML is a natural way to express a GUI’s contents. It allows you, in a human- and computer-readable form, to say which layouts and components you wish to use, and to specify their attributes, such as size, position and color. The ADT Plugin can then parse the XML and generate the code that produces the actual GUI. Figure 3.26 shows the final main.xml file after you perform the steps in Section 3.5. We reformatted the XML and added some comments to make the XML more readable. (Eclipse’s Source > Format command can help you with this.) As you read the XML, notice that each XML attribute name that contains multiple words does not contain spaces, whereas the corresponding properties in the Properties window do. For example, the XML attribute android:paddingTop corresponds to the property Padding top in the Properties window. When the IDE displays property names, it displays the multiword names as separate words for readability.
Fig 3.26. Welcome App’s XML layout.
1<?xml version="1.0"encoding="utf-8"?>2<!-- main.xml -->3<!-- Welcome App's XML layout. -->4 5<!-- RelativeLayout that contains the App's GUI components. -->6<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"7android:layout_width="match_parent"8android:layout_height="match_parent"9android:id="@+id/welcomeRelativeLayout" android:background="#FFFFFF">10 11<!-- TextView that displays "Welcome to Android App Development!" -->12<TextView android:layout_width="wrap_content"13android:layout_height="wrap_content"14android:text="@string/welcome"15android:textSize="40sp" android:id="@+id/welcomeTextView"16android:textColor="#00F" android:textStyle="bold"17android:layout_centerHorizontal="true" android:gravity="center"18android:layout_marginTop="10dp"></TextView>19 20<!-- ImageView that displays the Android logo -->21<ImageView android:layout_height="wrap_content"22android:layout_width="wrap_content" android:id="@+id/droidImageView"23android:layout_centerHorizontal="true"24android:src="@drawable/android"25android:layout_below="@id/welcomeTextView"></ImageView>26 27<!-- ImageView that displays the Deitel bug logo -->28<ImageView android:layout_height="wrap_content"29android:layout_width="wrap_content" android:id="@+id/bugImageView"30android:src="@drawable/bug"31android:layout_below="@id/droidImageView"32android:layout_centerHorizontal="true"></ImageView>33</RelativeLayout>
welcomeRelativeLayout
The welcomeRelativeLayout (lines 6–33) contains all of the app’s GUI components.
- Its opening XML tag (lines 6–9) sets various RelativeLayout attributes.
- Line 6 uses the xmlns attribute to indicate that the elements in the document are all part of the android XML namespace. This is required and auto-generated by the IDE when you create any layout XML file.
- Lines 7–8 specify the value match_parent for both the android:layout_width and android:layout_height attributes, so the layout occupies the entire width and height of layout’s parent element—that is, the one in which this layout is nested. In this case, the RelativeLayout is the root node of the XML document, so the layout occupies the entire screen (excluding the status bar).
- Line 9 specifies the values for the welcomeRelativeLayout’s android:id and android:background attributes.
welcomeTextView
The first element in the welcomeRelativeLayout is the welcomeTextView (lines 12–18).
- Lines 12 and 13 set the android:layout_width and android:layout_height attributes to wrap_content. This value indicates that the view should be just large enough to fit its content, including its padding values that specify the spacing around the content.
- Line 14 sets the android:text attribute to the string resource named welcome that you created in Section 3.5, Step 5.
- Line 15 sets the android:textSize attribute to 40sp and the android:id attribute to "@+id/welcomeTextView".
- Line 16 sets the android:textColor attribute to "#00F" (for blue text) and the android:textStyle attribute to "bold".
- Line 17 sets the android:layout_centerHorizontal attribute to "true", which centers the component horizontally in the layout, and sets the android:gravity attribute to "center" to center the text in the TextView. The android:gravity attribute specifies how the text should be positioned with respect to the width and height of the TextView if the text is smaller than the TextView.
- Line 18 sets the android:marginTop attribute to 10dp so that there’s some space between the top of the TextView and the top of the screen.
droidImageView
The last two elements nested in the welcomeRelativeLayout are the droidImageView (lines 21–25) and the bugImageView (lines 28–32). We set the same attributes for both ImageViews, so we discuss only the droidImageView’s attributes here.
- Lines 21 and 22 set the android:layout_width and android:layout_height attributes to wrap_content. Line 22 also sets the android:id attribute to "@+id/ droidImageView".
- Line 23 sets the android:layout_centerHorizontal attribute to "true" to centers the component in the layout.
- Line 24 sets the android:src attribute to the drawable resource named android, which represents the android.png image.
- Line 25 sets the android:layout_below attribute to "@id/welcomeTextView". The RelativeLayout specifies each component’s position relative to other components. In this case, the ImageView follows the welcomeTextView.