Unit III [12T+3L]

•User interfaces development in android - building UI completely

in code, UI using XML, UI in XML with code
• Android's common controls - Text controls, button controls,
checkbox control, radio button controls, image view, date and time
controls, map view control
•understanding adapters, adapter views, list view, grid view
• spinner control, gallery control
• styles and themes
• Understanding layout managers - linear layout manager, table
layout manager, relative layout manager, frame layout manager, grid
layout manager.
 Android user interface

• Android UI is everything that the user can see

and interact with Edit text, Buttons, Icons, and
Navigations

• Android SDK provides text fields, buttons, lists,

grids, and so on. In addition, Android provides a
collection of controls that are appropriate for
mobile devices. View

• At the heart of the common controls are two

 classes: android.view.View and
android.view.ViewGroup.
• View is an object that draws something on
the screen that the user can interact with
• View group is an object that holds other view
objects in order to define the layout of the
interface
• The UI for each component of your app is
defined using a hierarchy of View and viewgroup
objects
Term Description

View, widget , Each of these represents a UI element. Examples include

control a button, a grid, a list, a window, a dialog box and so
on

Container This is a view used to contain other views. For example,

a grid can be considered a container because it
contains cells, each of which is a view

Layout This is a visual arrangement of containers and views

and can include other layout
 Building a UI Completely in Code

•You can choose from several approaches to build UIs in Android.

•You can construct UIs entirely in code. You can also define UIs
in XML.
•You can even combine the two—define the UI in XML and then
refer to it, and modify it, in code.
•Java code is ideal for creating UI dynamically at run time
•It is useful in situations where the UI may appear differently each
time the activity executes subject to external factors
 Building UI completely in XML
•Key advantage of xml approach includes the ability to use the
Graphical Layout tool , which itself generates xml resources
•Once an application has been created , changes to user interface
screens can be made by simply modifying XML file without
recompiling app
 UI in XML with code
• We should design our UIs in XML and then reference the
controls from code.
• This approach enables us to bind dynamic data to the controls
defined at design time.
• This is the recommended approach. It is fairly easy to build layouts
in
TextView,EditView,AutocompleteTextView
•Text Controls
•These controls provide an editable text field
•Different categories
• TextView, EditText, AutoCompleteTextView
•TextView
•TextView is the most widely used view used to show
pre- defined text on display screen.
•A TextView is a complete text editor, however the
basic class is configured to not allow editing.
 Android common controls
•TextView
•android:editable
•If set to true, specifies that this TextView has an
input method.

•xml
• <TextView
android:id="@+id/text_id"
android:layout_width="wrap_cont
ent"
android:layout_height="wrap_cont
ent" android:text="I am a
TextView" />
•create an instance of the Control object and capture it
from the layout
•TextView myText = (TextView) findViewById(R.id.text_id);
 EditText()
•A EditText is an overlay over TextView that
configures itself to be editable.
• It is the predefined subclass of TextView that includes
rich editing capabilities.
EditText Attributes
•It inherits all the attributes of TextView
•inputType: to add the input method for text fields.
• Values : none(text is not editable),text, textAutoCorrect,
textAutoComplete,textPassword,textEmailAddress,phone
•gravity : The gravity attribute is an optional attribute which
is used to control the alignment of the text like left, right,
center, top, bottom, center_vertical , center_horizontal etc.
•textStyle : textStyle attribute is used to set the text style of
a edit text. The possible text styles are bold, italic and
normal
<EditText android:id="@+id/simpleEditText“
android:layout_width=“match_parent“
android:layout_height="wrap_content“
android:hint="Enter Your Name Here"
android:padding="15dp" android:textColorHint="#fff"
android:textStyle="bold|italic"
android:background="#000"/><!--set background color black-->
Retrieving / Getting the Value From EditText In Java Class:
EditText editText =
(EditText)findViewById(R.id.simpleEditText);
String editTextValue = editText.getText().toString();
AutoCompleteTextView
•The AutoCompleteTextView control is a TextView with
auto- complete functionality.
•In other words, as the user types in the TextView, the
control can display suggestions for selection
•To implement autocomplete ,we have to specify an
adapter that provides text suggestions
• Steps
•Add AutoCompleteTextView to the layout
•<?xml version=“1,0” encoding=“utf-8”?>
<AutoCompleteTextView
android:id=“@+id/autocomplete_country”
android:layout_width=“fill_parent”
android:layout_height=“wrap_content”/>
•Define the array that contains all text suggestions

• <?xml version=“1,0” encoding=“utf-8”?>

<resources>
<string-array name=“countries_array”>
<item>Antartica</item>
<item>China</item>
<item>India</item>
<item>Singapore</item>
</string-array></resources>
•In the Activity specify the adapter that supplies suggestions
• //get reference to the AutoCompleteTextView in the layout

AutoCompleteTextView textView=
(AutoCompleteTextView)findViewById(R.id.autocomplete_coun
try);

//Get the string array

String[]
countries=getResources().getStringArray(R.array.countries_array);

//create adapter and set it to the AutoCompleteTextView

ArrayAdapter<string> adapter= new
ArrayAdapter<string>(this,android.R.layout.simple_list_item_1,countr
ies);

textView.setAdapter(adapter);
• Assign the adapter to the AutoCompleteTextView by calling setAdapter()
 Button ControlsBasic Button,Image Button
Toggle
•Types of button controls:
•The basic button, the image button, and the toggle button
The Button Control
• The basic button class in Android is android.widget.Button

Xml code

•<Button
android:id="@+id/button1"
android:text="@string/basicBtnLabel"
android:layout_width=“match_parent"
android:layout_height="wrap_content" />
 Button Controls
•onClick:- when user clicks a button.
•Add android:onClick attribute to button in xml
•Value of attribute is the name of method to call on click

android:onClick=“sendMessage”
//called when user touches the button

public void sendMessage(View view){

//do button click actions
}
•Another method
•Declare event handler programmatically

•btn = (Button) findViewById(R.id.button);

btn.setOnClickListener(new OnClickListener() {
public void onClick(View v)
{
//do something
}
}
•The ImageButton Control
• Android provides an image button via
android.widget.ImageButton. xml
•<ImageButton
android:id="@+id/imageButton2"
android:layout_width="wrap_cont
ent“
android:layout_height="wrap_cont
ent"
android:onClick="myClickHandler"
android:src="@drawable/icon" />

Java
•ImageButton imageButton2 =
(ImageButton)this.findViewById(R.id.imageButton2);
imageButton2.setImageResource(R.drawable.icon);
 •Button With text and icon

•<Button
android:id="@+id/button1"
android:layout_width=“match_parent"
android:layout_height="wrap_content“
android:text="@string/button_text“
android:drawableLeft="@drawable/icon" />
•The ToggleButton Control
• ToggleButton control, is a two-state button
•This button can be in either the On or Off state.
• ToggleButton’s default behavior is to show a green bar when
in the On state and a grayed-out bar when in the Off state.
•Default behavior also sets the button’s text to On when it’s in
the On state and Off when it’s in the Off state.
•You can modify the text for the ToggleButton if On/Off is
not appropriate for your application
• <ToggleButton
android:id="@+id/cctglBtn"
android:layout_width="wrap_conte
nt"
android:layout_height="wrap_cont
ent" android:textOn="Stop"
android:textOff="Run"/>
The CheckBox Control Radio Button
Controls Image View DateandTime
picker
•Check box allows user to select one or more options from a set
•It is a type of 2 state button either checked or unchecked
•Check box class in Android is android.widget.CheckBox
•Methods
•public Boolean isChecked() returns true if it is checked
•public void setChecked(Boolean status) changes state of
checkbox
 The CheckBox Control
• <CheckBox
android:id="@+id/chickenCB"
android:text="Chicken"
android:checked="true"
android:layout_width=“wrap_content“
android:layout_height="wrap_content" />
<CheckBox
android:id="@+id/fishCB“
android:text="Fish"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
•//initiate a check box
CheckBox simpleCheckBox = (CheckBox) findViewById
(R.id.simpleCheckBox);
//check current state of a check box (true or false)
Boolean checkBoxState = simpleCheckBox.isChecked();
Event listener
•CheckBox checkBoxState= (CheckBox) findViewById
(simpleCheckBox);
checkBoxState.setOnClickListener(new OnClickListener()
{ public void onClick(View v) {
//do something
}
}
 Radio button
• A radio button gives the users several choices and forces them
to select a single item
•To enforce this single-selection model, radio buttons generally
belong to a group, and each group is forced to have only one
item selected at a time.
• To create a group of radio buttons in Android, first create a
RadioGroup, and then populate the group with radio
buttons
•Implement a radio group using android.widget.RadioGroup
and a radio button using android.widget.RadioButton.
<RadioGroup
android:id="@+id/rBtnGrp"
android:layout_width="wrap_content"
android:layout_height="wrap_content“
android:orientation="vertical" >

<RadioButton
android:id="@+id/chRBtn" android:text="Chicken" android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<RadioButton android:id="@+id/fishRBtn" android:text="Fish"

android:checked="true" android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<RadioButton android:id="@+id/stkRBtn" android:text="Steak"

android:layout_width="wrap_content" android:layout_height="wrap_content"/>

</RadioGroup>
To retrieve value using java code
• RadioButton food=(RadioButton )findViewById(R.id.chRBtn);
• Boolean state=chRBtn.isChecked();
• Click events can be handled using
onClick()
 ImageView
• This is used to display an image, where the image can come
from a file, a content provider, or a resource such as a
drawable.
• we can even specify a color, and the ImageView will
display that color.
• Implement using android.widget.ImageView;
• <ImageView
android:id="@+id/image1"
android:layout_width="wrap_c
ontent"
android:layout_height="wrap_c
ontent"
android:src="@drawable/icon"
/>
• ImageView
image=(ImageView)findViewById(R.id.imageView
1); image.setImageResource(R.drawable.capture);
• Click events can be handled using onClick()
Date and Time Controls
•Android provides controls for the user to pick a time or pick
a date as ready-to-use dialogs
Android Date Picker
•Android Date Picker allows to select the date consisting
of day, month and year in your custom user interface.
•For this functionality android provides
DatePicker. Attributes of DatePicker
1. id: id is an attribute used to uniquely identify a date picker.
2. datePickerMode: This attribute is used to set the
Date Picker in mode either spinner or calendar.
3. background: background attribute is used to set
the background of a date picker.
4. padding: padding attribute is used to set the padding
from left, right, top or bottom for a date picker.
Methods of DatePicker
1.setSpinnersShown(boolean shown):used to set whether
the spinner of the date picker in shown or not.

2. GetDayOfMonth()
3. getMonth()
4. getYear()
 • <DatePicker
android:id="@+id/simpleDatePicker“
android:layout_width="wrap_content“
android:layout_height="wrap_content"
android:datePickerMode="spinner"/>

•simpleDatePicker = (DatePicker) findViewById(R.id.simpleDatePicker);

•String day = "Day = " +
simpleDatePicker.getDayOfMonth(); String month =
"Month = " + (simpleDatePicker.getMonth() + 1); String
year = "Year = " + simpleDatePicker.getYear();
 TimePicker
•TimePicker is a widget used for selecting the time of the day
in either AM/PM mode or 24 hours mode.
• The displayed time consist of hours, minutes and clock format.
•Implement using android.widget.TimePicker
•Atttribute:timePickerMode: spinner or clock
•Methods of TimePicker:
• setHour(Integer hour): used to set the current hours in a time picker.
• setMinute(Integer minute):used to set the current minutes in a
time picker.
• setIs24HourView(Boolean is24HourView):
• is24HourView():
• setOnTimeChangedListener(TimePicker.OnTimeChangedListener):
to set the callback that indicates the time has been adjusted by the user
<TimePicker android:id="@+id/simpleTimePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp" android:background="#090"
android:padding="20dp" android:timePickerMode="spinner" />

simpleTimePicker = (TimePicker) findViewById(R.id.simpleTimePicker);

simpleTimePicker.setIs24HourView(false); // used to display AM/PM mode
// perform set on time changed listener event
simpleTimePicker.setOnTimeChangedListener(new
TimePicker.OnTimeChangedListener() { @Override
public void onTimeChanged(TimePicker view, int hourOfDay, int minute)
{ // code
}});