The main fragment contains the buttons to continue the game, start a new game, and display information about the game. We define that in frag- ment_main.xml.
Create the file by clicking on the activity_main.xml file, pressing Ctrl+C (Copy), and then pressing Ctrl+V (Paste). When it prompts for a new name, enter fragment_main.xml. (There are other ways to do this, such as using a wizard, but this is the fastest way for me.)
Replace the contents of fragment_main.xml with the following text:
ticTacToev1/src/main/res/layout/fragment_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/menu_background" android:elevation="@dimen/elevation_high" android:orientation="vertical" android:padding="@dimen/menu_padding" tools:context=".TicTacToeActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/menu_space" android:text="@string/long_app_name" android:textAppearance="?android:textAppearanceLarge" android:textSize="@dimen/menu_text_size"/> <Button android:id="@+id/continue_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/menu_button_margin" android:padding="@dimen/menu_button_padding" android:text="@string/continue_label"/> <Button android:id="@+id/new_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="@dimen/menu_button_margin" android:padding="@dimen/menu_button_padding" android:text="@string/new_game_label"/> <Button android:id="@+id/about_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="@dimen/menu_button_margin" android:padding="@dimen/menu_button_padding" android:text="@string/about_label"/> </LinearLayout>
Lots of red lines will appear. Don’t worry—we’ll fix all those by the end of the chapter.
In this example we want a column with four items so we use a LinearLayout with android:orientation="vertical". Inside the linear layout we define a text view and three buttons.
Text views are probably the most common type of user interface element that you’ll encounter in Android development. Here are a few more:
Button
A push-button control.
CheckBox
A two-state button for a multiple choice list.
EditText
An editable text view.
ImageButton
A button that displays an image instead of text.
ListView
Shows items in a vertically scrolling list.
RadioButton
A single selection two-state button.
VideoView
Displays a video file.
WebView
Displays web pages.
For a full list, see the documentation of the View class.6
Attributes of the LinearLayout Tag
Here are the new attributes on the LinearLayout tag: android:background="@drawable/menu_background"
Sets a background drawable for the entire view. A drawable can be a color, image, or compound object defined in another XML file. More on that in a moment.
android:elevation="@dimen/elevation_high"
Raises the view off the canvas by a small amount. This causes a shadow to be drawn under the view in Android 5.0 (Lollipop) and later. Like all unrecognized attributes, it will be ignored if you run the program on older versions. Instead of specifying the amount with a number, we refer to a dimension that will be defined in another XML file.
android:orientation="vertical"
Specifies direction of the layout. Possible values are vertical, which arranges the children in a column, and horizontal, which arranges them in a row. If you need both horizontal and vertical, you’ll have to use a different layout such as GridLayout.
android:padding="@dimen/menu_padding"
Tells Android to leave a little space all around the inside of the view. If you need the space to be outside the view, use margin instead.
Indirect values such as “@dimen/menu_padding” are extremely powerful, but can be a little confusing at times. Android Studio helps by showing the final
resolved value in the editor if possible. Once it’s defined, you can hover your mouse or click on the value to see the original reference, and Ctrl+click on the reference to go to its definition.
Attributes of the TextView Tag
We use the following attributes on the TextView tag: android:layout_marginBottom="@dimen/menu_space"
This is used on the text view to leave a gap between the text and the buttons.
android:text="@string/long_app_name"
Specifies the text to display. In this case it’s a reference to the long_app_name value defined in the strings file.
android:textAppearance="?android:textAppearanceLarge"
Makes the text larger and bolder than usual. The “?” means this is a ref- erence to a constant defined in the current theme. A theme defines hun- dreds of constants to control the appearance and behavior of every view in the app. See Styles and Themes, on page 46 for more info.
android:textSize="@dimen/menu_text_size"
Even with the textAppearance attribute, the text looked like it needed to be a little larger, so we hard-coded a bigger size here.
Attributes of the Button Tag
The Button tag uses these attributes:
android:layout_margin="@dimen/menu_button_margin"
Allows for some extra space around the outside of the button. android:padding="@dimen/menu_button_padding"
Specifies some extra space inside the button as well. android:text="@string/continue_label"
Displays text on the button. This is another reference to the strings file. We’ll define all those “@” values in Defining Resources, on page 43. First, let’s work on the Java code that goes with the XML.