Diploma- C.E.

Introduction to Unit no:-5-part 2

Android Mobile Computing

[09CE1501]

Prof. Rushi Raval

  A layout defines the structure for a user interface in
your app, such as in an activity.
 All elements in the layout are built using a hierarchy
Layouts In of View and ViewGroup objects.

Android  A View usually draws something the user can see

and interact with.
 Whereas ViewGroup is an invisible container that
defines the layout structure for View.
  The View objects are usually called "widgets" and can
be one of many subclasses, such as “Buttons” or
“TextView”.

Layouts In
Android
  We have different layouts which are subclasses of
ViewGroup class and a typical layout defines the
visual structure for an Android user interface.

Layouts In  you can declare your layout using simple XML file
main_layout.xml which is located in the res/layout
Android folder of your project.
 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.
  The following layouts are used in our android
Application.
1. Linear Layout
2. Relative Layout

Types of 3. Table Layout

Layouts 4. Absolute Layout

5. Frame Layout
6. ListView Layout
7. GridView Layout
8. Constraint Layout
  Linear Layout: Linear Layout 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.

Types of  Relative Layout: Relative Layout is a ViewGroup

subclass, used to specify the position of child View
Layouts elements relative to each other like (A to the right of
B) or relative to the parent (fix to the top of parent).
 Table Layout: Table Layout is a ViewGroup subclass,
used to display the child View elements in rows and
columns.
  Absolute Layout: Absolute Layout enables you to
specify the exact location of its children.
 Frame Layout: Frame Layout is a ViewGroup
subclass, used to specify the position of View
elements it contains on the top of each other to
Types of display only single View inside the Frame Layout.
 List View: ListView is a ViewGroup, used to display
Layouts scrollable list of items in single column.
 Grid View: GridView is a ViewGroup which is used to
display scrollable list of items in grid View of rows and
columns.
  Constraint Layout: Constraint Layout is a
ViewGroup subclass, used to specify the position of a
Types of layout constraints for every child View relative to
other views present.
Layouts  A ConstraintLayout is similar to a RelativeLayout, but
having more power.
Layout
Example.
  <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical" >

Layout 
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
Example.  android:layout_height="wrap_content"

XML  android:text="This is a TextView" />

 <Button android:id="@+id/button"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="This is a Button" />
 <!-- More GUI components go here -->
 </LinearLayout>
 android:id
1
This is the ID which uniquely identifies the view.

android:layout_width
2
This is the width of the layout.
android:layout_height
3
This is the height of the layout

Layout 4
android:layout_marginTop
This is the extra space on the top side of the layout.

Attributes. 5
android:layout_marginBottom
This is the extra space on the bottom side of the layout.

android:layout_marginLeft
6
This is the extra space on the left side of the layout.

android:layout_marginRight
7
This is the extra space on the right side of the layout
 android:layout_gravity
8
This specifies how child Views are positioned.

android:layout_weight
9 This specifies how much of the extra space in the layout
should be allocated to the View.
Layout
android:layout_x
Attributes. 10
This specifies the x-coordinate of the layout.

android:layout_y
11
This specifies the y-coordinate of the layout.

android:layout_width
12
This is the width of the layout.
 android:paddingLeft
13
This is the left padding filled for the layout.

android:paddingRight
14
This is the right padding filled for the layout.
Layout
Attributes. 15
android:paddingTop
This is the top padding filled for the layout.

android:paddingBottom
16
This is the bottom padding filled for the layout.
  Most commonly used Android View classes
 TextView
 EditText
 Button
Views,  ImageView

Buttons  ImageButton

and Menu  CheckBox

 RadioButton
 RatingBar
 DatePicker
 Spinner, etc.
  TextView.
 A TextView displays text to the user and optionally
allows them to edit it.
 A TextView is a complete text editor, however the
Views, basic class is configured to not allow editing.
Buttons  In android, TextView is a user interface control which
is used to display the text to the user.
and Menu  <TextView
android:id="@+id/fstTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter Name" />
  EditText
 A EditText is an overlay over TextView that configures
itself to be editable.
 It is the predefined subclass of TextView that includes
Views, rich editing capabilities.
Buttons  In android, EditText is a user interface control which
is used to allow the user to enter or modify the text.
and Menu  <EditText
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"/>
  Button.
 Android Button represents a push-button.
 The android.widget.Button is subclass of TextView
class and CompoundButton is the subclass of Button
Views, class.
 In android, Button is a user interface control which is
Buttons used to perform an action when the user click or tap
and Menu on it.
 <Button
android:id="@+id/getName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Get Name" />
  ImageView
 In Android, ImageView class is used to display an
image file in application. Image file is easy to use but
hard to master in Android, because of the various
screen sizes in Android devices.
Views,  An android is enriched with some of the best UI
Buttons design widgets that allows us to build good looking
and attractive UI based application.
and Menu  <ImageView
 android:id="@+id/imageView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"/>
  ImageButton
 An ImageButton is an AbsoluteLayout which enables
you to specify the exact location of its children.
Views,  This shows a button with an image (instead of text)
Buttons that can be pressed or clicked by the user.
 <ImageButton
and Menu android:id="@+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/add_icon" />
  CheckBox
 Checkboxes allow the user to select one or more
options from a set.
 Because a set of checkbox options allows the user to
Views, select multiple items, each checkbox is managed
separately and you must register a click listener for
Buttons each one.
and Menu  <CheckBox
android:id="@+id/chk1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Java" />
  RadioButton
 Android radio button is a widget which can have
more than one option to choose from. The user can
choose only one option at a time.
 <RadioGroup
Views, android:layout_width="match_parent"
Buttons android:layout_height="wrap_content"
android:orientation="vertical">
and Menu <RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Java"
android:checked="true"/>
</RadioGroup>
  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.
Views,  Android RatingBar displays the rating in stars. Android
Buttons RatingBar is the subclass of AbsSeekBar class.

and Menu  <RatingBar

 android:id="@+id/ratingBar"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"/>
  Date Picker
 Android Date Picker allows you to select the date
consisting of day, month and year in your custom
user interface.
Views,  For this functionality android provides DatePicker and
Buttons DatePickerDialog components.

and Menu  <DatePicker

 android:id="@+id/datePicker"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content“ />
  Spinner
 Android Spinner is like the combo 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
Views, user.

Buttons  Android spinner is like the drop down menu with

multiple values from which the end user can select
and Menu only one value
 <Spinner
 android:id="@+id/spinner"
 android:layout_width="149dp"
 android:layout_height="40dp“ />