How to work

with
Layouts and widgets
 Working with layout

 Linear Layout
 Relative Layout
 Table Layout
 Absolute Layout
 Frame Layout
 List View
 Grid View
Android Layout Types
• There are number of Layouts provided
by Android which you will use in almost
all the Android applications to provide
different view, look and feel.
Android Linear Layout
• Android Linear Layout is a view group
that aligns all children in
either vertically or horizontally.
 Cont’d…
• LinearLayout Attributes
Attribute Description
android:id This is the ID which uniquely identifies the layout.
This must be a boolean value, either "true" or
android:baseline "false" and prevents the layout from aligning its
Aligned children's baselines.

android:baseline When a linear layout is part of another layout that

AlignedChildInde is baseline aligned, it can specify which of its
x children to baseline align.

This is drawable to use as a vertical divider

android:divider between buttons. You use a color value, in the form
of "#rgb", "#argb", "#rrggbb", or "#aarrggbb".
 Cont’d…
• LinearLayout Attributes
Attribute Description
This specifies how an object should position its
content, on both the X and Y axes. Possible
android:gravity values are top, bottom, left, right, center,
center_vertical, center_horizontal etc.
This specifies the direction of arrangement and
android:orientation you will use "horizontal" for a row, "vertical"
for a column. The default is horizontal.

android:weightSum Sum up of child weight

 Android Relative Layout
• Android RelativeLayout enables you to specify how child
views are positioned relative to each other. The position of
each view can be specified as relative to sibling elements
or relative to the parent.
 Cont’d…
• RelativeLayout Attributes
Attribute Description
This is the ID which uniquely identifies the
layout.
android:id

This specifies how an object should position its

content, on both the X and Y axes. Possible
android:gravity values are top, bottom, left, right, center,
center_vertical, center_horizontal etc.

This indicates what view should not be

affected by gravity.
android:ignoreGravity
 Cont’d…
• Using RelativeLayout, you can align two
elements by right border, or make one below
another, centered in the screen, centered left,
and so on. By default, all child views are
drawn at the top-left of the layout, so you
must define the position of each view using
the various layout properties available
from RelativeLayout.LayoutParams and
few of the important attributes are given
below −
 Cont’d…
• RelativeLayout Attributes
Attribute Description
Positions the bottom edge of this view above
the given anchor view ID and must be a
android:layout_above reference to another resource, in the form
"@[+][package:]type:name"
Makes the bottom edge of this view match
android:layout_alignBott the bottom edge of the given anchor view ID
om and must be a reference to another resource,
in the form "@[+][package:]type:name".

Makes the left edge of this view match the

left edge of the given anchor view ID and
android:layout_alignLeft must be a reference to another resource, in
the form "@[+][package:]type:name".
 Cont’d…
• RelativeLayout Attributes
Attribute Description
If true, makes the bottom edge of this view
android:layout_alignPare match the bottom edge of the parent. Must be
ntBottom a boolean value, either "true" or "false".

If true, makes the end edge of this view

android:layout_alignPare match the end edge of the parent. Must be a
ntEnd boolean value, either "true" or "false".

If true, makes the left edge of this view

android:layout_alignPare match the left edge of the parent. Must be a
ntLeft boolean value, either "true" or "false".
 Cont’d…
• RelativeLayout Attributes
Attribute Description
If true, makes the right edge of this view
android:layout_alignPare match the right edge of the parent. Must be a
ntRight boolean value, either "true" or "false".

If true, makes the start edge of this view

android:layout_alignPare match the start edge of the parent. Must be a
ntStart boolean value, either "true" or "false".

If true, makes the top edge of this view

android:layout_alignPare match the top edge of the parent. Must be a
ntTop boolean value, either "true" or "false".
Android Table Layout
• Android TableLayout going to be arranged
groups of views into rows and columns.
• You will use the <TableRow> element to build a
row in the table. 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.
 Cont’d…
• TableLayout Attributes
Attribute Description
android:id This is the ID which uniquely identifies the layout.
This specifies the zero-based index of the columns
android:collapseCo to collapse. The column indices must be separated
lumns by a comma: 1, 2, 5.

The zero-based index of the columns to shrink.

android:shrinkCol The column indices must be separated by a
umns comma: 1, 2, 5.

The zero-based index of the columns to stretch.

android:stretchCol The column indices must be separated by a
umns comma: 1, 2, 5.
How to provide a landscape layout
• By now, you should know that an Android activity needs
to handle screen orientation changes. One way to do that
is to prevent the activity from changing orientation.
• An easy way to do that is to edit the AndroidManifest.xml
file for the app, and add a screenOrientation attribute to
the activity that sets the screen orientation to portrait or
landscape like this:
Android:screenOrientation=''portrait“
• This forces the activity to display only in portrait
orientation even if the user rotates the device to attempt
to change to landscape orientation.
 Working with widgets

 TextView  ImageView
 EditText  RatingBar
 Button  ImageButton
 CheckBox  DatePicker
 RadioButton  TimePicker
 Spinner  ScrollView
 ProgessBar  WebView
 SeekBar
Android Widgets
• Views are used to create input and output fields
in the an Android App. It can be input text field,
radio field, image field etc. They are same as,
input text field, image tag to show images, radio
field in HTML.
Android TextView
• This class is used to display text on the android
application screen. It also allows user to
optionally edit it. Although it contains text
editing operations, the basic class does not
allow editing, So Edit Text class is included to
do so.
Cont’d…
Android EditText
• This class makes text to be editable in Android
application. It helps in building the data
interface taken from any user, also contains
certain features through which we can hide the
data which are confidential.
Cont’d…
Android ImageView
• Image view helps to display images in an
android application. Any image can be selected,
we just have to paste our image in a drawable
folder from where we can access it. For example:
In below Code  “@drawable/ic_laucher” has
been taken.
Cont’d…
Android CheckBox
• Checkbox is used in that applications where we
have to select one option from multiple
provided. Checkbox is mainly used when 2 or
more options are present.
Cont’d…
Android RadioButton
• Radio button is like checkbox, but there is slight
difference between them. Radio button is a
 two-states button that can be either checked or
unchecked.
Cont’d…
Android Button
• This class is used to create a button on an
application screen. Buttons are very helpful in
getting into a content. Android button
represents a clickable push-button widget.
Cont’d…
Android Image Button
• Image button is a button but it carries an image
on it. We can put an image or a certain text on it
and when we click it provides the operations
assigned to it.
Cont’d…
Android ToggleButton
• Android Toggle Button can be used to display
checked/unchecked (On/Off) state on the
button.
• It is beneficial if user have to change the setting
between two states. It can be used to On/Off
Sound, Wifi, Bluetooth etc.
Cont’d…
Android Spinner
• Android Spinner is like the combox box of AWT
or Swing. It can be used to display the multiple
options to the user in which only one item can
be selected by the user.
• Android spinner is like the drop down menu
with multiple values from which the end user
can select only one value.
• Android spinner is associated with
AdapterView. So you need to use one of the
adapter classes with spinner.
Cont’d…
Android RatingBar
• Android RatingBar can be used to get the rating
from the user. The Rating returns a floating-
point number. It may be 2.0, 3.5, 4.0 etc.
• Android RatingBar displays the rating in stars.
Android RatingBar is the subclass of
AbsSeekBar class.
• The getRating() method of android RatingBar
class returns the rating number.
Cont’d…
Android WebView
• Android WebView is used to display web page in
android. The web page can be loaded from same
application or URL. It is used to display online
content in android activity.
• Android WebView uses webkit engine to display
web page.
• The android.webkit.WebView is the subclass of
AbsoluteLayout class.
• The loadUrl() and loadData() methods of Android
WebView class are used to load and display web
page.
Cont’d…
Android SeekBar
• Android SeekBar is a kind of ProgressBar with
draggable thumb. The end user can drag the thum
left and right to move the progress of song, file
download etc.
• The SeekBar.OnSeekBarChangeListener interface
provides methods to perform even handling for seek
bar.
• Android SeekBar and RatingBar classes are the sub
classes of AbsSeekBar.
Cont’d…
Android Toast
• Andorid Toast can be used to display information
for the short period of time. A toast contains
message to be displayed quickly and disappears
after sometime.
• The android.widget.Toast class is the subclass of
java.lang.Object class.
• You can also create custom toast as well for example
toast displaying image. You can visit next page to see
the code for custom toast.
Cont’d…
Thank you!