Unit 03

UI Components and Layouts

Directory Structure

1 AndroidManifest.xml
This is the Android application definition file. It contains information about the
Android application such as minimum Android version, permission to access Android
device capabilities such as internet access permission, ability to use phone permission,
etc.
2 Java
The Java folder contains the Java source code files. These files are used as a controller
for controlled UI (Layout file). It gets the data from the Layout file and after
processing that data output will be shown in the UI layout. It works on the backend of
an Android application.

3 res/drawable
Here we store the various density-independent graphic assets used in our application.
4 Layout:
A layout defines the visual structure for a user interface, such as the UI for an
Android application. This folder stores Layout files that are written in XML language.

5 mipmap
Mipmap folder contains the Image Asset file that can be used in Android Studio
application. we can generate icon types like Launcher icons, Action bar and tab icons,
and Notification icons.

6 colors.xml
colors.xml file contains color resources of the Android application. Different color
values are identified by a unique name that can be used in the Android application
program.

7 strings.xml
The strings.xml file contains string resources of the Android application. The different
string value is identified by a unique name that can be used in the Android application
program. This file also stores string array by using XML language.

8 styles.xml
The styles.xml file contains resources of the theme style in the Android application.
This file is written in XML language.

9 build.gradle(Module: app)
This defines the module-specific build configurations. Here you can add dependencies
what you need in your Android application.

Layouts
1. Linear Layout
Linear Layout is a ViewGroup that is responsible for holding views in it. It is a layout
that arranges its children i.e the various views and layouts linearly in a single
column(vertically) or a single row(horizontally).
Whether all the children will be arranged horizontally or vertically depends upon the
value of attribute android:orientation. By default the orientation is horizontal.
LinearLayout Attributes
android:id
This is the ID which uniquely identifies the layout.
android:baselineAligned
This must be a boolean value, either "true" or "false" and prevents the layout from
aligning its children's baselines.
android:baselineAlignedChildIndex
When a linear layout is part of another layout that is baseline aligned, it can specify
which of its children to baseline align.
android:gravity
This specifies how an object should position its content, on both the X and Y axes.
Possible values are top, bottom, left, right, center, center_vertical, center_horizontal
etc.
android:orientation
This specifies the direction of arrangement and you will use "horizontal" for a row,
"vertical" for a column. The default is horizontal.

<?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" >

<Button android:id="@+id/btnStartService"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:text="start_service"/>
 <Button android:id="@+id/btnStopService"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:text="stop_service"/>
</LinearLayout>

2. Absolute Layout
An Absolute Layout lets you specify exact locations (x/y coordinates) of its children.
Absolute layouts are less flexible and harder to maintain than other types of layouts
without absolute positioning.

Absolute layout are harder to maintain for different mobile screen sizes than other
types of layouts because we set the exact location of a child view or called
component. The positioning is based on x(top) and y(left) coordinates and that
positioning is not as useful in world of various screen resolutions(sizes) and aspect
ratios.

Absolute Layout Attributes

android:id
This is the ID which uniquely identifies the layout.
android:layout_x
This specifies the x-coordinate of the view.
android:layout_y
This specifies the y-coordinate of the view.
Following will be the content of res/layout/activity_main.xml file −
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="OK"
android:layout_x="50px"
android:layout_y="361px" />
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Cancel"
android:layout_x="225px"
android:layout_y="361px" />
</AbsoluteLayout>

3. Frame Layout
FrameLayout is designed to block out an area on the screen to display a single item.
Generally, FrameLayout should be used to hold a single child view, because it can be
difficult to organize child views in a way that's scalable to different screen sizes
without the children overlapping each other.
We can add multiple children to a FrameLayout and control their position within the
FrameLayout by assigning gravity to each child, using
the android:layout_gravity attribute.

Attributes of Frame Layout:

1. android:id
This is the unique id which identifies the layout .

2. android:foreground
Foreground defines the drawable to draw over the content and this may be a color
value. Possible color values can be in the form of “#rgb”, “#argb”, “#rrggbb”, or
“#aarrggbb”.

3. android:foregroundGravity
This defines the gravity to apply to the foreground drawable. Default value of gravity
is fill. We can set values in the form of “top”, ”center_vertical” , ”fill_vertical”,
”center_horizontal”, ”fill_horizontal”, ”center”, ”fill”, ”clip_vertical”,
”clip_horizontal”, ”bottom”, ”left” or ”right”

4. android:visibility
This determine whether to make the view visible, invisible or gone.

5. android:measureAllChildren
This determines whether to measure all children including gone state visibility or just
those which are in the visible or invisible state of measuring visibility. The default
value of measure all children is false. We can set values in the form of Boolean i.e.
“true” OR “false”.

Following will be the content of res/layout/activity_main.xml file

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

<ImageView
android:src="@drawable/ic_launcher"
android:scaleType="fitCenter"
android:layout_height="250px"
android:layout_width="250px"/>

<TextView
android:text="Frame Demo"
android:textSize="30px"
android:textStyle="bold"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"/>
</FrameLayout>

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

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="30dp"

android:background="@color/design_default_color_secondary"

tools:context=".MainActivity">

<TextView android:text="LeftTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="RightTop"
android:layout_gravity="top|right" />
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="CentreTop"
 android:layout_gravity="top|center_horizontal" />
<TextView android:text="Left"
android:layout_gravity="left|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Right"
android:layout_gravity="right|center_vertical" />
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Centre"
android:layout_gravity="center" />
<TextView android:text="LeftBottom"
android:layout_gravity="left|bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="RightBottom"
android:layout_gravity="right|bottom" />
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="CenterBottom"
android:layout_gravity="center|bottom" />

</FrameLayout>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/table"
android:foregroundGravity="center"
android:foreground="#000"
android:background="@color/design_default_color_secondary"

tools:context=".MainActivity">
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginBottom="10dp"
android:src="@mipmap/ic_launcher"
android:scaleType="centerCrop"
/>

<TextView
android:layout_width="match_parent"
 android:layout_height="wrap_content"
android:layout_gravity=""
android:text="CENTER"/>

</FrameLayout>

4. Table Layout
In Android, Table Layout is used to arrange the group of views into rows and
columns. Table Layout containers do not display a border line for their columns, rows
or cells.

 For building a row in a table we will use the <TableRow> element. Table row
objects are the child views of a table layout.
 Each row of the table has zero or more cells and each cell can hold only one view
object like ImageView, TextView or any other view.
 Total width of a table is defined by its parent container
 Column can be both stretchable and shrinkable. If shrinkable then the width of
column can be shrunk to fit the table into its parent object and if stretchable then
it can expand in width to fit any extra space available.

Attributes of Table Layout in Android:

1. id: id attribute is used to uniquely identify a Table Layout.

2. stretchColumns: Stretch column attribute is used in Table Layout to change the

default width of a column. The value that assigned to this attribute can be a single
column number or a comma delimited list of column numbers (1, 2, 3…n).
If the value is 1 then the second column is stretched to take up any available space in
the row, because of the column numbers are started from 0.
If the value is 0,1 then both the first and second columns of table are stretched to take
up the available space in the row.
If the value is ‘*’ then all the columns are stretched to take up the available space.

3. shrinkColumns: Shrink column attribute is used to shrink or reduce the width of

the column‘s.
If the value is 0 then the first column’s width shrinks or reduces by word wrapping its
content.
If the value is 0,1 then both first and second columns are shrinks or reduced by word
wrapping its content.
If the value is ‘*’ then the content of all columns is word wrapped to shrink their
widths.
4. collapseColumns: collapse columns attribute is used to collapse or invisible the
column’s of a table layout. These columns are the part of the table information but are
invisible.
If the values is 0 then the first column appears collapsed, i.e it is the part of table but it
is invisible.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000">
<TableRow android:padding="5dip">
<TextView
android:layout_height="wrap_content"
android:text="@string/loginForm"
android:textColor="#0ff"
android:textSize="25sp"
android:textStyle="bold" />
 </TableRow>
<TableRow>
<TextView
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_marginLeft="10dp"
android:text="@string/userName"
android:textColor="#fff"
android:textSize="16sp" />
<EditText
android:id="@+id/userName"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_marginLeft="10dp"
android:background="#fff"
android:hint="@string/userName"
android:padding="5dp"
android:textColor="#000" />
</TableRow>
</TableLayout>

Relative Layout
In Relative Layout we need to specify the position of child views relative to each
other or relative to the parent. In case if we didn’t specify the position of child views,
by default all child views are positioned to top-left of the layout.

Attributed of Relative Layout

layout_alignParentTop If it specified “true”, the top edge of view will match the top edge
of parent.

layout_alignParentBotto If it specified “true”, the bottom edge of view will match the
m bottom edge of parent.

layout_alignParentLeft If it specified “true”, the left edge of view will match the left edge
of parent.
layout_alignParentRight If it specified “true”, the right edge of view will match the right
edge of parent.

layout_centerInParent If it specified “true”, the view will be aligned to centre of parent.

layout_centerHorizontal If it specified “true”, the view will be horizontally centre aligned

within its parent.

layout_centerHorizontal If it specified “true”, the view will be vertically centre aligned

within its parent.

layout_above It accepts another sibling view id and places the view above the
specified view id.

layout_below It accepts another sibling view id and places the view below the
specified view id.

layout_toLeftOf It accepts another sibling view id and places the view left of the
specified view id.

layout_toRightOf It accepts another sibling view id and places the view right of the
specified view id.

layout_toStartOf It accepts another sibling view id and places the view to start of the
specified view id.

layout_toEndOf It accepts another sibling view id and places the view to end of the
specified view id.

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Button1" />
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Button2" />
 <Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Button3" />

<Button
android:id="@+id/btn4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Button4" />
<Button
android:id="@+id/btn5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/btn2"
android:layout_centerHorizontal="true"
android:text="Button5" />
<Button
android:id="@+id/btn6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/btn4"
android:layout_centerHorizontal="true"
android:text="Button6" />
<Button
android:id="@+id/btn7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="@+id/btn1"
android:layout_toRightOf="@+id/btn1"
android:layout_alignParentRight="true"
android:text="Button7" />
</RelativeLayout>