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....
<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.
