Mobile Application Development Ashwini Patil
Module 2
Create the first android application: Directory Structure. Android User Interface: Understanding
the Components of a screen– Linear Layout – Absolute Layout – Frame Layout - Relative Layout
– Table Layout.
Creating the first android application
Mobile Application Development Ashwini Patil
Mobile Application Development Ashwini Patil
9. To save the changes made to your project, press Ctrl+s.
10. You are now ready to test your application on the Android Emulator. Select the project name in
Eclipse and press F11. You will be asked to select a way to debug the application. Select required
Android Application and click OK.
11. The Android Emulator will now be started (if the emulator is locked, you need to slide the unlock
button to unlock it first).
12. Click the Home button (the house icon in the lower-left corner above the keyboard) so that it now
shows the Home screen.
13. Click the application Launcher icon to display the list of applications installed on the device.
Mobile Application Development Ashwini Patil
Directory Structure OR Anatomy of android application
Mobile Application Development Ashwini Patil
Understanding the Components of a screen
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
Mobile Application Development Ashwini Patil
sequence of views. Examples of ViewGroups include LinearLayout and FrameLayout. A
ViewGroupderives from the base class [Link].
Each View and ViewGroup has a set of common attributes as shown in the following table.
Some of these attributes are applicable only when a View is in a specific ViewGroup. For
example, the layout_weight and layout_gravity attributes are applicable only when a View is
in either a LinearLayout or a TableLayout.
Android supports the following ViewGroups:
LinearLayout
AbsoluteLayout
TableLayout
RelativeLayout
FrameLayout
Each of these ViewGroups are explained hereunder.
Mobile Application Development Ashwini Patil
LinerLayout
The LinearLayout arranges views in a single column or a single row.
Child views can be arranged either vertically or horizontally.
To see how LinearLayout works, consider the following elements typically contained
in the activity_main.xml file:
<?xml version=“1.0” encoding=“Utf-8”?>
<LinearLayout
xmlns:android=“[Link]
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>
In the [Link] file, observe that the root element is <LinearLayout> and
It has a <TextView> element contained within it.
The <LinearLayout> element controls the order in which the views contained within it
appear.
Observe the following diagram.
Mobile Application Development Ashwini Patil
AbsoluteLayout
The AbsoluteLayout enables you to specify the exact location of its children. Consider the
following UI defined in [Link]:
<?xml version=”1.0” encoding=”utf-8”?>
<AbsoluteLayout
android:layout_width=”fill_parent” android:layout_height=”fill_parent”
Mobile Application Development Ashwini Patil
xmlns:android=[Link]
<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>
The above code will result into:
There is a problem with absolute layout when the activity is viewed on a high resolution
screen. For this reason the AbslouteLayout has been deprecated since Android 1.5. It is not
guaranteed to be supported in future version of android.
Mobile Application Development Ashwini Patil
TableLayout
The TableLayout groups views into rows and columns.
<TableRow> element to designate a row in the table. Each row can contain one or
more views.
Each view placed within a row forms a cell.
The width of each column is determined by the largest width of each cell in that
column.
Consider the content of [Link] shown here:
<TableLayout
xmlns:android=”[Link]
android:layout_height=”fill_parent”
android:layout_width=”fill_parent”>
<TableRow>
<TextView
android:text=”User Name:”
android:width =”120px” />
<EditText
android:id=”@+id/txtUserName”
android:width=”200px” />
</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>
The above code result into following GUI:
Mobile Application Development Ashwini Patil
RelativeLayout
The RelativeLayout enables you to specify how child views are positioned relative to each
other. Consider the following [Link] file:
<?xml version=”1.0” encoding=”utf-8”?>
<RelativeLayout android:id=”@+id/RLayout”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
xmlns:android=”[Link]
>
<TextView android:id=”@+id/lblComments”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Comments”
android:layout_alignParentTop=”true”
android:layout_alignParentLeft=”true”
/>
<EditText android:id=”@+id/txtComments”
Mobile Application Development Ashwini Patil
android:layout_width=”fill_parent”
android:layout_height=”170px” android:textSize=”18sp”
android:layout_alignLeft=”@+id/lblComments”
android:layout_below=”@+id/lblComments”
android:layout_centerHorizontal=”true”
/>
<Button android:id=”@+id/btnSave”
android:layout_width=”125px”
android:layout_height=”wrap_content” android:text=”Save”
android:layout_below=”@+id/txtComments”
android:layout_alignRight=”@+id/txtComments”
/>
<Button
android:id=”@+id/btnCancel”
android:layout_width=”124px”
android:layout_height=”wrap_content” android:text=”Cancel”
android:layout_below=”@+id/txtComments”
android:layout_alignLeft=”@+id/txtComments”
/>
</RelativeLayout>
The UI of the above code would look like –
Each view is embedded within the relative layout has attributes that enable it to align
with another view.
The value for each of these attributes is the ID for the view that you are referencing.
These attributes are as follows:
Mobile Application Development Ashwini Patil
Mobile Application Development Ashwini Patil
FrameLayout
The FrameLayout is a placeholder on screen that you can use to display a single view. Views
that you add to a FrameLayout are always anchored to the top left of the layout.
<RelativeLayout android:id=”@+id/RLayout”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
xmlns:android=”[Link]
>
<TextView android:id=”@+id/lblComments”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”This is my lovely dog, Ookii”
android:layout_alignParentTop=”true”
android:layout_alignParentLeft=”true”
/>
<FrameLayout android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignLeft=”@+id/lblComments”
android:layout_below=”@+id/lblComments”
android:layout_centerHorizontal=”true”
>
<ImageView
android:src = “@drawable/ookii” android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
/>
</FrameLayout>
</RelativeLayout>
Here, you have a FrameLayout within a RelativeLayout. Within the FrameLayout, you embed
an ImageView. If you add another view (such as a Button view) within the FrameLayout, the
view will overlap the previous view.
