Chapter 2
M O B I L E A P P L I C AT I O N
D E V E LO P M E N T
UI WIDGETS AND LAYOUTS
CO:
Apply android widgets and responsive layouts to develop mobile
applications in Android.
User interface
• The Viewclass represents the basic building block for user interface
components.
• A View 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 interactive UI
components (Buttons, TextViews, etc.).
Using Views
• common operations to perform:
• 1.Set properties: for example setting the text of a TextView. Properties that are known at build time
can be set in the XML layout files.
• 2.Set focus: The framework will handled moving focus in response to user input. To force focus to a
specific view, call requestFocus().
• 3.Set up listeners: Views allow clients to set listeners that will be notified when something interesting
happens to the view. For example, a Button exposes a listener to notify clients when the button is
clicked.
• 4.Set visibility: You can hide or show views using setVisibility(int).
What is an XML layout?
• Each XML file contains a tree of elements specifying a layout of
widgets and containers that make up one View.
• The attributes of the XML elements are properties, describing how a
widget should look or how a container should behave.
• Example:
• If a Button element has an attribute value of
• android:textStyle= "bold"
• that means that the text appearing on the face of the button should be rendered in a
boldface font style.
What is an XML layout?
• The root element needs to declare the Android XML namespace
xmlns:android=http://schemas.android.com/apk/res/android
• All other elements will be children of the root and will inherit that namespace declaration.
• Because we want to reference a button from our Java code, we need to give it an identifier
via the android:id attribute.
• The remaining attributes are properties of the Button instance:
• android:text indicates the initial text to be displayed on the button face (in this case, an empty string)
• android:layout_width and android:layout_height tell Android to have the button's width and height fill
the "parent“ container, in this case the entire screen.
Android UI Widgets
1 TextView This control is used to display text to the user.
2 EditText EditText is a predefined subclass of TextView that includes rich editing
capabilities.
3 AutoCompleteTextView The AutoCompleteTextView is a view that is similar to
EditText, except that it shows a list of completion suggestions automatically while
the user is typing.
4 Button A push-button that can be pressed, or clicked, by the user to perform
an action.
5 ImageButton An ImageButton shows a button with an image (instead of text)
that can be pressed or clicked by the user.
Android UI ….
6 CheckBox An on/off switch that can be toggled by the user. You should use check box
when presenting users with a group of selectable options that are not mutually exclusive.
7 ToggleButton An on/off button with a light indicator.
8 RadioButton The RadioButton has two states: either checked or unchecked.
9 RadioGroup A RadioGroup is used to group together one or more RadioButtons.
10 ProgressBar The ProgressBar view provides visual feedback about some ongoing
tasks, such as when you are performing a task in the background.
11 Spinner A drop-down list that allows users to select one value from a set.
12 Calendar View It is used to display and select dates of the Calendar.
Android Widgets: TextView
TextView is one of many such widgets which can be used to improve the UI of the app. TextView refers to the widget which displays
some text on the screen based on the layout, size, colour, etc set for that particular TextView. It optionally allows us to modify or edit itself
as well.
Class Syntax:
public class TextView
extends View
implements ViewTreeObserver.OnPreDrawListener
Class Heirarchy:
java.lang.Object
↳ android.view.View
↳ android.widget.TextView
Example:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text_view_id"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text=“Hello" />
</LinearLayout>
ATTRIBUTES DESCRIPTION
android:text Sets text of the Textview
android:id Gives a unique ID to the Textview
android:cursorVisible Use this attribute to make cursor visible or invisible.
android:drawableBottom Sets images or other graphic assets to below of the Textview.
android:autoText Automatically correct spelling errors in text of the Textview.
android:capitalize It automatically capitalize whatever the user types in the Textview.
XML android:ellipsize
Use this attribute when you want text to be ellipsized if it is longer than the
Textview width.
Attributes of
android:gravity We can align text of the Textview vertically or horizontally or both.
android:height Use to set height of the Textview.
android:hint Use to show hint when there is no text.
TextView in android:inputType
android:lines
Use to set input type of the Textview. It can be Number, Password, Phone etc.
Use to set height of the Textview by number of lines.
Android
android:maxHeight Sets maximum height of the Textview.
android:minHeight Sets minimum height of the Textview.
android:maxLength Sets maximum character length of the Textview.
android:maxLines Sets maximum lines Textview can have.
android:minLines Sets minimum lines Textview can have.
android:maxWidth Sets maximum width Textview can have.
android:minWidth Sets minimum lines Textview can have.
android:textAllCaps Show all texts of the Textview in capital letters.
android:textColor Sets color of the text.
android:textSize Sets font size of the text.
android:textStyle Sets style of the text. For example, bold, italic, bolditalic.
android:typeface Sets typeface or font of the text. For example, normal, sans, serif etc
android:width Sets width of the TextView.
Button
A Button is a Push-button which can be pressed, or clicked, by the user to perform
an action. Following are the important attributes related to Button control.
Inherited from android.widget.TextView Class −
android:autoText
If set, specifies that this TextView has a textual input method and automatically
corrects some common spelling errors.
android:drawableBottom
This is the drawable to be drawn below the text.
android:drawableRight
This is the drawable to be drawn to the right of the text.
android:editable
If set, specifies that this TextView has an input method.
android:text
This is the Text to display.
Example
package com.example.myapplicationcolor;
import androidx.appcompat.app.AppCompatActivity;
Code
import android.graphics.Color;
import android.os.Bundle;
import android.widget.Button;
import android.view.*;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
Button b1,b2,b3;
TextView t1;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
b1=(Button)findViewById(R.id.button);
b2=(Button)findViewById(R.id.button2);
b3=(Button)findViewById(R.id.button3);
t1=(TextView)findViewById(R.id.textView);
b1.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
t1.setBackgroundColor(Color.RED);
}
});
b2.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
t1.setBackgroundColor(Color.GREEN);
}
});
b3.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
t1.setBackgroundColor(Color.BLUE);
}
});
}
}
images
• ImageView and ImageButton are two Android widgets that
allow embedding of images in your applications.
• Both are image-based widgets analogue to TextView and
Button, respectively.
• Each widget takes an android:src or android:background
attribute (in an XML layout) to specify what picture to use.
• Pictures are usually reference a drawable resource.
• ImageButton, is a subclass of ImageView. It adds the
standard
Button behavior for responding to click events.
Images
EditText
EditText
In addition to the standard TextView properties, EditText has many
others features such as:
• android:autoText, (true/false) provides automatic spelling assistance
• android:capitalize, (words/sentences) automatic capitalization
• android:digits, to configure the field to accept only certain digits
• android:singleLine, is the field for single-line / multiple-line input
• android:password, (true/false) controls field’s visibility
• android:numeric, (integer, decimal, signed) controls numeric format
• android:phonenumber, (true/false) Formatting phone numbers
EditText
Develop the
following
applications
public class MainActivity extends Ap
Button b1,b2,b3,b4;
EditText t1,t2,t3;
@Override
protected void onCreate(Bundle s
super.onCreate(savedInstance
setContentView(R.layout.acti
b1=(Button)findViewById(R.id
t1=(EditText)findViewById(R.
t2=(EditText)findViewById(R.
t3=(EditText)findViewById(R.
b2=(Button)findViewById(R.id
b3=(Button)findViewById(R.id
b4=(Button)findViewById(R.id
b1.setOnClickListener(new Vi
@Override
public void onClick(View
int a=Integer.parseI
int b=Integer.parseI
int c=a+b;
t3.setText(String.va
}
});
b2.setOnClickListener(new Vi
@Override
public void onClick(View
int a=Integer.parseI
int b=Integer.parseI
int c=a-b;
t3.setText(String.va
}
});
b3.setOnClickListener(new Vi
@Override
public void onClick(View
int a=Integer.parseI
int b=Integer.parseI
int c=a*b;
t3.setText(String.va
}
});
b4.setOnClickListener(new Vi
@Override
public void onClick(View
int a=Integer.parseI
int b=Integer.parseI
int c=a/b;
t3.setText(String.va
}
});
Calculator
App
checkbox
Basic widgets:
checkbox
Example of
checkbox
Example of
checkbox
radio buttons
radio buttons
Example
Example
Example
Sr.No Layout & Description
1 Linear Layout
LinearLayout is a view group that aligns all children
in a single direction, vertically or horizontally.
2 Relative Layout
RelativeLayout is a view group that displays child
views in relative positions.
3 Table Layout
TableLayout is a view that groups views into rows and
Layouts 4
columns.
Absolute Layout
AbsoluteLayout enables you to specify the exact
location of its children.
There are number of Layouts 5 Frame Layout
The FrameLayout is a placeholder on screen that you
provided by Android which you can use to display a single view.
will use in almost all the
6 List View
Android applications to provide ListView is a view group that displays a list of
different view, look and feel. scrollable items.
7 Grid View
GridView is a ViewGroup that displays items in a two-
dimensional, scrollable grid.
Linear layout
LinearLayout aligns all children in a single direction
— vertically or horizontally depending on the
android:orientation attribute.
All children are stacked one after the other, so a
•vertical list will only have one child per row, no matter
how wide they are, and a
•horizontal list will only be one row high. A
LinearLayout respects margins between children and
the gravity(right, center, or left alignment) of each
child.
Relative layout
1.RelativeLayoutlets child views specify their position relative to the
parent view or to each other(specified by ID).
2. You can align two elements by right border, or make one below
another, centered in the screen, centered left, and so on.
3.Elements are rendered in the order given, so if the first element is
centered in the screen, other elements aligning themselves to that
element will be aligned relative to screen center.
4.Also, because of this ordering, if using XML to specify this layout, the
element that you will reference (in order to position other view objects)
must be listed in the XML file before you refer to it from the other views via
its reference ID.
Table layouts
1. TableLayout positions its children
into rows and columns.
2. TableLayout containers do not
display border lines.
3.The table will have as many
columns as the row with the most
cells.
4. A TableRow object defines a
single row in the table.
5.A row has zero or more cells, each
cell is defined by any kind of other
View.
6. A cell may also be a ViewGroup
object
Table layout
(example)
Absolute
layout
• A layout that 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 .
FrameLayou
t
• Android FrameLayout is
one of the useful layouts
provided by android
system, which allows User
Interface widgets to be
overlapped with each
other. Frame Layout is
designed to block out an
area on the screen to
display a single item.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/imgvw1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitEnd"
android:src="@drawable/a1" />
<TextView
android:id="@+id/txtvw1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:background="#4C374A"
android:padding="10dp"
android:text="Grand Palace, Bangkok"
android:textColor="#FFFFFF"
android:textSize="40sp" />
<TextView
android:id="@+id/txtvw2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:background="#AA000000"
android:padding="10dp"
android:text="21/Aug/2017"
android:textColor="#FFFFFF"
android:textSize="18sp" />
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
• ListView is a view-group that displays a list
of scrollable items.
• The items in the list are automatically
inserted into the list using an Adapter.
• The Adapter pulls content from a source
such as an array or database query, and
converts each item selection result into a
view that is placed into the list.
Static ListView
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ListView
android:layout_width="313dp"
android:layout_height="399dp"
tools:layout_editor_absoluteX="1dp"
tools:layout_editor_absoluteY="1dp"
android:entries="@array/items"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
public class MainActivity extends AppCompatActivity {
ListView l1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
l1=(ListView)findViewById(R.id.list1);
ArrayList al=new ArrayList();
al.add("Android");
al.add("OS");
al.add("Java");
ArrayAdapter ad=new ArrayAdapter(this, android.R.layout.simple_list_item_1,al);
l1.setAdapter(ad);
}
}
Event Handling on ListView
public class MainActivity extends AppCompatActivity {
ListView l1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
l1=(ListView)findViewById(R.id.list1);
ArrayList al=new ArrayList();
al.add("Android");
al.add("OS");
al.add("Java");
ArrayAdapter ad=new ArrayAdapter(this, android.R.layout.simple_list_item_1,al);
l1.setAdapter(ad);
l1.setOnItemClickListener(new ListView.OnItemClickListener()
{
public void onItemClick(AdapterView parent, View view, int position, long id) {
String selectedItem = (String) parent.getItemAtPosition(position);
Toast.makeText(MainActivity.this, selectedItem, Toast.LENGTH_SHORT).show();
}}
);
}
}
GridView
In android GridView is a view group that display items in two
dimensional scrolling grid (rows and columns), the grid items
are not necessarily predetermined but they are automatically
inserted to the layout using a ListAdapter. Users can then
select any grid item by clicking on it.
<GridView
android:id="@+id/simpleGridView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numColumns="3"/>
Examples
Example 2
