3/10/2012

Advanced Google
Android Development
Lesson #1

Welcome Back!
Over the next set of sessions, we’re going to look at more
advanced programming topics of the Android OS.

We’ll look at:

• Additional UI elements.
• Styling UI elements.
• Google Maps and GPS.
• Play audio and video.
• Gestures.
• SQLite database engine.
• File operations.
• Phone Access and SMS.

1
 3/10/2012

What We Know So Far

The next several slides will serve as a brief overview of what we
learned in the first Android course.

Android is an operating system based on Linux, developed by

Google and the Open Handset Alliance.

The basic requirements for running an Android development

environment are:

• Windows XP, Vista, or Windows 7 (32bit or 64bit)

• Mac OS X 10.5.8 or higher (Intel platform only)
• Linux (32bit or 64bit)

What We Know So Far

The following components are necessary in order to develop
Android applications.

• Android SDK (latest version) – This provides all of the

necessary libraries and sample code necessary for development.
• Java Development Kit (JDK) Version 6* – The Java
Development kit used for Java runtime and development.
• Eclipse IDE Version 3.5, 3.6, or 3.7* – Eclipse is the editor
that we’ll be using throughout the course. It is possible to build
Android apps without this, but because it makes life so much
easier, it is strongly recommended.
• Android Development Tools (ADT) – This is a plug-in that is
installed into Eclipse, which provides Eclipse with access to all of
the Android tools and libraries needed for development.

Instructions for setting up your development environment are

available here: http://developer.android.com/sdk/index.html

* Use 32-bit versions of the software, even if you’re running a 64-bit OS.

2
 3/10/2012

What We Know So Far

Once your environment is set up, you’ll need to create an Android
emulator, which we’ll use for testing the applications we write. The
emulator is known as an AVD (Android Virtual Device), and can be
set up to emulate specific versions of the Android OS, and / or
Google API.

What We Know So Far

Because Android uses the Java programming language, it is
important to be familiar with Java itself, before diving deep into the
Android SDK. You should be familiar with the following:

• Variables and variable data types, including casting, assignment,

concatenation, and escape sequences.
• If statements, switch statements, and loops.
• Classes, Methods, and Packages.

The above represents a bare minimum. The more you know about
Java, the easier Android development will become.

3
 3/10/2012

What We Know So Far

Android applications are made up of specific parts:

• Activity – This is our main “window”, if you will. The user

interface that the user will work with while using our application.

• Services – A service is a background task for your application.

• Content Providers – A content provider is a way for you to

package your data for use by other applications on the user’s
device. Similarly, stock content providers, such as Contacts,
allows you access information not created by your application on
the device.

• Intents - Intents are events that can be triggered by the

Android system or by your application. For example, an intent
launches your activity, which brings up the GUI your users work
with.

What We Know So Far

Layouts on the Android OS can be
created programmatically, but most
often are created via XML files.

These XML files contain Layouts and

Views, and can be set up to support a
specific display layout. The Android SDK
provides a visual editor for manipulating
the UI, which is accessible via Eclipse.

Layouts are containers such as

GridView or HorizontalScrollView or
LinearLayout.

Views are the controls that users

interact with such as buttons,
checkboxes, and text boxes.

4
 3/10/2012

More Advanced UI
Today, we’ll have a look at some additional UI elements that we
have not had a chance to work with yet.

Specifically, we’ll look at:

• Tabs
• Menus
• Alerts & Dialogs

While using these new elements, we’ll also have a chance to

refresh our knowledge of elements we have already covered.

Tabs
Tabs are a common interface element to use when you have lots of
information to display to the user, or when your application performs
numerous tasks, and you want to separate them out from one
another. All tabs can share the same activity, or launch new
activities as necessary.

5
 3/10/2012

Tabs
Tabs can use icons, and Google provides a complete specification on
the design and implementation of the icons for all past and current
versions of the SDK.

http://developer.android.com/guide/practices/ui_guidelines/icon_design_tab.html

Basically, tab icons created for Android 2.0 and higher should go into drawable-xxxx-v5
folder where xxxx is either hdpi, mdpi, or ldpi (high density, medium density, or low
density). Older versions of Android store their icons in drawable-hdpi, drawable-mdpi,
and drawable-ldpi folders.

Tab icons should have two states, selected and unselected. Each image (PNG file) for
the icon should be named in the following way: name_selected.png or
name_unselected.png, where name is the name you want to give your icon.

Example: phone_selected.png, phone_unselected.png.

Finally, the image size for the icons should be as follows:

48x48 for hdpi, 32x32 for mdpi, and 24x24 for ldpi.
The actual icon graphic within the abive sized images should be:
42x42 for hdpi, 28x28 for mdpi, and 22x22 for ldpi.

Tabs
You will also need to create Selector XML file that defines the icon
to use for the normal and selected state of each of your tabs. The
XML file is stored, along with the icons, in the appropriate drawable
folder, and can be used in code to set the tab’s icons.

Example:

<?xml version="1.0" encoding="utf‐8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!‐‐ selected state ‐‐>
<item android:drawable="@drawable/icon1_selected"
android:state_selected="true"
android:state_pressed="false" />
<!‐‐ unselected state (default) ‐‐>
<item android:drawable="@drawable/icon1_unselected" />
</selector>

6
 3/10/2012

Tabs Layout
The layout xml file for the tabbed interface will need to host several
layouts in order to work correctly:
TabHost TabHost, LinearLayout and TabWidget
provide the outer structure for your
LinearLayout
tabs, while the FrameLayout provides
TabWidget the area for each tab’s content. Each
tab’s layout can be created separately
FrameLayout and then brought into the tabbed
interface.
Tab 1 Layout
Each tab’s layout uses an id such as
Tab 2 Layout “tab1”, “tab2” etc., so we can
reference this in code.
Tab 3 Layout

Tabs Layout
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"> 

<TabWidget android:id="@android:id/tabs"
android:layout_height="wrap_content" android:layout_width="fill_parent"/>

<FrameLayout android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<LinearLayout…

LinearLayouts / Views for each of your tabs

</LinearLayout>

</FrameLayout>
</LinearLayout>  
</TabHost>

7
 3/10/2012

Tabs Code
In our main activity, we need to locate the TabHost object, then
setup our tabs based on what we have provided in XML.

TabHost oTBHost=(TabHost)findViewById(R.id.tabhost);
oTBHost.setup();
TabHost.TabSpec oSpec= oTBHost.newTabSpec(“spec1");

oSpec.setContent(R.id.tab1);
oSpec.setIndicator("Tab 1“, getResources().getDrawable(R.drawable.icon1));
oTBHost.addTab(oSpec);

oSpec=oTBHost.newTabSpec(“spec2");
oSpec.setContent(R.id.tab2);
oSpec.setIndicator("Tab 2", getResources().getDrawable(R.drawable.icon2));
tabs.addTab(spec);
…

Tabs
Within the same activity, you can then proceed with capturing all
additional user input, button click events, and other interactions.

This approach to working with tabs is convenient because it allows

you to work with all of the controls across all of your tabs within
the same activity, hence you have the ability to share data
between tabs easily.

8
 3/10/2012

Menus
Menus are a great way to allow your application to branch to other
activities, without taking any space within your current activity.

A menu can have an unlimited number of options, up to 6 of which

fit on the main screen. If more than 6 options exist, the menu will
create a “More” option automatically, with additional choices
displayed in a list.

Menus
Menu XML is stored in res  menu folder, with the file name
typically called “menu.xml”.

The structure for a menu looks like this:

<?xml version="1.0" encoding="utf‐8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@+id/mnu1" android:title="Menu 1" android:icon="@drawable/menu_icon1"/>
<item android:id="@+id/mnu2" android:title="Menu 2" android:icon="@drawable/menu_icon2" />
<item android:id="@+id/mnu3" android:title="Menu 3" android:icon="@drawable/menu_icon3" /> 
<item android:id="@+id/mnu4" android:title="Menu 4" android:icon="@drawable/menu_icon4"/>
<item android:id="@+id/mnu5" android:title="Menu 5" android:icon="@drawable/menu_icon5" />
<item android:id="@+id/mnu6" android:title="Menu 6" android:icon="@drawable/menu_icon6" /> 
<item android:id="@+id/mnu7" android:title="Menu 7" android:icon="@drawable/menu_icon6"/>
<item android:id="@+id/mnu8" android:title="Menu 8" android:icon="@drawable/menu_icon6" />
<item android:id="@+id/mnu9" android:title="Menu 9" android:icon="@drawable/menu_icon6" /> 

</menu>

9
 3/10/2012

Menus
To initialize the menu from your code, use the following method:

public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu, menu);
return true;
}

The above method should be placed in your activity, anywhere

within the class (after the OnCreate routine, for example).

Menus
Add an onOptionsItemSelected routine to deal with menu click
events:

public boolean onOptionsItemSelected(MenuItem item) {     

switch (item.getItemId()) {

case R.id.mnu1:
Toast.makeText(getApplicationContext(), "Menu 1 clicked!",  Toast.LENGTH_SHORT).show();
break;

case R.id.mnu2:
Toast.makeText(getApplicationContext(), "Menu 2 clicked!", Toast.LENGTH_SHORT).show();
break;
…
}
return true;
}

Each case (R.id.mnu1, R.id.mnu2, etc.) represents the ID of the

menu item that you defined in XML.

10
 3/10/2012

Dialogs
Dialog boxes can be used to ask users questions, force an
acknowledgement of something, or can be completely custom, with
their own layout defined in XML.

Dialogs
To create a dialog, you can use the following code:
final AlertDialog.Builder oDiag = new AlertDialog.Builder(this);
oDiag.setIcon(android.R.drawable.ic_dialog_alert);
oDiag.setTitle("Title");
oDiag.setMessage("This is an alert!");
oDiag.setPositiveButton(android.R.string.cancel, new DialogInterface.OnClickListener() {

public void onClick(DialogInterface dialog, int which) {

//Do something here
}
});
oDiag.show();

Buttons on the alert are controlled by the setPositiveButton,

setNeutralButton, and setNegativeButton methods.
To create a Yes / No dialog, for example, simply use the following code:
oDiag.setPositiveButton("Yes", new DialogInterface.OnClickListener() {//android.R.string.yes
public void onClick(DialogInterface dialog, int which) {
//what to do goes here } 
});
oDiag.setNegativeButton("No", new DialogInterface.OnClickListener() { //android.R.string.no

public void onClick(DialogInterface dialog, int which) {

//what do do goes here }
});

11
 3/10/2012

Custom Dialogs
Custom dialogs should use a layout, defined in res  layout folder.
This layout is not different in any way from a standard activity
layout.

You can then create an instance of the dialog class, and tell it to use
that layout. Use the dialog’s show() method to display it. Use
dismiss() to close it.

d = new Dialog(this);
d.setContentView(R.layout.about_dialog);

Then, using the usual findViewById methods, locate each element

within your dialog UI, and program it accordingly.
Button buttonOK = (Button) d.findViewById(R.id.btnAboutOK); 
buttonOK.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "OK Clicked in dialog", Toast.LENGTH_SHORT).show();
d.dismiss();
}
});

12