Unit-III Components and Layouts

LinearLayout:
- In android, LinearLayout is a ViewGroup subclass which is used to render all
child View instances one by one either in Horizontal direction or Vertical direction based on
the orientation property.
- In android, we can specify the linear layout orientation using android:orientation attribute.
- Following is the pictorial representation of linear layout in android applications.

- In LinearLayout, the child View instances arranged one by one, so the horizontal list will have
only one row of multiple columns and vertical list will have one column of multiple rows.
- Android LinearLayout Example(activity_main.xml)

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

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:layout_width="130dp"
android:layout_height="wrap_content"
android:text="Button1"/>
<Button
android:layout_width="130dp"
android:layout_height="wrap_content"
android:text="Button2"/>
<Button
android:layout_width="130dp"
android:layout_height="wrap_content"
android:text="Button3"/>
</LinearLayout>

Android Language by Prof. Vishal Jadhav Sir’s (VJTech Academy, contact us: +91-7743909870) 7
Unit-III Components and Layouts

- Output of Android LinearLayout Example:

Android Language by Prof. Vishal Jadhav Sir’s (VJTech Academy, contact us: +91-7743909870) 8
Unit-III Components and Layouts

RelativeLayout:

- In android, RelativeLayout is a ViewGroup which is used to specify the position of

child View instances relative to each other (Child A to the left of Child B) or relative to the
parent (Aligned to the top of parent).
- Following is the pictorial representation of relative layout in android applications.

- In android, RelativeLayout is very useful to design user interface because by using relative
layout we can eliminate the nested view groups and keep our layout hierarchy flat, which
improves the performance of application.
- In RelativeLayout 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.
-
- Following are the some of most useful layout properties available to views in RelativeLayout.

Attribute Description

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

Android Language by Prof. Vishal Jadhav Sir’s (VJTech Academy, contact us: +91-7743909870) 9
Unit-III Components and Layouts

Attribute Description

layout_alignParentBottom If it specified “true”, the bottom edge of view will match the
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 the parent.

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

parent.

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

within its parent.

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

Android Language by Prof. Vishal Jadhav Sir’s (VJTech Academy, contact us: +91-7743909870) 10
Unit-III Components and Layouts

Attribute Description

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

- Android LinearLayout Example(activity_main.xml)

<?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:layout_centerVertical="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_alignParentBottom="true"
android:text="Button3" />
<Button
android:id="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="Button4" />
</RelativeLayout>

Android Language by Prof. Vishal Jadhav Sir’s (VJTech Academy, contact us: +91-7743909870) 11
Unit-III Components and Layouts

Output of Android RelativeLayout Example:

Android Language by Prof. Vishal Jadhav Sir’s (VJTech Academy, contact us: +91-7743909870) 12
Unit-III Components and Layouts

Table Layout:

- In android, TableLayout is a ViewGroup subclass that is used to display the child View elements
in rows and columns.
- Following is the pictorial representation of table layout in android applications.

- In android, TableLayout will position its children elements into rows and columns and it won’t
display any border lines for rows, columns or cells.
- The TableLayout in android will work same as the HTML table and the table will have as many
columns as the row with the most cells. The TableLayout can be explained as <table> and
TableRow is like <tr> element.
- Android TableLayout Example(activity_main.xml)

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

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="100dp">

<TableRow android:background="#009688" android:padding="5dp">>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="RollNo" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"

Android Language by Prof. Vishal Jadhav Sir’s (VJTech Academy, contact us: +91-7743909870) 13
Unit-III Components and Layouts

android:layout_weight="1"
android:text="Name" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Marks" />
</TableRow>
<TableRow android:background="#DAE8FC" android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1010" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Dennis" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="98.90" />
</TableRow>
<TableRow android:background="#DAE8FC" android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2020" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="James" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="95" />
</TableRow>
<TableRow android:background="#DAE8FC" android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3030" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Brenden" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"

Android Language by Prof. Vishal Jadhav Sir’s (VJTech Academy, contact us: +91-7743909870) 14
Unit-III Components and Layouts

android:text="80.85" />
</TableRow>
</TableLayout>

- Output of Android TableLayout Example:

Android Language by Prof. Vishal Jadhav Sir’s (VJTech Academy, contact us: +91-7743909870) 15
Unit-III Components and Layouts

FrameLayout:

- In android, Framelayout is a ViewGroup subclass that is used to specify the position

of View instances it contains on the top of each other to display only single View inside the
FrameLayout.
- In simple manner, we can say FrameLayout is designed to block out an area on the screen to
display a single item.
- Following is the pictorial representation of frame layout in android applications.

- In android, FrameLayout will act as a placeholder on the screen and it is used to hold a single
child view.

- In FrameLayout, the child views are added in a stack and the most recently added child will show
on the top. We can add multiple children views to FrameLayout and control their position by
using gravity attributes in FrameLayout.
- Android FrameLayout Example(activity_main.xml)
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/vjtech123" />
<TextView

Android Language by Prof. Vishal Jadhav Sir’s (VJTech Academy, contact us: +91-7743909870) 16
Unit-III Components and Layouts

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="VJTech Academy"
android:textColor="#E11515"
android:textSize="30sp" />
</FrameLayout>

- Output of Android FrameLayout Example:

Android Language by Prof. Vishal Jadhav Sir’s (VJTech Academy, contact us: +91-7743909870) 17
Unit-III Components and Layouts

AbsoluteLayout:

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

- AbsoluteLayout Attributes:

1
android:id This is the ID which uniquely identifies the layout.

2
android:layout_x This specifies the x-coordinate of the view.

3
android:layout_y This specifies the y-coordinate of the view.

- Following is the pictorial representation of Absolute layout in android applications.

Android Language by Prof. Vishal Jadhav Sir’s (VJTech Academy, contact us: +91-7743909870) 18
Unit-III Components and Layouts

- Android Absolute Layout Example(activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<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="50px"
android:layout_y="661px" />
</AbsoluteLayout>

- Output of Android Absolute Layout Example:

Android Language by Prof. Vishal Jadhav Sir’s (VJTech Academy, contact us: +91-7743909870) 19