08. U.I. Planning

So before we dive head first into the creation of the user interface we require, it’s important to have a plan. With the limited knowledge we have of LinearLayout hopefully the plan I’ve come up with below will make some sense:

The red vertical grid represents the vertical LinearLayout we’ve already created. The three light green and incredibly hard to see horizontal grids represent three more LinearLayouts we need to create inside the LinearLayout we already have. So…here’s what our revised “main.xml” file is going to have to look like:

<?xml version = "1.0" encoding = "utf-8" ?>

<LinearLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    android:layout_width  = "fill_parent"
    android:layout_height = "fill_parent"
    android:orientation   = "vertical"
    android:background    = "#F2F5A9" >

    <!-- ###################################################### -->
    <TextView
        android:layout_width   = "wrap_content"
        android:layout_height  = "wrap_content"
        android:layout_gravity = "center_horizontal"
        android:text           = "@string/heading"
        android:textColor      = "#08088A"
        android:textSize       = "20sp"
        android:textStyle      = "bold" />
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <LinearLayout
    	android:layout_width   = "wrap_content"
    	android:layout_height  = "wrap_content"
        android:layout_gravity = "center_horizontal"
    	android:orientation    = "horizontal" >

        <!-- ... dealer layout goes here ... -->

	</LinearLayout>
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <TextView android:id         = "@+id/instruct_txt"
        android:layout_width        = "wrap_content"
        android:layout_height       = "wrap_content"
        android:layout_gravity      = "center_horizontal"
        android:layout_marginTop    = "10sp"
        android:layout_marginBottom = "10sp"
        android:text                = "@string/instructions"
        android:textColor           = "#000000" />
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <LinearLayout
    	android:layout_width   = "wrap_content"
    	android:layout_height  = "wrap_content"
        android:layout_gravity = "center_horizontal"
    	android:orientation    = "horizontal" >

        <!-- ... buttons go here ... -->

	</LinearLayout>
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <LinearLayout
    	android:layout_width   = "wrap_content"
    	android:layout_height  = "wrap_content"
        android:layout_gravity = "center_horizontal"
    	android:orientation    = "horizontal" >

        <!-- ... player layout goes here ... -->

	</LinearLayout>
    <!-- ###################################################### -->

</LinearLayout>

This may appear like a big step forward but there’s nothing all that new here, have a good look at the content of this file to try and understand how it’s all linking together. Once you run your app now, it should look a little something like this:

We can’t see those horizontal grids because there’s nothing in them but trust me, they exist! Let’s now set up the buttons because they’re probably the next easiest thing to do.