UI Resources

L AYOUTS IN ANDROID
LAYOUT OVERVIEW
When we create our app interface, we use some special view that acts as container.

These special views control how other views are placed on the smartphone/tablet screen.

Android provides a collection of Layout Managers and each of them implements a different
strategy to hold, manage and place its children.
Android provides several
standard layout Managers:
• Linear Layout
• Table Layout
• Relative Layout
• Frame Layout
• Grid Layout
LINEAR LAYOUTS
LinearLayout is a ViewGroup subclass, used to provide child View
elements one by one either in a particular direction either
horizontally or vertically based on the orientation property.
 LINEAR LAYOUT
<LinearLayout 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"
android:orientation="vertical" >

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:text="Left" />
 LINEAR LAYOUT
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:text="Right" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Center" />
</LinearLayout>
LINEAR LAYOUT
 TABLE LAYOUT
TableLayout is a ViewGroup subclass, used to display the
child View elements in rows and columns.
<?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" >
<TableRow>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Cell 1" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Cell 2" >
</TextView>
</TableRow>
<TableRow>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Cell 3" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Cell 4" >
</TextView>
</TableRow>
</TableLayout>
TABLE LAYOUT
 RELATIVE LAYOUT
This is the most flexible layout in Android. This layout manager uses a policy where the
container places its Views relative to other Views.

RelativeLayout implements some view attributes that we can use to place the View. There are
attributes that control the position of the View respect to other Views:

layout_toLeftof: the right edge position of this View is to the left of a specific View
layout_toRightof: the left edge position of this View is to the right of a specific View
layout_below: the top edge of this view is below to a specific View
layout_above: the bottom edge of this view is above to a specific View
There are other parameters that are used to place the view respect to
its container:
 Relative Layout
<?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" >
<TextView
android:id="@+id/t1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text1" />
 Relative Layout
<TextView
android:id="@+id/t2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/t1"
android:text="Text2" />
 Relative Layout
<TextView
android:id="@+id/t3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/t1"
android:layout_toRightOf="@id/t2"
android:text="Text3" />
</RelativeLayout>
Relative Layout
 Frame Layout
FrameLayout is a ViewGroup subclass, used to specify the
position of View elements it contains on the top of each
other to display only a single View inside the FrameLayout
<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>
 GRID LAYOUT
GridView is a ViewGroup that is used to display a scrollable list of
items in a grid view of rows and columns.

Displays the Item in a two Dimensional , Scrollable Grid.

<GridLayout
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"
android:layout_row="0"
android:layout_column="33"
android:orientation="vertical"
android:columnCount="2">
<ImageView
android:layout_width="150dp"
android:layout_height="200dp"
android:id="@+id/imageView1"
android:layout_margin="25dp"
android:layout_row="0"
android:layout_column="0"
android:src="@drawable/aa" />
<ImageView
android:layout_width="150dp"
android:layout_height="200dp"
android:id="@+id/imageView2"
android:layout_margin="25dp"
android:layout_row="1"
android:layout_column="0"
android:src="@drawable/aa"/>
<ImageView

android:layout_width="150dp"

android:layout_height="201dp"

android:id="@+id/imageView4"

android:layout_margin="25dp"

android:layout_row="1"

android:layout_column="1"

android:src="@drawable/aa"/>

<ImageView

android:layout_width="150dp"

android:layout_height="200dp"

android:id="@+id/imageView3"

android:layout_margin="25dp"

android:layout_row="0"

android:layout_column="1"

android:src="@drawable/aa" />

</GridLayout>