GUI part

In previous post i have told about the files in android project..

Now i m concerning about the GUI part means the various layouts used in application development :

The first question arises from layout is: 

What Is A Layout?

Android developers use the term layout to mean one of two things. Both definitions apply to this tutorial, and are, unfortunately used interchangeably in the Android development community. The two definitions of layout are:

• A type of resource that defines what is drawn on the screen. Layout resources are stored as XML files in the /res/layout resource directory for the application. A layout resource is simply a template for a user interface screen, or portion of a screen, and contain.
• A type of View class whose primary purpose is to organize other controls. These layout classes (LinearLayout, RelativeLayout, TableLayout, etc. ) are used to display child controls, such as text controls or buttons or images on the screen.

Android user interfaces can be defined as layout resources in XML or created programmatically.

Because we are using Eclipse IDE so,

      Using Eclipse to Design Layout Resources

The Android Development Plug-in for Eclipse includes a handy layout resource designer for designing and previewing layout resources. The tool includes two tab views: the Layout view allows you to preview how the controls will appear on various screens and for each orientation and the XML view shows you the XML definition of the resource. The layout resource designer is shown in this figure:

Here are some tips for working with the layout resource designer in Eclipse:

• Use the Outline pane to Add and Remove controls to your layout resource.
• Select a specific control (either in the Preview or the Outline) and use the Property pane to adjust a specific control’s attributes.
• Use the XML tab to edit the XML definition directly.

It’s important to remember that the Eclipse layout resource designer preview can’t replicate exactly how the layout will appear to end users. For this, you must test your application on a properly configured emulator and, more importantly, on your target devices. Also, certain “complex” controls, including tabs or video viewers, cannot be previewed within Eclipse.

Defining an XML Layout Resource :

The most convenient and maintainable way to design application user interfaces is by creating XML layout resources. This method greatly simplifies the UI design process, moving much of the static creation and layout of user interface controls and definition of control attributes, to the XML, instead of littering the code. It creates a potential distinction between UI designers (who concern themselves more with layout) and developers (who know Java and implement application functionality). Developers can still alter the content of a screen programmatically when necessary. Complex controls, like ListView or GridView, are usually populated with data programmatically.

XML layout resources must be stored in the /res/layout project directory (or, in the case of alternative resources, in a specially named sub-directory). It’s common practice to create an XML layout resource for each screen in your application (closely tied to a specific Activity), but this is not required. You could, in theory, create an XML layout resource and use it for different activities, supplying different data on the screen. You can also componentized your layout resources and include them within one another, if needed.

The following is a simple XML layout resource, a template with a LinearLayout containing a TextView and an ImageView, defined in XML:

    Place this code in your main.xml file:

     and paste a pic in drawable folder name it as matterhorn....

                                     

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:orientation="vertical"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:gravity="center">  
    <TextView  
        android:layout_width="fill_parent"  
        android:id="@+id/PhotoLabel"  
        android:layout_height="wrap_content"  
        android:text="This is photo of the Matterhorn"  
        android:gravity="center_horizontal"  
        android:textSize="20dp" />  
    <ImageView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:src="@drawable/matterhorn"  
        android:adjustViewBounds="true"  
        android:scaleType="fitXY"  
        android:maxHeight="250dp"  
        android:maxWidth="250dp"  
        android:id="@+id/Photo" />  </LinearLayout>  

This layout represents a simple screen with two controls: first some text and then an image below it. These controls are organized within a vertically oriented LinearLayout. The following two figures show what this layout might look like on a device in both portrait and landscape modes:

Vertical View

Horizontal View

Exploring Various Layout Types

Now let’s turn our attention to those helpful layout controls that organize other controls. The most commonly used layout classes are:

• FrameLayout – designed to display a stack of child View controls. Multiple view controls can be added to this layout. This can be used to show multiple controls within the same screen space.

• LinearLayout – designed to display child View controls in a single row or column. This is a very handy layout method for creating forms.

• RelativeLayout – designed to display child View controls in relation to each other. For instance, you can set a control to be positioned “above” or “below” or “to the left of” or “to the right of” another control, referred to by its unique identifier. You can also align child View controls relative to the parent edges.

• TableLayout – designed to organize child View controls into rows and columns. Individual View controls are added within each row of the table using a TableRow layout View (which is basically a horizontally oriented LinearLayout) for each row of the table.

On next i will tell how to make GUI more Attractive..................