05. XML UI Creation

Creating a user interface for your Android application involves defining it programmatically in an XML document. When you open “main.xml” you may initially see a graphical representation of your UI. This is the visual UI editor that Eclipse provides which isn’t a bad way to create your UI but for our first project we might as well gain a better understanding of how it works. You have the option of choosing “main.xml” from the bottom tabs in order to see the code for your UI…it should look like this:

If you’ve ever encountered HTML and CSS then this will likely appear quite familiar. Like HTML we have tags – or as they’re called in XML – “elements“…these are the words in green. Some of these words have closing elements, like “</LinearLayout>“. Others close themselves, like “<TextView” with “ />“. Inside these elements lie the attributes that affect them…these are the lines that start with a purple phrase like “android:text=...“.

By combining elements and attributes you can state what sort of objects need to be on the UI, what they should look like and contain and where they should be placed. The ways in which this can be done are practically endless and so rather than learn everything, we will focus on the layout that has already been started.

LinearLayout
This layout places UI items either underneath each other or next to each other. You can place LinearLayouts within LinearLayouts to change orientation and you can specify widths and heights in multiple ways in order to get the effect you’re after. This method certainly can’t produce every conceivable layout you might want but it is fairly flexible and a good choice for this project. At this stage, I’ll get you to change your “main.xml” layout file so it looks like this:

<?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" >

    <!-- ######################################################
         # This element displays the text that appears in the #
         # centre of the screen.                              #
         # - - - - - - - - - - - - - - - - - - - - - - - - - -# -->

    <TextView
        android:layout_width   = "wrap_content"
        android:layout_height  = "wrap_content"
        android:layout_gravity = "center_horizontal"
        android:text           = "@string/hello"
        android:textColor      = "#08088A"
        android:textSize       = "20sp"
        android:textStyle      = "bold" />

    <!-- ###################################################### -->

</LinearLayout>

Here you can see I’ve made a few changes:

  1. I’ve added, edited and removed attributes to each of the elements
  2. I’ve added some commenting
  3. I’ve indented the code so it’s easier to read

None of these changes are all that complicated but will be helpful as we start to construct a UI for our BlackJack application.

The next thing we need to clarify is how this Application is printing “Hello World, StartActivity!” inside the text box?

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>