Android Programming

LAYOUTS IN ANDROID
Android UI Layouts

Android Layout is used to define the user interface that holds

the UI controls or widgets that will appear on the screen of an

android application or activity screen.
 Generally, every application is a combination of View and

ViewGroup.
As we know, an android application contains a large number of

activities and we can say each activity is one page of the

application.
Android UI Layouts

So, each activity contains multiple user interface

components and those components are the instances of the
View and ViewGroup.
All the elements in a layout are built using a View and

ViewGroup objects.
View

A View is defined as the user interface which is used to

create interactive UI components such as TextView,

ImageView, EditText, RadioButton, etc., and is
responsible for event handling and drawing.
They are Generally Called Widgets.
View

The Android framework will allow us to use UI elements

or widgets in two ways:

 Use UI elements in the XML file
 Create elements in the Kotlin file
ViewGroup

A ViewGroup act as a base class for layouts and layouts

parameters that hold other Views or ViewGroups and to

define the layout properties.
They are Generally Called layouts.
Types of Android Layout

Android Linear Layout

Android Relative Layout

Android Constraint Layout

Android Absolute Layout

Android Frame Layout

Android Table Layout

Android List View

Android Grid View

Different Attribute of the Layouts

android:layout_marginLeft
Used to declare the extra space used on the left side of View and ViewGroup
elements.

android:layout_marginRight
Used to declare the extra space used on the right side of View and ViewGroup
elements.

android:layout_marginTop
Used to declare the extra space used in the top side of View and ViewGroup
elements.
Different Attribute of the Layouts

android:id
Used to specify the id of the view.

android:layout_width
Used to declare the width of View and ViewGroup elements in the
layout.

android:layout_height
Used to declare the height of View and ViewGroup elements in the
layout.
Different Attribute of the Layouts

android:layout_marginBottom
Used to declare the extra space used in the bottom side of View
and ViewGroup elements.

android:layout_gravity
Used to define how child Views are positioned in the layout.
LinearLayout

LinearLayout is the most basic layout in android studio, that

aligns all the children sequentially either in a horizontal manner

or a vertical manner by specifying the android:orientation
attribute.
If one applies android:orientation=”vertical” then elements

will be arranged one after another in a vertical manner and If you

apply android:orientation=”horizontal” then elements will be
arranged one after another in a horizontal manner.
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.
LinearLayout Attributes

android:divider

This is drawable to use as a vertical divider between buttons. You use a

color value, in the form of "#rgb", "#argb", "#rrggbb", or "#aarrggbb".

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.
LinearLayout Attributes

android:orientation

This specifies the direction of arrangement and you will use

"horizontal" for a row, "vertical" for a column. The default is
horizontal.

android:weightSum

Sum up of child weight.

android:orientation= “vertical"

android:orientation= "horizontal"
RelativeLayout

Android RelativeLayout is a ViewGroup subclass, used to

specify the position of child View elements relative to each

other like (A to the right of B) or relative to the parent (fix
to the top of the parent).
Instead of using LinearLayout, we have to use
RelativeLayout to design the user interface and keep our
flat because it improves the performance of the application.
RelativeLayout Attributes

android:id

This is the ID which uniquely identifies the layout.

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:ignoreGravity

This indicates what view should not be affected by gravity

Important Attributes for
positioning

 layout_alignParentLeft
It is set “true” to match the left edge of view to the left edge of parent.
 layout_alignParentRight
It is set “true” to match the right edge of view to the right edge of
parent.
 layout_alignParentTop
It is set “true” to match the top edge of view to the top edge of parent.
 layout_alignParentBottom
It is set “true” to match the bottom edge of view to the bottom edge of
parent.
Important Attributes for
positioning

 layout_alignLeft
It accepts another sibling view id and align the view to the left of the
specified view id.
 layout_alignRight
It accepts another sibling view id and align the view to the right of the
specified view id.
 layout_alignStart
It accepts another sibling view id and align the view to start of the
specified view id.
 layout_alignEnd
It accepts another sibling view id and align the view to end of specified
view id.
Important Attributes for
positioning

 layout_centerInParent

When it is set “true”, the view will be aligned to the center of parent.
 layout_centerHorizontal

When it is set “true”, the view will be horizontally centre aligned

within its parent.
 layout_centerVertical

When it is set “true”, the view will be vertically centre aligned within
its parent.
res/values/strings.xml
ConstraintLayout

ConstraintLayout is a ViewGroup subclass, used to

specify the position of layout constraints for every child

View relative to other views present.
A ConstraintLayout is similar to a RelativeLayout, but

having more power.

Important Attributes of ConstraintLayout

android:id

This is used to give a unique id to the layout.

app:layout_constraintBottom_toBottomOf

This is used to constrain the view with respect to the bottom

position.
app:layout_constraintLeft_toLeftOf

This attribute is used to constrain the view with respect to the left
position.
Important Attributes of ConstraintLayout

app:layout_constraintRight_toRightOf

This attribute is used to constrain the view with respect to the

right position.

app:layout_constraintTop_toTopOf

This attribute is used to constrain the view with respect to the top
position.
Advantages of using ConstraintLayout

 ConstraintLayout provides you the ability to completely design

your UI with the drag and drop feature provided by the Android
Studio design editor.
 It helps to improve the UI performance over other layouts.

 With the help of ConstraintLayout, we can control the group of

widgets through a single line of code.

 With the help of ConstraintLayout, we can easily add animations to

the UI components which we used in our app.

Disadvantages

When we use the Constraint Layout in our app, the XML

code generated becomes a bit difficult to understand.

In most of the cases, the result obtain will not be the same

as we got to see in the design editor.

Sometimes we have to create a separate layout file for

handling the UI for the landscape mode.

FrameLayout

Frame Layout is designed to block out an area on the

screen to display a single item.

 It is the simplest of the Layout Managers that pins each

child view within its frame.

By default the position is the top-left corner, though the

gravity attribute can be used to alter its locations.

FrameLayout

 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.
You can add multiple children stacks each new child on

top of the one before, with each new View potentially

obscuring the previous ones.
FrameLayout Attributes

 android:foreground

This defines the drawable to draw over the content and possible values
may be a color value, in the form of "#rgb", "#argb", "#rrggbb", or
"#aarrggbb".

android:foregroundGravity

Defines the gravity to apply to the foreground drawable. The gravity

defaults to fill. Possible values are top, bottom, left, right, center,
center_vertical, center_horizontal etc.
FrameLayout Attributes

 android:measureAllChildren

Determines whether to measure all children or just those in the

VISIBLE or INVISIBLE state when measuring. Defaults to false.
TableLayout

 TableLayout is a ViewGroup subclass, used to display the

child View elements in rows and columns.

Each row has zero or more cells; each cell can hold one

View object.
TableLayout containers do not display border lines for

their rows, columns, or cells.

TableLayout Attributes

android:collapseColumns

This specifies the zero-based index of the columns to collapse. The column
indices must be separated by a comma: 1, 2, 5.

android:shrinkColumns

The zero-based index of the columns to shrink. The column indices must be
separated by a comma: 1, 2, 5.

android:stretchColumns

The zero-based index of the columns to stretch. The column indices must be
separated by a comma: 1, 2, 5.
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 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.

GridView

GridView is a ViewGroup that is used to display a

scrollable list of items in a grid view of rows and

columns.
The Grid Layout is incredibly flexible and can be used to

greatly simplify layouts and reduce or eliminate the

complex nesting often required to construct UIs using the
layouts described before.
GridView

The grid items are not necessarily predetermined but they

automatically inserted to the layout using a ListAdapter.

“An adapter actually bridges between UI components

and the data source that fill data into UI Component.

Adapter can be used to supply the data to like spinner, list
view, grid view etc.”
GridView

The ListView and GridView are subclasses of

AdapterView and they can be populated by binding them
to an Adapter, which retrieves data from an external
source and creates a View that represents each data entry.
GridView Attributes

android:id

This is the ID which uniquely identifies the layout.

android:columnWidth

This specifies the fixed width for each column. This could be in px, dp,
sp, in, or mm.

android:gravity

Specifies the gravity within each cell. Possible values are top, bottom,
left, right, center, center_vertical, center_horizontal etc.
GridView Attributes

android:horizontalSpacing

Defines the default horizontal spacing between columns. This could be

in px, dp, sp, in, or mm.

android:numColumns

Defines how many columns to show. May be an integer value, such as

"100" or auto_fit which means display as many columns as possible to
fill the available space.
GridView Attributes

android:stretchMode

Defines how columns should stretch to fill the available empty space, if
any. This must be either of the values −
none − Stretching is disabled.
spacingWidth − The spacing between each column is stretched.
columnWidth − Each column is stretched equally.
spacingWidthUniform − The spacing between each column is
uniformly stretched..
GridView Attributes

android:verticalSpacing

Defines the default vertical spacing between rows. This could be in px,
dp, sp, in, or mm.
ListView

Android ListView is a view which groups several items

and display them in vertical scrollable list.

 It used to display scrollable lists of items in a single

column.
The list items are automatically inserted to the list using

an Adapter that pulls content from a source such as an

array or database.
ListView

An adapter actually bridges between UI components and

the data source that fill data into UI Component.

Adapter holds the data and send the data to adapter view,

the view can takes the data from adapter view and shows
the data on different views like as spinner, list view, grid
view etc.
ListView Attributes

android:id

This is the ID which uniquely identifies the layout.

android:divider

This is drawable or color to draw between list items.

android:dividerHeight

This specifies height of the divider. This could be in px, dp, sp, in, or mm.

android:entries

Specifies the reference to an array resource that will populate the ListView.
ListView Attributes

android:footerDividersEnabled
When set to false, the ListView will not draw the divider before each
footer view. The default value is true.

android:headerDividersEnabled
When set to false, the ListView will not draw the divider after each
header view. The default value is true..