Android - Layouts

Objective #1: Use Layouts to to design an effective user interface.

• A layout is the way and order in which objects are aligned or positioned on the user interface. In other words, a layout is the backbone for the appearance and structure of the interface of an app. Most apps use one or more layouts. 
  
  
• Layouts are defined and typed out in the project's resource layout XML files. These files are stored as XML files in a project's res/layout folder. While activity_main.xml is the default layout file that is created and used when you create a sample Android project, you can create your own layout file, such as splash_screent.xml for example, and place it in that folder. In this case, you would use the code
  
  setContentView(R.layout.splash_screen);
  
  to specify that layout to be used. XML layout filenames should be typed using only lowercase letters (e.g. activity_main.xml, about_screen.xml, high_scores.xml, etc.)
  
  
• Here is an illustration showing the different layouts and sample programs that use each kind: http://developer.android.com/resources/tutorials/views
  
  
• See this tutorial for more explanation and examples of layouts: http://www.learn-android.com/2010/01/05/android-layout-tutorial
  
  
• There are several common layouts including:
  
  
• LinearLayout - (details1 - details2 - discussion - API) arranges objects in a linear fashion. LinearLayout may be considered the second easiest layout (after FrameLayout) to use because the programmer doesn’t have to worry about the location of each object.  Each object is aligned either vertically or horizontally and the programmer can add any child of the View class. You can nest LinearLayout views inside of each other. Be careful though because you should probably use a TableLayout (see below) if you find yourself nesting too many LinearLayout views inside of each other.
  
  Important XML attributes are:
  • orientation - horizontal or vertical. The default is horizontal.
  • layout_weight - prioritizes which view expands to fill any remaining, available space in the parent view.
  • gravity - controls how child views are aligned and displayed.
    
    
• TableLayout - (details1 - discussion - API) allows objects to be arranged in a grid-like interface made up of rows (TableRow - API) and columns.  Each TableRow object displays a single row that can contain a variety of View class objects (e.g. TextView).  This would be a good layout for a game such as Tic-Tac-Toe.  Cells within a TableLayout can be left empty or filled. The width of each column is determined by the width of the widest cell in that column. Unlike with a TableLayout, each child of a TableRow needs to set its own layout_width and layout_height.
  
  
• AbsoluteLayout - (API) arranges objects based on their (X, Y) coordinates. This layout is less flexible and may be more difficult to use than other layouts. There isn’t much to be said in favor of an AbsoluteLayout, other than the fact it is an (X,Y) grid.  This grid-based scheme does give a programmer more ease of access to develop the UI.  But, because it is in an (X, Y) grid, it is harder to maintain because of the different sizes of each child. When using an AbsoluteLayout, the programmer should set the size of each child and graph the UI on paper prior to designing.  This will minimize the chance of an error.
  
  
• FrameLayout - (API) allows the user to dedicate one screen to one item. This is the simplest layout since it can only contain one object & you cannot set its location. It automatically attaches to the upper left hand corner of the interface. You can however set child views to the FrameLayout, but they are also attached to the top left corner.
  
  
• RelativeLayout - (details1 - API) arranges objects in a relationship with other objects or the parent layout.  RelativeLayout is a useful layout, but you need to ensure that the objects aren’t scattered. It is an optimal choice when designing a UI. The location of the child object is set in relation to each other or the parent.  When setting the relationship between objects, you have to set ID values of an object and use those set ID’s as the location. Unlike other layouts though, the programmer cannot set the size of the layout to WRAP_CONTENT.  To align a child below another object you should use this XML code:      android:layout_below="@id/object"
  Likewise, the programmer can type layout_alignParentRight, this will align the child to the right side of the window.
  
  
• GridView - (details1 - API)
  
  
• ListView - (details1 - API)
  
  
• An activity's layout is specified in its onCreate method by calling the setContentView method. For example:

public void onCreate(Bundle savedInstanceState)
{
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
}

In this example, the XML layout code for this activity is found in an XML file named activity_main.xml. Note that the .xml file extension is not typed as part of the setContentView parameter.

Objective #2: Use a LinearLayout.

• Review the following example of a LinearLayout.

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

<TextView
android:text="Fahrenheit to Celsius Converter"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
android:text="Enter Fahrenheit Temperature:"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<EditText
android:id="@+id/etFahrenheit"
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<Button
android:id="@+id/btnCompute"
android:text="Compute"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<Button
android:id="@+id/btnReset"
android:text="Reset"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
android:text="The equivalent Celsius temperature is:"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
android:id="@+id/tvCelsius"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>

Objective #3: Use a TableLayout.

• Review the following example of a TableLayout.

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

<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/table1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:shrinkColumns="*"
android:stretchColumns="*">

<TableRow
android:id="@+id/row1"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center_horizontal">

<TextView
android:id="@+id/tv11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="18dp"
android:text="Row 1 spans all 6 columns"
android:gravity="center"
android:layout_span="6" />

</TableRow>

<TableRow
android:id="@+id/row2"
android:layout_height="wrap_content"
android:layout_width="match_parent">

<TextView
android:id="@+id/tv21"
android:text="row 2 col 1" />

<TextView
android:id="@+id/tv22"
android:text="row 2 col 2" />

<TextView
android:id="@+id/tv23"
android:text="row 2 col 3" />

<TextView
android:id="@+id/tv24"
android:text="row 2 col 4" />

<TextView
android:id="@+id/tv25"
android:text="row 2 col 5" />

<TextView
android:id="@+id/tv26"
android:text="row 2 col 6" />

</TableRow>

<TableRow
android:id="@+id/row3"
android:layout_height="wrap_content"
android:layout_width="match_parent">

<TextView
android:id="@+id/tv31"
android:text="row 3 col 1" />

<TextView
android:id="@+id/tv32"
android:text="row 3 col\n2 spans 5"
android:gravity="center_horizontal"
android:layout_span="5" />
</TableRow>

</TableLayout>

Objective #4: Use a AbsoluteLayout.

• Review the following example of a AbsoluteLayout.
  

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

<AbsoluteLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>

<Button android:id="@+id/pixelsBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="80 px, 50 px"
android:layout_y="50px"
android:layout_x="80px">
</Button>

<Button android:id="@+id/scaledBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="80 spaces, 100 spaces"
android:layout_y="100sp"
android:layout_x="80sp">
</Button>

<Button android:id="@+id/inchesBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.5 inches, 2 inches"
android:layout_y="2in"
android:layout_x="0.5in">
</Button>

<Button android:id="@+id/millimetersBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8 mm, 40 mm"
android:layout_y="40mm"
android:layout_x="8mm">
</Button>

</AbsoluteLayout>

Objective #5: Use a RelativeLayout.

• Review the following example of a RelativeLayout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
    <Button
        android:id="@+id/btnButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"/>
 
    <Button
        android:id="@+id/btnButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:layout_toRightOf="@+id/btnButton1"/>
 
     <Button
        android:id="@+id/btnButton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"
        android:layout_below="@+id/btnButton1"/>
 
     <TextView
         android:id="@+id/textView1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@+id/btnButton3"
         android:layout_marginTop="94dp"
         android:text="User :"
         android:textAppearance="?android:attr/textAppearanceLarge" />
 
     <EditText
         android:id="@+id/editText1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentRight="true"
         android:layout_alignTop="@+id/textView1"
         android:layout_toRightOf="@+id/btnButton3" />
 
     <Button
         android:id="@+id/btnSubmit"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentRight="true"
         android:layout_below="@+id/editText1"
         android:text="Submit" />
 
</RelativeLayout>

Objective #6: Use some of Layout XML attributes.

• The XML attributes of an object determine what it looks like and how it acts. 
  
  
• It is wise to assign an ID to every object that you create.  This is mandatory when a RelativeLayout is used.
  
  
• When an attribute is set, the assignments are always in string format.  So everything after the equals sign is in double quotes.
  
  
• The layout_height and layout_width attributes set the size of the child.  The two most common settings are wrap_content and fill_parent (you can also use match_parent).
  
  
• By setting the ID attribute, you can program the object in the onCreate method.