Mobile Application Development in

Android

Bangladesh-Korea Information Access Center (IAC)

Department of Computer Science and Engineering (CSE)
Bangladesh University of Engineering and Technology (BUET)
E-mail: arup@cse.buet.ac.bd
Advanced Widgets

USER INTERFACES
Spinners

Spinners provide a quick way to select one

value from a set.

In the default state, a spinner shows its

currently selected value.

Touching the spinner displays a dropdown

menu with all other available values, from
which the user can select a new one.
 Spinner Example

<Spinner
android:id="@+id/planets_spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
Populating Spinner

• The choices you provide for the spinner can come

from any source, but must be provided through an
SpinnerAdapter like either of the followings
– An ArrayAdapter if the choices are available in an array
– A CursorAdapter if the choices are available from a database
query.
Static Data Binding using Resource File

<resources>
<string-array name="planets_array">
<item>Mercury</item>
<item>Venus</item>
<item>Earth</item>
<item>Mars</item>
<item>Jupiter</item>
<item>Saturn</item>
<item>Uranus</item>
<item>Neptune</item>
</string-array>
</resources>
Static Data Binding using Resource File

Spinner spinner = (Spinner) findViewById(R.id.spinner);

// Create an ArrayAdapter using the string array and a default spinner
layout
ArrayAdapter<CharSequence> adapter =
ArrayAdapter.createFromResource(this,
R.array.planets_array,
android.R.layout.simple_spinner_item);
// Specify the layout to use when the list of choices appears
adapter.setDropDownViewResource(android.R.layout.simple_s
pinner_dropdown_item);
// Apply the adapter to the spinner
spinner.setAdapter(adapter);
Static Data Binding using String
Spinner spinner = (Spinner) findViewById(R.id.planets_spinner);
//Creating the ArrayList
ArrayList<String> list = new ArrayList<String>();
list.add("Number");
list.add("Variable");
// Create an ArrayAdapter using the string array and a default spinner layout
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item, list);
// Specify the layout to use when the list of choices appears
adapter.setDropDownViewResource(android.R.layout.simple_spinner
_dropdown_item);
// Apply the adapter to the spinner
spinner.setAdapter(adapter);
Spinner Event Handling
spinner.setOnItemSelectedListener(new OnItemSelectedListener() {

public void onItemSelected(AdapterView<?> parent, View v, int

pos, long id) {
// TODO Auto-generated method stub
Toast.makeText(parent.getContext(),
parent.getItemAtPosition(pos).toString(), Toast.LENGTH_LONG).show();
}

public void onNothingSelected(AdapterView<?> arg0) {

// TODO Auto-generated method stub

});
AutocompleteTextView

Provides user a
suggestion other than
the default dictionary

Programmer can
provide different kind of
sources for suggestion
 AutocompleteTextView Example

<AutoCompleteTextView
android:id="@+id/autocomplete_country"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
Static Data Binding using Resource File

<resources>
<string-array name=“countries_array">
<item>New Calendonia</item>
<item>Bangladesh</item>
<item>New Zealand</item>
<item>England</item>
<item>Papua New Guinea</item>
<item>Japan</item>
<item>Korea</item>
<item>Australia</item>
</string-array>
</resources>
Binding the resource to Widget
// Get a reference to the AutoCompleteTextView in the layout
AutoCompleteTextView textView =
(AutoCompleteTextView)
findViewById(R.id.autocomplete_country);
// Get the string array
String[] countries =
getResources().getStringArray(R.array.countries_array);
// Create the adapter and set it to the AutoCompleteTextView
ArrayAdapter<String> adapter =
new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, countries);
textView.setAdapter(adapter);
CheckBox

Checkboxes allow the user to

select one or more options from a
set.

Typically, you should present each

checkbox option in a vertical list.

Each checkbox is managed

separately and you must register
a click listener for each one.
 CheckBox Example

<CheckBox android:id="@+id/checkbox_meat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/meat"
android:onClick="onCheckboxClicked"/>
<CheckBox android:id="@+id/checkbox_cheese"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cheese"
android:onClick="onCheckboxClicked"/>
CheckBox Event Handling
public void onCheckboxClicked(View view) {
// Is the view now checked?
boolean checked = (CheckBox) view).isChecked();
// Check which checkbox was clicked
switch(view.getId()) {
case R.id.checkbox_meat:
if (checked)
// Put some meat on the sandwich
else
// Remove the meat
break;
case R.id.checkbox_cheese:
if (checked)
// Cheese me
else
// I'm lactose intolerant
break;
// TODO: Veggie sandwich
}
}
RadioButton

Radio buttons allow the user to select one

option from a set.

To create each radio button option, create a

RadioButton in your layout. However, because
radio buttons are mutually exclusive, you must
group them together inside a RadioGroup.

By grouping them together, the system

ensures that only one radio button can be
selected at a time.
 RadioButton Example

<RadioGroup
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton android:id="@+id/radio_pirates"
android:layout_width="wrap_content" The RadioGroup is a subclass
android:layout_height="wrap_content" of LinearLayout that has a
android:text="@string/pirates" vertical orientation by default.
android:onClick="onRadioButtonClicked"/>
<RadioButton android:id="@+id/radio_ninjas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ninjas"
android:onClick="onRadioButtonClicked"/>
</RadioGroup>
RadioButton Event Handling
public void onRadioButtonClicked(View view) {
// Is the button now checked?
boolean checked = (RadioButton) view).isChecked();

// Check which radio button was clicked

switch(view.getId()) {
case R.id.radio_pirates:
if (checked)
// Pirates are the best
break;
case R.id.radio_ninjas:
if (checked)
// Ninjas rule
break;
}
}
Picker

Android provides controls for the user to pick a

time or pick a date as ready-to-use dialogs.

Each picker provides controls for selecting each

part of the time (hour, minute, AM/PM) or date
(month, day, year).

Pickers ensure that your users can pick a time or

date that is valid, formatted correctly, and adjusted
to the user's locale.
TimePicker

Used to
select
different
component
s of time
 TimePicker Example

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="pick_time"
android:onClick="showTimePickerDialog" />
Time Picker Class
public class TimePickerFragment extends DialogFragment implements
OnTimeSetListener {

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
// Use the current time as the default values for the picker
final Calendar c = Calendar.getInstance();
int hour = c.get(Calendar.HOUR_OF_DAY);
int minute = c.get(Calendar.MINUTE);

// Create a new instance of TimePickerDialog and return it

return new TimePickerDialog(getActivity(), this, hour, minute,
DateFormat.is24HourFormat(getActivity()));
}

public void onTimeSet(TimePicker view, int hourOfDay, int minute) {

// Do something with the time chosen by the user

}
}
Using Time Picker Class
public class TabTutorialActivity extends FragmentActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
…
}

public void showTimePickerDialog(View v) {

DialogFragment newFragment = new TimePickerFragment();
newFragment.show(getSupportFragmentManager(),
"timePicker");
}
}
DatePicker

Used to
select
different
component
s of date
 DatePicker Example

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="pick_date"
android:onClick="showDatePickerDialog" />
Date Picker Class
public static class DatePickerFragment extends DialogFragment
implements DatePickerDialog.OnDateSetListener {

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
// Use the current date as the default date in the picker
final Calendar c = Calendar.getInstance();
int year = c.get(Calendar.YEAR);
int month = c.get(Calendar.MONTH);
int day = c.get(Calendar.DAY_OF_MONTH);

// Create a new instance of DatePickerDialog and return it

return new DatePickerDialog(getActivity(), this, year, month, day);
}

public void onDateSet(DatePicker view, int year, int month, int day) {
// Do something with the date chosen by the user
}
}
Using Date Picker Class
public class TabTutorialActivity extends FragmentActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
…
}

public void showDatePickerDialog(View v) {

DialogFragment newFragment = new DatePickerFragment();
newFragment.show(getSupportFragmentManager(),
“datePicker");
}
}
SlidingDrawer

Hides content out of the screen and allows the user to drag a handle to bring
the content on screen.

Can be used vertically or horizontally.

Should be used as an overlay inside layouts. This means SlidingDrawer should

only be used inside of a FrameLayout or a RelativeLayout for instance.

The size of the SlidingDrawer defines how much space the content will occupy
once slid out so SlidingDrawer should usually use fill_parent for both its
dimensions
 SlidingDrawer Example

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
….
<SlidingDrawer
android:id="@+id/drawer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:handle="@+id/handle"
android:content="@+id/content"
>
<ImageView
android:id="@id/handle"
android:src="@drawable/ic_launcher"/>
<LinearLayout
android:id="@id/content"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
…..
</LinearLayout>
</SlidingDrawer>
</FrameLayout>
Vertical ScrollView

ScrollView gives us a scrollable layout for large data.

ScrollView can have only one child control

We make a container (Linear, relative, Table Layouts) the

child of the ScrollView and put all the controls inside
this child.
 Vertical ScrollView Example

<?xml version="1.0" encoding="utf-8"?>

<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android
"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

......
</LinearLayout>
</ScrollView>
Horizontal ScrollView

ScrollView gives us a scrollable layout for large data.

ScrollView can have only one child control

We make a container (Linear, relative, Table Layouts) the

child of the ScrollView and put all the controls inside
this child.
 Vertical ScrollView Example

<?xml version="1.0" encoding="utf-8"?>

<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:orientation=“horizontal“
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/txt" />
………
</LinearLayout>
</ HorizontalScrollView>
Activity with Nested ScrollView in a
Layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
Use Relative Layout in the
android:orientation="vertical" > Parent
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</EditText>
……..
</LinearLayout>
Activity with Nested ScrollView in a
Layout
<HorizontalScrollView
android:id="@+id/horizontalScrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/linearLayout1">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />……
</LinearLayout>
</HorizontalScrollView>
</RelativeLayout>
Tab Selection

When many pieces of information must be

displayed in a single app, the Tab Widget
could be used to make the user aware of
the pieces but show only a portion at the
time
Tab Components

• TabHost
• The main container for the tab
buttons and tab contents
Three • TabWidget
component • Implements the row of tab buttons,
which contain text labels and
s optionally contain icons
• FrameLayout
• The container for the tab contents
Tab Components

Tab1 Tab2 Tab3 Tab Widgets

TabHost
FrameLayout1 FrameLayouts
Tab Layout Example
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tabHost">
<TabWidget
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@android:id/tabs"
/>
<FrameLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@android:id/tabcontent"
>
Tab Layout Example
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/tab1"
android:orientation="vertical"
android:paddingTop="60dp">
<TextView android:layout_width="fill_parent"
android:layout_height="100px"
android:text="This is tab1"
android:id="@+id/txt1"
/>
……
</LinearLayout>
<LinearLayout
..Second Tab Content
</LinearLayout>
</FrameLayout>
</TabHost>
Tab Layout Changing content from Code

public class TabTutorialFinalActivity extends Activity {

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
….
TabHost tabHost=(TabHost)findViewById(R.id.tabHost);
tabHost.setup();

TabSpec spec1=tabHost.newTabSpec("Tab 1");

spec1.setContent(R.id.tab1);
spec1.setIndicator("Tab 1");
TabSpec spec2=tabHost.newTabSpec("Tab 2");
spec2.setIndicator("Tab 2",getResources().getDrawable(R.drawable.sun));
spec2.setContent(R.id.tab2);
…..
tabHost.addTab(spec1);
tabHost.addTab(spec2);
….
tabHost.setCurrentTab(0);
}
}
Attaching a Listener to Tab Change
tabHost.setOnTabChangedListener(new OnTabChangeListener() {

public void onTabChanged(String tabId) {

// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "I am at: "+tabId,
Toast.LENGTH_SHORT).show();
}
});
Storing Separate Tab Layout in Different
File
<?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"
layout3.xml
android:id="@+id/tab3" file
android:orientation="vertical" Under
android:paddingTop="60dp" layout folder
>
……

</LinearLayout>
Including the file in Tab
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tabHost">
<TabWidget
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@android:id/tabs"
/>
<FrameLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@android:id/tabcontent"
>
<include
layout="@layout/layout3"/> Including the
</FrameLayout> layout
</TabHost>
Menu

Menus are a common user interface component

in many types of applications. To provide a
familiar and consistent user experience, you
should use the Menu APIs to present user actions
and other options in your activities.
Menu Types

• Options Menu
• Invoked by hardware Menu

Two
button
• Context Menu
• A floating list of menu items that
Types appears when a user touches and
holds a particular item displayed
in the view, which has a menu
associated with it.
Options Menu
The Menu File
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/file"
android:title="File"
android:icon="@drawable/ic_launcher" >
<menu>
<item android:id="@+id/create_new"
android:title="Create New" />
<item android:id="@+id/open"
android:title="Open" />
Submenu
</menu>
</item>
<item android:id="@+id/menu_bookmark"
android:icon="@drawable/ic_launcher"
android:title="Bookmark" /> menu.xml file in layout
……
folder
</menu>
Attaching the Options Menu

public class MenuTutorialActivity extends

Activity {
@Override
public boolean onCreateOptionsMenu(Menu
menu) {
MenuInflater inflater =
getMenuInflater();
inflater.inflate(R.layout.menu, menu);
return true;
}
Actionlistener for Options Menu
public class MenuTutorialActivity extends Activity {
…………..
@Override
public boolean onOptionsItemSelected(MenuItem item)
{

switch (item.getItemId())
{
case R.id.menu_bookmark:
Toast.makeText(getApplicationContext(), "Bookmark is
Selected", Toast.LENGTH_SHORT).show();
return true;
….
default:
return super.onOptionsItemSelected(item);
}
}
Context Menu
Attaching the Context Menu

public class MenuTutorialActivity extends

Activity {
@Override
public void
onCreateContextMenu(ContextMenu menu, View v,
ContextMenuInfo menuInfo) {
super.onCreateContextMenu(menu, v,
menuInfo);
MenuInflater inflater =
getMenuInflater();
inflater.inflate(R.layout.menu, menu);
• }
Actionlistener for Context Menu
public class MenuTutorialActivity extends Activity {
…………..
@Override
public boolean onContextItemSelected(MenuItem item) {
switch(item.getItemId()) {
case R.id.menu_save:
Toast.makeText(getApplicationContext(), "Selected in EditText1",
Toast.LENGTH_SHORT).show();
return true;
default:
return super.onContextItemSelected(item);
}
}
}
Getting the View which invoke the
Context Menu
public class MenuTutorialActivity extends Activity {
…..
public View contextView; Create a public reference
public void onCreateContextMenu(ContextMenu menu, View v,
ContextMenuInfo menuInfo) {
...
this.contextView = v; Store it in create
}
public boolean onContextItemSelected(MenuItem item) {
if(contextView.getId() == R.id.editText1)
{
//do the necessary processing
EditText editText1 = (EditText)this.contextView;
editText1.setTypeface(null, Typeface.BOLD_ITALIC);
}
} Use this