Android Layouts

• A layout defines the structure for a user interface in

your app, such as in an ac vity.
• The basic building block for user interface is
a View object which is created from the View class
and occupies a rectangular area on the screen and is
responsible for drawing and event handling.
• View is the base class for widgets, which are used to
create interac ve UI components like bu ons, text
fields, etc.
• The ViewGroup is a subclass of View and provides
invisible container that hold other Views or other
ViewGroups and define their layout proper es.
• At third level we have different layouts which
are subclasses of ViewGroup class and a
typical layout defines the visual structure for
an Android user interface and can be created
either at run me using View /
ViewGroup objects or you can declare your
layout using simple XML file main_layout.
xml which is located in the res/layout folder of
your project.
 Android Layout Types
• There are number of Layouts provided by Android
which you will use in almost all the Android
applica ons to provide different view, look and feel.
• Linear Layout
• LinearLayout is a view group that aligns all children in a
single direc on, ver cally or horizontally.
• Rela ve Layout
• Rela veLayout is a view group that displays child views
in rela ve posi ons.
• Table Layout
• TableLayout is a view that groups views into rows and
columns.
• Absolute Layout
• AbsoluteLayout enables you to specify the exact
loca on of its children.
• Frame Layout
• The FrameLayout is a placeholder on screen that
you can use to display a single view.
• List View
• ListView is a view group that displays a list of
scrollable items.
• Grid View
• GridView is a ViewGroup that displays items in a
two-dimensional, scrollable grid.
 Layout A ributes
• Each layout has a set of a ributes which define the
visual proper es of that layout.
• There are few common a ributes among all the
layouts and their are other a ributes which are
specific to that layout.
• Following are common a ributes and will be
applied to all the layouts:
• android:id
• This is the ID which uniquely iden fies 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_marginBo om
• This is the extra space on the bo om side of the layout.
• android:layout_marginLe
• This is the extra space on the le 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 posi oned.
• 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:paddingLe
• This is the le 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:paddingBo om
• This is the bo om padding filled for the layout.
• 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).
• You can specify width and height with exact
measurements but more o en, 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.
 Linear Layout
• LinearLayout is a view group that aligns all children in a single
direc on, ver cally or horizontally. You can specify the layout
direc on with the android:orienta on a ribute.
 LinearLayout A ributes
• Following are the important a ributes specific to
LinearLayout −
• android:id
• This is the ID which uniquely iden fies 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:divider
• This is drawable to use as a ver cal divider between
bu ons. You use a color value, in the form of "#rgb", "
#argb", "#rrggbb", or "#aarrggbb".
• android:gravity
• This specifies how an object should posi on its content,
on both the X and Y axes. Possible values are top,
bo om, le , right, center, center_ver cal,
center_horizontal etc.
• android:orienta on
• This specifies the direc on of arrangement and you will
use "horizontal" for a row, "ver cal" for a column. The
default is horizontal.
• android:weightSum
• Sum up of child weight
 MainAc vity.java
package com.example.demo;
import android.os.Bundle;
import android.app.Ac vity;
public class MainAc vity extends Ac vity
{
@Override protected void onCreate(Bundle
savedInstanceState)
{
super.onCreate(savedInstanceState); setContentView(R.
layout.ac vity_main);
}
}
 ac vity_main.xml
• <?xml version="1.0" encoding="u -8"?>
• <LinearLayout xmlns:android= "h p://schemas.
android.com/apk/res/android"
• android:layout_width="fill_parent" android:
layout_height="fill_parent"
• android:orienta on="ver cal" >

• <Bu on android:id="@+id/btnStartService"
• android:layout_width="270dp"
• android:layout_height="wrap_content"
• android:text="start_service"/>
• <Bu on android:id="@+id/btnPauseService"
• android:layout_width="270dp“
• android:layout_height="wrap_content“
• android:text="pause_service"/>

• <Bu on android:id="@+id/btnStopService"
• android:layout_width="270dp
• " android:layout_height="wrap_content"
• android:text="stop_service"/>
• </LinearLayout>
 res/values/strings.xml
• <?xml version="1.0" encoding="u -8"?>
<resources>
• <string name="app_name">HelloWorld</
string> <string name="ac on_se ngs">
Se ngs</string> </resources>
• Now let's change the orienta on of Layout
as android:orienta on="horizontal" and try to
run the same applica on, it will give following
screen −