When users start the program, we want to show options for continuing a game, starting a new game, and for reading about what the program does. The following figure shows the screen we want to design.
To create this screen, edit the activity_main.xml file by going to Android Studio’s Project window and double-clicking on the filename under the res/layout folder. (Note that the Project window can be in one of three modes: Project, Packages, and Android. You can change the mode by selecting the drop-down menu next to the window name.)
Select the Text tab at the bottom of the editor window if you don’t see the XML. Change the text to this:
ticTacToev1/src/main/res/layout/activity_main.xml <FrameLayout 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:clipChildren="false" tools:context=".TicTacToeActivity"> <fragment android:id="@+id/main_fragment" class="org.example.tictactoe.MainFragment" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" tools:layout="@layout/fragment_main"/> </FrameLayout>
This defines a FrameLayout view that covers the whole screen, with a fragment of class MainFragment floating inside of it. If you like your code all lined up properly, select the Code > Reformat Code menu option or use the keyboard shortcut (Ctrl+Alt+L on Windows).
(If you’re typing this into Android Studio, you’ll notice that some of the text is displayed in red, and there’s an error shown in the preview window if it’s open. That happens because we haven’t defined those two missing parts yet. They’ll be added shortly.)
FrameLayout is one of several Layout views supported by Android. These views arrange other views inside of them to create a desired effect. Many types of layouts are available, and you can create your own. Here’s a summary of the most common types you’re likely to need in your programs:
FrameLayout
Shows one or more child views on top of each other. GridLayout
Arranges its child views into rows and columns. LinearLayout
Displays its children in a single column or row. RelativeLayout
For a complete list of Android layouts and details about the options you can set on each one, see the online documentation.4
Since we only have one child view, it doesn’t really matter which one we use in terms of how it will look. FrameLayout is the simplest and most efficient, so we should use that one.
Attributes of the FrameLayout tag
Every XML tag has attributes that control what it does. Let’s look at the attributes that we set on the FrameLayout tag more closely:
xmlns:android="http://schemas.android.com/apk/res/android"
Defines the android namespace,5 so that android: will be accepted in subse- quent attribute names.
xmlns:tools="http://schemas.android.com/tools" Defines the tools namespace. android:layout_width="match_parent"
Sets the width of the view to cover the entire width of the parent. Since this is the top-level element, that means it will cover the screen. Possible values are match_parent, wrap_content, or an absolute width value.
android:layout_height="match_parent"
Sets the height of the view to cover the height of the parent (screen). Every view has to have a width and height.
tools:context=".TicTacToeActivity"
Indicates that this layout file is used by the TicTacToeActivity class. Unlike the other attributes, this one is just for the visual editor and isn’t used at runtime.
Attributes of the fragment Tag
Here’s the meaning of all the attributes we used on the fragment tag: android:id="@+id/fragment_main"
Defines a new resource identifier called fragment_main that can be used in code or other XML attributes. “@+” means we’re defining something new, whereas “@” means we’re referring to something already defined elsewhere.
4. http://d.android.com/guide/topics/ui/declaring-layout.html
5. http://en.wikipedia.org/wiki/XML_namespace
class="org.example.tictactoe.MainFragment"
Lets Android know that this fragment is an instance of the MainFragment class. In other words, when Android goes to create this object from the XML, it will actually create a MainFragment. This class will be defined in Defining a Fragment in the Main Activity, on page 41.
android:layout_width="wrap_content"
Sets the width of the fragment to be defined by the width of its content. android:layout_height="wrap_content"
Sets the height of the fragment to the height of its content. android:layout_gravity="center"
Centers this fragment inside its parent. Possible values include top, bottom, left, right, top, bottom, center, and fill, among others. Gravity values can be combined using a vertical bar—for example, top|right.
tools:layout="@layout/fragment_main"
Refers to another XML file that defines the contents of this fragment.