UNDERSTANDING THE COMPONENTS OF A SCREEN:

1. An activity displays the user interface (screen) of your application, which may contain widgets such as buttons,
labels, textboxes, and so on.
2. Typically, you define your UI using an XML fi le (e.g., the main.xml fi le located in the res/layout folder of your
project),
3. which looks similar to the following:
<?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” >
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/hello” />
</LinearLayout>
4. During runtime, you load the XML UI in the onCreate() method handler in your Activity class, using the
setContentView() method of the Activity class:
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
5. During compilation, each element in the XML fi le is compiled into its equivalent Android GUI class,
with attributes represented by methods. The Android system then creates the UI of the activity when
it is loaded.

An activity contains views and ViewGroups.

A view is a widget that has an appearance on screen.
Examples of views are buttons, labels, and textboxes.
A view derives from the base class android.view.View.
One or more views can be grouped together into a
ViewGroup.
A ViewGroup (which is itself a special type of view)
provides the layout in which you can order the
appearance and sequence of views.

Android supports the following ViewGroups:

➤ LinearLayout
➤ AbsoluteLayout
➤TableLayout
➤ RelativeLayout
➤ FrameLayout
➤ ScrollView

Layout Attributes
Each layout has a set of attributes which define the visual properties of that
layout. There are few common attributes among all the layouts and there are
other attributes which are specific to that layout. Following are common
attributes and will be applied to all the layouts:

Attribute Description
android:id -This is the ID which uniquely identifies the
view.
android:layout_width- This is the width of the layout.
android:layout_height- This is the height of the layout
android:layout_marginTop- This is the extra space on the top side of the layout.
android:layout_marginBottom- This is the extra space on the bottom side of the
layout.
android:layout_marginLeft -This is the extra space on the left side of the
layout.
android:layout_marginRight- This is the extra space on the right side of the
layout.
android:layout_gravity -This specifies how child Views are positioned.
android:layout_weight This specifies how much of the extra space in the layout
should be allocated to the View.
android:layout_x -This specifies the x-coordinate of the layout.
android:layout_y- This specifies the y-coordinate of the layout.
android:layout_width- This is the width of the layout.
android:layout_width -This is the width of the layout.
android:paddingLeft -This is the left padding filled for the layout.
android:paddingRight- This is the right padding filled for the layout.
android:paddingTop- This is the top padding filled for the layout.
android:paddingBottom- This is the bottom padding filled for the layout.

NOTE 1: Here width and height are the dimension of the layout/view which can be
specified in terms of dp (Density-independent Pixels), sp (Scale-independent
Pixels), pt (Points which is 1/72 of an inch), px (Pixels), mm (Millimeters) and
finally in (inches).
NOTE 2: You can specify width and height with exact measurements but more
often, you will use one of these constants to set the width or height:
android:layout_width=wrap_content tells your view to size itself to the dimensions
required by its content.
android:layout_width=fill_parent tells your view to become as big as its parent view.
LinearLayout
The LinearLayout arranges views in a single column or a single row. Child views can be arranged
either vertically or horizontally.

example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="${relativePackage}.${activityClass}" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/textView1"
android:layout_marginTop="119dp"
android:orientation="horizontal" >

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

<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<requestFocus />
</EditText>

</LinearLayout>

</RelativeLayout>

AbsoluteLayout
The AbsoluteLayout enables you to specify the exact location of its children.
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:layout_width="188dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="126px"
android:layout_y="361px" />
<Button
android:layout_width="113dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="12px"
android:layout_y="361px" />
</AbsoluteLayout>
TableLayout
The TableLayout groups views into rows and columns. You use the <TableRow> element to designate
a row in the table. Each row can contain one or more views
<TableLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
>
<TableRow>
<TextView
android:text="User Name:"
android:width ="120dp"
/>
<EditText
android:id="@+id/txtUserName"
android:width="200dp" />
</TableRow>
<TableRow>
<TextView
android:text="Password:"
/>
<EditText
android:id="@+id/txtPassword"
android:password="true"
/>
</TableRow>
<TableRow>
<TextView />
<CheckBox android:id="@+id/chkRememberPassword"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Remember Password"
/>
</TableRow>
<TableRow>
<Button
android:id="@+id/buttonSignIn"
android:text="Log In" />
</TableRow>
</TableLayout>
RelativeLayout
The RelativeLayout enables you to specify how child views are positioned relative to each other.
Notice that each view embedded within the RelativeLayout
has attributes that enable it to align with another view. These
attributes are as follows:
➤ layout_alignParentTop
➤ layout_alignParentLeft
➤ layout_alignLeft
➤ layout_alignRight
➤ layout_below
➤ layout_centerHorizontal
The value for each of these attributes is the ID for the view that you are referencing.

ADAPTING TO DISPLAY ORIENTATION

1. One of the key features of modern smartphones is their ability to switch screen orientation, and
Android is no exception. Android supports two screen orientations: portrait and landscape.
2. By default, when you change the display orientation of your Android device, the current activity that is
displayed automatically redraws its content in the new orientation.
3. This is because the onCreate() method of the activity is fired whenever there is a change in display orientation.
4. However, when the views are redrawn, they may be drawn in their original locations (depending on the layout
selected).
5. Note that in landscape mode, a lot of empty space on the right of the screen could be used. Furthermore,
any additional views at the bottom of the screen would be hidden when the screen orientation is set to
landscape.

In general, you can employ two techniques to handle changes in screen orientation:
➤ Anchoring — The easiest way is to “anchor” your views to the four edges of the screen. When
the screen orientation changes, the views can anchor neatly to the edges.

Anchoring Example :
Note the following attributes found in the various Button views:
➤ layout_alignParentLeft — Aligns the view to the left of the parent view
➤ layout_alignParentRight — Aligns the view to the right of the parent view
➤ layout_alignParentTop — Aligns the view to the top of the parent view
➤ layout_alignParentBottom — Aligns the view to the bottom of the parent view
➤ layout_centerVertical — Centers the view vertically within its parent view
➤ layout_centerHorizontal — Centers the view horizontally within its parent view

➤ Resizing and repositioning — Where as anchoring and centralizing are simple techniques to
ensure that views can handle changes in screen orientation, the ultimate technique is resizing
each and every view according to the current screen orientation.

Resizing and Repositioning

Apart from anchoring your views to the four edges of the screen, an easier
way to customize the UI based on screen orientation is to create a separate
res/layout folder containing the XML fi les for the UI of each orientation.
To support landscape mode, you can create a new folder in the res folder
and name it as layout-land (representing landscape). Figure shows
the new folder containing the fi le main.xml.
Basically, the main.xml fi le contained within the layout folder defi nes
the UI for the activity in portrait mode, whereas the main.xml fi le in the
layout-land folder defi nes the UI in landscape mode.