Sai Geetha's Blog - Android

Local WebServer – Apache Tomcat

2011-11-25T11:51:00.001+05:30

Pre-requisites: You should have Apache Tomcat installed on your machine, downloadable from http://tomcat.apache.org/download-60.cgi and you should have eclipse 3.6 on your machine

Configure the webserver to be used within eclipse as follows:

1. Unzip the download into your local directory

2. Tell Eclipse about Tomcat

First, start Eclipse and go to the Workbench as shown in the previous section. Then, click on Servers tab at bottom. R-click, New, Server, Apache, Tomcat v6.0, navigate to folder, OK. You should now see "Tomcat v6.0 Server at localhost" listed under the Servers tab at the bottom.

3. Run Tomcat.

Click on Servers tab at bottom. R-click on Tomcat v6.0, choose "Start". Open http://localhost/ in a browser: you should see an empty page showing a blank directory listing (but not a 404 error). Eclipse incorrectly fails to copy the welcome pages when it sets up Tomcat, so if you want the friendlier welcome page, go to your-eclipse-workspace\.metadata and search for "ROOT". Copy all of the files from C:\apache-tomcat-6.0.28\webapps\ROOT into the ROOT folder inside your-eclipse-workspace\.metadata\...\ROOT.

If you fail to copy the ROOT files as mentioned above, http://localhost/ will result in an empty directory listing. It is often mistaken for an error page, but if you look closely you will see that it says "directory listing for /" and is not an error at all. However, if you copy the ROOT files, http://localhost/ will give the nice friendly "Welcome to Tomcat" page.

4. Make empty project.

a. File, New, Project, Web, Dynamic Web Project.

b. Give it a name (e.g., "SampleWebServer").

c. Accept all other defaults.

5. Make a Welcome.html and place it on the ‘WebContent’ folder of your new Dynamic Web App.

6. Now if you type http://localhost:8080/SampleWebServer/Welcome.html in your browser, you should be able to view the page.

Basic WebView

2011-11-25T11:38:00.001+05:30

On Android we can build what are called Hybrid Apps. i.e. apps that have both HTML pages as well as native activities co-existing. There is a lot of debate on which is the way to develop for mobiles – HTML5 or native? Each of these have their own pros and cons. I will not go into those now. However, to be able to embed HTML pages into your app, one of the ways is through the use of a WebVew component.

Here I will share with you a very simple example of building a WebView App. This is nothing too different from what you see in the google resources pages. However, the intention here is to move from this basic level to a little more advanced level of interacting from the HTML page with Native Apps – integrating through JavaScript. That will be in the next tutorial, in keeping with my principle of explaining one thing at a time.

Also, for this example you will also need to have a webserver that serves you some HTML pages that can be invoked through your WebView. As an addendum to this article, you will find how to create a small web server app in your local environment.

Now, what is a WebView? Google documentation beautifully explains it as

“A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.”

Let’s create a WebView which should display your home Page, on loading. In the main class of the project here is the code in the onCreate() method:

public void onCreate(Bundle savedInstanceState) {

Log.i(TAG, "Entering onCreate");

super.onCreate(savedInstanceState);

setContentView(R.layout.webview);

mWebView = (WebView)findViewById(R.id.webview);

mWebView.clearCache(true);

mWebView.getSettings().setJavaScriptEnabled(true);

mWebView.loadUrl("http://10.0.2.2:8080/SampleWebServer/Welcome.html");

Log.i(TAG,"Exiting onCreate");

}

It is simple and straight forward. I have defined a WebView in the layout folder as below (file name webview.xml)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<WebView

android:id="@+id/webview"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:scrollbarStyle="outsideOverlay"

android:scrollbarFadeDuration="5"

android:fillViewport="true"/>

</LinearLayout>

I get a handle to the WebView in this line: mWebView = (WebView)findViewById(R.id.webview);

And then I load the local URL in this line mWebView.loadUrl("http://10.0.2.2:8080/SampleWebServer/Welcome.html");

As simple as this. What this does is that it invokes the default android browser if we have links on the welcome page as shown below: (we have gone out of the WebView into a browser app)

If we want to be able to continue opening in the WebView, here is the piece of code that would help. Basically we are writing out own custom browser by extending the WebViewClient:

private class WebViewSampleClient extends WebViewClient {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return true;

}

Here we are telling to load the passed URL into the WebView by overriding the shoudlOverrideUrlLoading method of the WebViewClient.

After overriding the same, add another piece of code into onCreate() method:

mWebView.setWebViewClient(new WebViewSampleClient());

after mWebView.loadUrl("http://10.0.2.2:8080/SampleWebServer/Welcome.html");

Now when you click on the Second Page link, the new HTML page gets invoked within the WebView as shown below:

From here, if you press a back button, you will log out of the app, since WebView is one activity and the pages are all opened within the WebView. In order to override that behavior and you want to navigate back to the HomePage within the WebView.

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {

mWebView.goBack();

return true;

}

return super.onKeyDown(keyCode, event);

}

The code is pretty self explanatory. When a back button is clicked and there is something within the WebView that we can go back it, do it within the WebView. Here is the complete code for download.

Last but not the least, I have also added <uses-permission android:name="android.permission.INTERNET" /> into the AndroidManifest file as this app will use the internet to invoke the http based URL.

To create a Web Server and host HTML pages, please see this tutorial.

NOTE: any webserver running locally can be accessed through http protocol using the IP address 127.0.0.1 or localhost or the actual IP address which you get when you run IP address command at the command prompt. However, within the emulator, the linux kernel takes the localhost as 10.0.2.2. and hence you will see in the code above that this IP address is used.

Android - conversion to dalvik format failed with error 1

2011-11-18T11:19:00.000+05:30

Hi,

I am sure many of you may see this error at sometime or the other when you are developing in Android o Eclipse. Most times, I have found this work for me.

In Eclipse, select the project causing the error- go to the menu project -> properties -> java build path -> libraries and remove all jars including the android jars.

Then, right click the project, go to android tools -> fix project properties. Then, add back any other external jars you wanted to add to the build path following the same menu project -> properties -> java build path -> libraries. To ensure there are no errors due to missing libraries.

Then, do a 'clean' on menu project and build again. It should work.

My guess is that when an incompatible android jar is used to compile this error is thrown. There may be many other scenarios too that cause thsi error... you can add them below

Localhost Access in Android Emulator

2011-11-14T13:08:00.001+05:30

This is a small tit-bit I discovered today:

If you want to access your localhost through the Android Emulator - you need to use the IP Address 10.0.2.2 unlike how we do on the web browsers on our desktops where we access the local host as 127.0.0.1 or 'localhost' itself.

This information is useful if for testing purposes you have locally installed a webserver and put a few HTML pages or if you have locally hosted web services - say REST Services that need to be invoked through a URL like this: http://localhost:8080/rest/hello, then, use the above mentioned IP address and you will be able to access your service or webpage through the emulator.

Or you could simple use your own IP address like 192.168.3.233 - whatever yours is. If you do a "ipconfig" in a windows command prompt, you will know what your IP address is. (one of the ways to find it out). However, there is one disadvantage with this method if your IP is allocated to you dynamically on your network. This will keep changing. In such a case, using 10.0.2.2 will be the equivalent of 127.0.0.1 which will not change for the localhost.

Hope this helps.

Multiple Ways of Programming for Android

2011-06-23T11:14:00.000+05:30

These seem to be more than one way to program for the Android devices.

The first and the most common way is by using the Software Development Kit (SDK) using Java Syntax. This is what I have been talking about in all the earlier posts and tutorials.

The other 3 interesting ways, I believe, are:
2. Native Development Kit using C / C ++. This I am sure many are aware of and would be using to some extent. This is a little more closer to the OS, not running on top of the virtual Machine.
3. RenderScript using C99 - used to write faster graphics code like the Google Books page turn animation etc.
4. Android Scripting Layer using Python etc.

Interesting options, right?

Contacts API 2.0 and above | Android Developer Tutorial

2011-05-17T16:23:00.001+05:30

Starting from Android 2.0 (API Level 5), the Android platform provides an improved Contacts API for managing and integrating contacts from multiple accounts and from other data sources. To handle overlapping data from multiple sources, the contacts content provider aggregates similar contacts and presents them to users as a single entity. This article describes how to use the new API to manage (insert, update, delete, view) contacts.

The new Contacts API is defined in the android.provider.ContactsContract and related classes. The older API is still supported, although deprecated.

We need to understand the underlying structure of storage to better manipulate the contacts. We have three distinct types of tables – Contacts, Raw Contacts and Data.

All data related to a contact is stored in this generic data table with each row telling what is the data it stores through its MIME type. So we could have a Phone.CONTENT_ITEM_TYPE as the MIME type of the data row, it contains Phone data. Similarly, if we have Email.CONTENT_ITEM_TYPE as the row’s MIME type, then it stores email data. Like this lot of data rows are associated with a single Raw Contact.

Each Raw Contact refers to a specific contact’s data coming from one single source – say, you gmail account or your office Microsoft account.

The Contact is the topmost in the hierarchy which aggregates similar looking data from various sources into one single contact – a very handy feature when you have redundant data coming about the same contact from you various accounts – like a facebook account, orkut account, yahoo account and goggle account. So the hierarchy looks like this:

So, when we want to insert a new contact, we always insert a Raw Contact. When we want to update an existing contact, we most often deal with the data tables which are accessible through a series of CommonDataKind classes. Because this would be to update particular types of data like phone or email.

Coming to the example:

I create an activity with four buttons to View, Add, Modify and Delete Contacts.

Button view = (Button)findViewById(R.id.viewButton);

Button add = (Button)findViewById(R.id.createButton);

Button modify = (Button)findViewById(R.id.updateButton);

Button delete = (Button)findViewById(R.id.deleteButton);

view.setOnClickListener(new OnClickListener() {

public void onClick(View v){

displayContacts();

Log.i("NativeContentProvider", "Completed Displaying Contact list");

}

});

On the click of each of the buttons I invoke their respective methods: like displayContacts(), createContact(), updatecContact() and deleteContact(). We will now see each of these methods.

displayContacts() is pretty straightforward. Access to each of the tables mentioned above is through a content URI. I use the topmost level ‘Contacts’ URI to iterate through all the existing contacts and display their names and phone numbers (Toast them).

We know Contacts is a ContentProvider and hence we need to query through a ContentResolver which returns all the data of the contacts.

private void displayContacts() {

ContentResolver cr = getContentResolver();

Cursor cur = cr.query(ContactsContract.Contacts.CONTENT_URI,

null, null, null, null);

if (cur.getCount() > 0) {

while (cur.moveToNext()) {

String id = cur.getString(cur.getColumnIndex(ContactsContract.Contacts._ID));

String name = cur.getString(cur.getColumnIndex(ContactsContract.Contacts.DISPLAY_NAME));

if (Integer.parseInt(cur.getString(

cur.getColumnIndex(ContactsContract.Contacts.HAS_PHONE_NUMBER))) > 0) {

Cursor pCur = cr.query(

ContactsContract.CommonDataKinds.Phone.CONTENT_URI,

null,

ContactsContract.CommonDataKinds.Phone.CONTACT_ID +" = ?",

new String[]{id}, null);

while (pCur.moveToNext()) {

String phoneNo = pCur.getString(pCur.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER));

Toast.makeText(NativeContentProvider.this, "Name: " + name + ", Phone No: " + phoneNo, Toast.LENGTH_SHORT).show();

}

pCur.close();

}

I will try to briefly explain the above method. Line 1 gets a handle to the ContentResolver. Line 2 queries the Contacts URI (ContactsContract.Contacts.CONTENT_URI ) without any mention of the specific columns or “where” clause of an SQL query. Notice all the 4 parameters are null. This means that we are not making any conditional query into the contacts table and hence all data is returned into the cursor.

Next, I check that the cursor is not empty and iterate through the cursor data. I retrieve the _ID and DISPLAY_NAME from the Contacts and then, I check for the flag if the contact has a phone number. This information is available in contacts table itself. But the Phone number details are in the data tables. Hence after checking for the flag, I query the CommonDataKings.Phone.CONTENT_URI for the phone data of that specific ID. From this new cursor named pCur, I retrieve the Phone Number. If there are multiple phone number for one contact, all of them will be retrieved and toasted one after another.

Now, let us see how to create or insert a new contact.

In the createContact() method which is called when you click on the “Add Contact” button, I first query to see if the hardcoded name “Sample Name” already exists. If so, I toast a message stating the same. If not, then I get into actually inserting the name along with a phone number. The first part of the check you can view in the complete source code available for download. Only the second part of inserting a contact is explained here. For this, we need to use a ContentResolver always.

A ContentResolverprovides an applyBatch(…) method which takes an array of ContentProviderOperation classes as a parameter. All the data built into the ContentProviderOperations are committed or inserted into the ContentProvider that we are working on. IN this case, the ContentProvider we are working on are Contacts and the authority associated with the same is ContactsContract.AUTHORITY

Here is the code for the same:

ArrayList<ContentProviderOperation> ops = new ArrayList<ContentProviderOperation>();

ops.add(ContentProviderOperation.newInsert(ContactsContract.RawContacts.CONTENT_URI)

.withValue(ContactsContract.RawContacts.ACCOUNT_TYPE, "accountname@gmail.com")

.withValue(ContactsContract.RawContacts.ACCOUNT_NAME, "com.google")

.build());

ops.add(ContentProviderOperation.newInsert(ContactsContract.Data.CONTENT_URI)

.withValueBackReference(ContactsContract.Data.RAW_CONTACT_ID, 0)

.withValue(ContactsContract.Data.MIMETYPE,

ContactsContract.CommonDataKinds.StructuredName.CONTENT_ITEM_TYPE)

.withValue(ContactsContract.CommonDataKinds.StructuredName.DISPLAY_NAME, name)

.build());

ops.add(ContentProviderOperation.newInsert(ContactsContract.Data.CONTENT_URI)

.withValueBackReference(ContactsContract.Data.RAW_CONTACT_ID, 0)

.withValue(ContactsContract.Data.MIMETYPE,

ContactsContract.CommonDataKinds.Phone.CONTENT_ITEM_TYPE)

.withValue(ContactsContract.CommonDataKinds.Phone.NUMBER, phone)

.withValue(ContactsContract.CommonDataKinds.Phone.TYPE, ContactsContract.CommonDataKinds.Phone.TYPE_HOME)

.build());

try {

cr.applyBatch(ContactsContract.AUTHORITY, ops);

….

In the first element in the ops array, I am setting the details of the account to which I want to add the contact. In this case the gmail account type is accontname@gmail.com and the account name is “com.google”. The latter has to be unique and hence it is recommended to use the internet URLs of the source of data.

In the second element, I am adding the name of the contact and in the third the phone data. You notice that I use .withValueBackReference(..) as we still have not created the Raw contact and hence we do not have the Id. The first row creates the id and hands over the id to the next rows of data.

This array ops is passed into the ContentResolver and thus the data is inserted.

For updating the phone number of an existing contact, I again use the ContentResolver with the ContentProviderOperation array. However, now, I pass the where clause and the parameters of the where clause – specifically indicating that only the phone number of the “Sample Name” contact has to be updated.

ops.add(ContentProviderOperation.newUpdate(ContactsContract.Data.CONTENT_URI)

.withSelection(where, params)

.withValue(ContactsContract.CommonDataKinds.Phone.DATA, phone)

.build());

Notice the .withSelection(where, params). The where and params look like this:

String where = ContactsContract.Data.DISPLAY_NAME + " = ? AND " +

ContactsContract.Data.MIMETYPE + " = ? AND " +

String.valueOf(ContactsContract.CommonDataKinds.Phone.TYPE) + " = ? ";

String[] params = new String[] {name,

ContactsContract.CommonDataKinds.Phone.CONTENT_ITEM_TYPE,

String.valueOf(ContactsContract.CommonDataKinds.Phone.TYPE_HOME)};

Delete too is done in a very similar manner with no values but only the selection criteria is provided for which contact to be deleted.

ContentResolver cr = getContentResolver();

String where = ContactsContract.Data.DISPLAY_NAME + " = ? ";

String[] params = new String[] {name};

ArrayList<ContentProviderOperation> ops = new ArrayList<ContentProviderOperation>();

ops.add(ContentProviderOperation.newDelete(ContactsContract.RawContacts.CONTENT_URI)

.withSelection(where, params)

.build());

try {

cr.applyBatch(ContactsContract.AUTHORITY, ops);

} catch (RemoteException e) {

….

The complete source code is downloadable here.

I really scouted the internet a lot to find a comprehensive tutorial on the new Contacts Content Provider API but could not find anything that easily. Hope this helps all who of you who are looking for the same.

NOTE: Many have been asking me questions on why the contacts that have just been added through this app are not visible in the phone contacts. All your contacts on phone are linked to your google account on the phone. However, the contacts from the above code have got added to psuedo google account and hence will not be visible directly. You search for the just added contact and you will be able to find it.

Hope this helps.

Context Menu | Android Developer Tutorial

2011-05-08T12:30:00.001+05:30

This is a follow up to the Options Menu Tutorial shared earlier.

To recap, the Context Menu is a floating list of menu items that appears when a user touches and holds a particular item displayed in the view, which has a menu associated with it.

Going straight to the example, first I create a ListView with names of pens displayed. When one presses and holds one of the names for a long time, the context menu appears as shown here:

And when you click on any of the context menu shown above, the screen that appears is:

Let’s go to the code.

First, the mundane step of creating a Listview (you can see the ListView tutorial for more explanation on this).

I create a class ShowContextMenu extending the ListActivity. In its OnCreate(…) method, I associate the Listview array with the ListAdapater as shown here:

public class ShowContextMenu extends ListActivity {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setListAdapter(new ArrayAdapter<String>(this,

android.R.layout.simple_list_item_1, getResources().getStringArray(R.array.names)));

…

}

Note that instead of hard-coding the list items as string array within the class, I have followed the best practice of externalizing the strings into a strings.xml resource class. Hence I use getResources().getStringArray(R.array.names) to retrieve the array of pen names that I want to display in the List. The strings.xml file in the value folder has this entry:

<string-array name="names">

<item>MONT Blanc</item>

<item>Gucci</item>

<item>Parker</item>

<item>Sailor</item>

<item>Porsche Design</item>

<item>Rotring</item>

<item>Sheaffer</item>

<item>Waterman</item>

</string-array>

Once this Listview has been created, now we want to associate a ContextMenu with each of the rows in the Listview Item. i.e. is a user were to long-press one of the items, a menu should appear. For this we add the following line as well in the onCreate(..) method.

registerForContextMenu(getListView());

But how do we create the ContextMenu? Whenever the long-press happens, the onCreateContextMenu(…) method is invoked. So, we need to override this method as shown below:

public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) {

super.onCreateContextMenu(menu, v, menuInfo);

MenuInflater inflater = getMenuInflater();

inflater.inflate(R.menu.context_menu, menu);

}

Here again, just as in Options Menu tutorial, I use a MenuInflater to create the context menu rather than do it programmatically. This is certainly a best practice of keeping the concerns separated. The View and the programming logic are kept separate as meant to be in Android Programming. The context menu consists of 4 items – Edit, Save, Delete, View. So, here is how it is defined in the context_menu.xml in the res/menu folder:

<menu

xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@+id/edit"

android:title="@string/edit" />

<item android:id="@+id/save"

android:title="@string/save" />

<item android:id="@+id/delete"

android:title="@string/delete" />

<item android:id="@+id/view"

android:title="@string/view" />

</menu>

I have an id that is associated with each of the menu items that uniquely identifies the menu item selected. And I have a String associated with it which is what is displayed on the Menu.

Now that the context menu is created, how to handle when the menu item is clicked? For this we need to override the onContextItemSelected(…) method as shown below;

public boolean onContextItemSelected(MenuItem item) {

AdapterContextMenuInfo info = (AdapterContextMenuInfo) item.getMenuInfo();

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

switch(item.getItemId()) {

case R.id.edit:

Toast.makeText(this, "You have chosen the " + getResources().getString(R.string.edit) +

" context menu option for " + names[(int)info.id],

Toast.LENGTH_SHORT).show();

return true;

…………………..

default:

return super.onContextItemSelected(item);

}

This is the callback method invoked when a context menu item is clicked. The callback get the reference to the clicked menu item as the parameter item.

I use the method item.getItemId() to retrieve the id of the item clicked. This is the same id that is defined in context_menu.xml. So, based on the id, I used a switch statement to jump to the appropriate action. Here the action is just to toast a message that tell which context menu was clicked for which ListView item. How do I retrieve the ListView item clicked?

Extra information about the menu is returned by calling item.getMenuInfo(). Info.id would be the ListView id. I use this id to retrieve the name of the pen as in names[(int)info.id]

That is it. Do you want the complete code? Here it is.

Options Menu | Android Developer Tutorial

2011-05-08T11:56:00.000+05:30

Almost every application will need a menu in order to facilitate a user to perform actions on the application. In Android there are three types of menus possible.

Options Menu
Context Menu
Sub Menu

The Options menu is the one that appears when a user touches the menu button on the mobile. This is something that is associated with an activity. In 3.0 and later, this is available in the Action Bar itself for quick access.

In this article, I am showing how to create an Options Menu for devices having Android 2.3 or below.

The Context Menu is a floating list of menu items that appears when a user touches and holds a particular item displayed in the view, which has a menu associated with it.

The Sub Menu is a floating list of menu items that appears when the user touches a menu item that contains a nested menu.

There are two ways of creating an Options Menu in your application. One is by instantiating the Menu class and the other is by inflating a Menu from an XML menu resource. Based on best practices it is always better to define the Menu in an XML and inflate it in your code.

Now, let us start with the example.

I am going to just define 3 menu items in the XML. Inflate it in my code. And when a user clicks on any of the menu items, I just Toast a message on what has been clicked.

NOTE: This is as usual not a practically useful piece, but sticking to my style, I want to keep it as uncluttered and as simple as possible so that the learning happens easily. And the focus is only on what concept we are trying to learn.

So, here is my options_menu.xml that is created in the res/menu folder:

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

<item android:id="@+id/next"

android:icon="@drawable/ic_next"

android:title="@string/next" />

<item android:id="@+id/previous"

android:icon="@drawable/ic_previous"

android:title="@string/previous" />

<item android:id="@+id/list"

android:icon="@drawable/ic_list"

android:title="@string/list" />

</menu>

You see that the Menu root node consists of 3 item leaf nodes. Each of the items consists of an id, icon and title. The resource id is unique to that item and it allows the application to recognize which item has been clicked by the user. The icon is a drawable that should exist in the res/drawable folder and is the one shown in the menu item. The string is the item’s title.

The above assumes that you have three images ic_next, ic_previous and ic_list copied into the drawable folder. It goes without saying that these image sizes should be kept as small as possible.

Once this is ready, we will create a class called ViewOptionsMenu. It’s onCreate(…) method would be a simple one calling the super method and displaying the content as shown below.

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

}

The main.xml just shows the message: “Click on the Options Menu to view the available Menu Options”. This message as per the norm is defined in the strings.xml file that exists in the res/values folder. Here are the contents of the main.xml

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/welcome"

android:textSize="20sp" android:textStyle="bold" android:capitalize="none" android:typeface="sans"/>

</LinearLayout>

Now, I need to override the method: onCreateOptionsMenu(Menu menu). This method is called by Android the first time the activity is loaded. This is so for Android 2.3 and below. Here is the code:

public boolean onCreateOptionsMenu(Menu menu) {

MenuInflater inflater = getMenuInflater();

inflater.inflate(R.menu.options_menu, menu);

return true;

}

This method is getting a handle to the MenuInflater and using it to inflate the options menu that we have defined earlier in options_menu.xml in the res/menu folder. That is it. The Menu is created. Isn’t is so simple?

Now, that the menu is created, how do we respond to the user when he clicks on the menu. This is done by overriding the onOptionsItemSelected(MenuItem item) method in the Activity itself as shown below:

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.next:

Toast.makeText(this, "You have chosen the " + getResources().getString(R.string.next) + " menu option",

Toast.LENGTH_SHORT).show();

return true;

…

default:

return super.onOptionsItemSelected(item);

}

Here, the Android system calls this method by passing a handle to the MenuItem that has been clicked by the user. So, within this method, I check which item has been clicked by retrieving the item id through item.getItemId(). Then I use the switch statement to take action based on the id. If it is R.id.next that has been selected, then we toast a message that the “Next” menu option has been selected. In real apps, it is here that you can call the appropriate method that should take action according to the menu clicked.

Similarly I toast messages for “previous” as well as “list” menus. The complete code is downloadable here.

See the images below for how the options menu appears

and what happens when you click on the options menu:

The whole of options menu works slightly differently for Android 3.0 and above.

And if you want to change the menu options, at runtime, you must override the onPrepareMenuOptions() method. This is called by Android each time the user clicks on the menu. This is useful for enabling, disabling, adding or removing menu items based on the current state of your application.

Android Developers Blog: Can I use this Intent?

2011-04-18T14:54:00.000+05:30

We all know that the loose coupling provided by Android through intents is one of its most powerful features. It makes it possible for us to mix and match the use of activities between various applications as though they all belong to one.

However, when I want to invoke another application that has published an intent filter, I cannot always assume that the other application is available on the phone. So, I need to check its availability and then only enable the feature to call it.

This is very well explained in the link: Android Developers Blog: Can I use this Intent?

TabLayout or Tabbed View | Android Developer Tutorial

2011-03-11T16:57:00.000+05:30

This tutorial is about developing a TabLayout / tabs which is one of the very important ways of providing the UI in Android. The default Contacts application uses this layout.

For creating a tab Layout, we need to look at 3 new aspects: TabActivity, TabHost and TabWidget.

Let us begin by looking at how we should declare the layout xml. The root node has to be a TabHost. What is a TabHost and why is it required? It is nothing but a container for the tabbed view we want to create. It provides methods to add the tabs, remove them and to bring focus to a specific tab etc.

Within this, we need to have a two objects: TabWidget and a FrameLayout.

The TabWidget itself does not do much except contain a list of tab labels that exist within the parent TabHost. Basically it is nothing but a set of labels that the user clicks in order to select a specific tab. The actual content of each tab is to be held by the 2^nd object in the TabHost i.e. a FrameLayout. Hence both the TabWidget and FrameLayout need to be present on each tab. And in order to align htme one after another, we embed them into a LinearLayout.

Hence the layout XML would be like this:

<TabHost

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@android:id/tabhost"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

<LinearLayout

android:id="@+id/LinearLayout01"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical">

<TabWidget

android:id="@android:id/tabs"

android:layout_width="fill_parent"

android:layout_height="wrap_content"></TabWidget>

<FrameLayout

android:id="@android:id/tabcontent"

android:layout_width="fill_parent"

android:layout_height="fill_parent"></FrameLayout>

</LinearLayout>

</TabHost>

Now, we will move on to the coding of activities for a Tabbed Layout.

In the application, I want to have 3 tabs. So how do I do it?

Each of the tabs can have either a View, launch an activity by passing an intent or create a view dynamically by using TabHost.TabContentFactory. I have chosen to show only activities in all my tabs.

So, how many activities do you think we need? 3? Sorry 4! There needs to be a main or the parent activity that would display the whole tabbed view and one activity in each of the tabs.

Now let us look at developing the main activity. This has to extend the TabActivity. This is no different from an Activity except for the additional ability to handle multiple embedded activities or views.

So here is the main class declaration:

public class TabLayoutSample extends TabActivity {

Let us see now, how to create the first tab.

First, we need to get a handle to the TabHost that we have declared in the XML layout file, so that we can add tab activities into it. Here is the code for the same:

TabHost tabHost = getTabHost(); // The activity TabHost

Into this TabHost, we need to add the tab. How can we? TabHost provides an inner class called TabSpec that allows you to create a tab, populate its contents and add it as a tab to the TabHost. See how it is done:

TabHost.TabSpec spec;

// Create an Intent to launch an Activity for the tab (to be reused)

intent = new Intent().setClass(this, WelcomeActivity.class);

// Initialize a TabSpec for each tab and add it to the TabHost

spec = tabHost.newTabSpec("welcome").setIndicator("Welcome",

res.getDrawable(R.drawable.tab_welcome))

.setContent(intent);

tabHost.addTab(spec);

In the first line above, we are creating a spec variable of type TabSpec. Then we are creating an intent that would be forming the content of the first tab. Then, we associate it with the TabSpec.

Since, each tab should have a tab indicator, content and a tag to keep track of it, it is achieved through setIndicator(..) method. Even the image that should be shown in the tab at the top is set through the same method’s 2^nd parameter res.getDrawable(R.Drawable.tab_welcome). What is this and how did I set the image?

This part is a long set of steps but very easy to do. Create two images one in light color and one in dark color. Call them as welcome.png and welcome_sepia.png. Copy them into the /res/drawable-mdpi folder. The, you need to create a state-list drawable that specifies which image to use for each tab state:

[A StateListDrawable is a drawable object defined in XML that uses a several different images to represent the same graphic, depending on the state of the object. For example, a Button widget can exist in one of several different states (pressed, focused, or neither) and, using a state list drawable, you can provide a different background image for each state.]

So, here is the tab_welcome.xml:

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

<item android:drawable="@drawable/welcome"

android:state_selected="true" />

</selector>

This XML is describing which welcome image to show when the tab is selected and which to show when the tab is not selected. This XML too needs to be created in the same folder - /res/drawable-mdpi.

Once all of this is done, when setIndicator("Welcome", res.getDrawable(R.drawable.tab_welcome))is called, the image associated with the tab is shown correctly based on the state.

Then, the last part of the tabSpec call is associating the activity that should be shown in the content of the activity. For this, I have created a new Intent which invokes an Activity – ‘WelcomeActivity.class’. this implies that the WelcomeActivity.class is already created and available. In this case, it just contains a welcome message to be shown.

Once such a spec is created, I add it to the TabHost through the addtab(…) method of the TabHost.

I have repeated the above to show existing “contacts” in the next tab and then the “top links” in the third tab. You can get the complete code for the same here.

ListView of Data from SQLiteDatabase - Android

2011-02-18T15:44:00.000+05:30

This is a next level tutorial where I am mixing two concepts – The ListView concept that is explicitly explained in the ListView Tutorial and the SQLiteDB concept in into own tutorial.

Here I am intending to query a database using a SQLiteDatabase API. The results I obtain are in a Cursor object that I iterate and create an ArrayList that is passed to the ListView. Let us see the steps involved in this exercise:

In the onCreate(…) method I have 2 methods corresponding to the two steps described above:

openAndQueryDatabase();

displayResultList();

Let us see what each of them does:

Here is the first step:

private void openAndQueryDatabase() {

try {

DBHelper dbHelper = new DBHelper(this.getApplicationContext());

newDB = dbHelper.getWritableDatabase();

Cursor c = newDB.rawQuery("SELECT FirstName, Age FROM " +

tableName +

" where Age > 10 LIMIT 4", null);

if (c != null ) {

if (c.moveToFirst()) {

do {

String firstName = c.getString(c.getColumnIndex("FirstName"));

int age = c.getInt(c.getColumnIndex("Age"));

results.add("Name: " + firstName + ",Age: " + age);

}while (c.moveToNext());

}

} catch (SQLiteException se ) {

Log.e(getClass().getSimpleName(), "Could not create or Open the database");

} finally {

if (newDB != null)

newDB.execSQL("DELETE FROM " + tableName);

newDB.close();

}

Now, DBHelper is a class I have written extending the SQLiteOpenHelper class. All that it does is create a database by name “sample”, create a table within it and insert values into the table. It does this if the database does not already exist. The table name is “Resource” and the columns in the table are Lastname, Firstname, Country, Age.

The code for this example can be downloaded here and you can look into the DBHelper code as well (which I do not want to elaborate here)

So, from the DBHelper class we get an open database which we call the newDB. Using this handle, we query the table for values. To keep it simple, while retrieving values I have hard-coded the column names which need not be the case. So I run a rawQuery and get the results into a Cursor.

Next I iterate through the Cursorand populate the results into an ArrayList of Strings “result”. In the finally block, I not only close the database but before that I delete all the entries inserted into the database by the DBHelper class just to clean up.

Next how do I display the results in a ListView. If you know ListView– how it works it is rather simple. Else you could look at the ListViewTutorial. Here is the method:

private void displayResultList() {

TextView tView = new TextView(this);

tView.setText("This data is retrieved from the database and only 4 " +

"of the results are displayed");

getListView().addHeaderView(tView);

setListAdapter(new ArrayAdapter<String>(this,

android.R.layout.simple_list_item_1, results));

getListView().setTextFilterEnabled(true);

}

The only additional bit I have done here is to add a HeaderView (which is using the concept of programming UI explained in another tutorial).

I have written this tutorial based on some of the requests in my blog. Hope this helps.

Android Developers Blog: Android 3.0 Platform Preview and Updated SDK Tools

2011-02-01T16:23:00.001+05:30

Android Developers Blog: Android 3.0 Platform Preview and Updated SDK Tools

Being in the domain of developing applications for large enterprises, what looks to me as interesting features of Android 3.0:

1. Enhancements for the Enterprise such as encrypted storage and password expiration!

2. And a UI Framework to suit larger screen devices.

Currently any enterprise that develops mobile applications has to duplicate its efforts towards developing and testing on each of the platforms like Android, Windows, Blackberry, iPhone etc. (Though I know there are a host of "write-once, deply on multi-platforms' options like AppMobi, Monotouch, Corona from Anscamobile, they need to mature a lot more). I hope this will help in consolidating development effort towards: "write once, run anywhere" for mobile devices.

I am looking at the Android market picking up rapidly and becoming the de-facto JVM equivalent in the mobile space...

How easy could life get with writing an app for one mobile and bingo! it works on all possible mobile devices that exist!! or at least majority of them! :)

Android 2.3 is here and what does it bring?

2011-01-14T15:32:00.002+05:30

Android 2.3 (Gingerbread) has been released on the 6th of December 2010. While it is still a minor release, Android 3.0 (Honeycomb) would probably bring greater surprises. Atleast I am hoping that there would be the "Wow" factor with it.

Here are a few features of the Gingerbread version:

Updated user interface design
Support for extra-large screen sizes and resolutions (WXGA and higher)
Native support for SIP VoIP telephony
Support for WebM/VP8 video playback, and AAC audio encoding
New audio effects such as reverb, equalization, headphone virtualization, and bass boost
Support for Near Field Communication
System-wide copy–paste functionalities
Redesigned multi-touch software keyboard
Enhanced support for native code development
Audio, graphical, and input enhancements for game developers
Concurrent garbage collection for increased performance
Native support for more sensors (such as gyroscopes and barometers)
A download manager for long running downloads
Improved power management and application control
Native support for multiple cameras
Switched from YAFFS to the ext4 filesystem
An Integrated task Manager

Alongside the new platform, Google is also releasing updates to the Software Development Kit (SDK) tools (r8), Native Development Kit (NDK) and Android Development Tools (ADT) plug-in for Eclipse (8.0.0).

The new features are simplified debug builds, integrated ProGaurd support, HierarchyViewer improvements and a preview of new UI Builder. For a few of the reviews you can go here:

Gizmodo's Review - Android 2.3 Gingerbread Review: Better Than Fruitcake

Techworld's review - Google Android 2.3 Gingerbread review

Android UI – Inflate from XML (Dynamic UI Creation)

2010-12-03T17:10:00.001+05:30

We have seen that we can declare User Interface in Android through XML or we can even create the UI Programmatically. Now, we will see how we can mix the two and use it for building dynamic User Interfaces. One example of such a case would be when on a particular action of the user on one of the UI elements, you need more UI elements to appear on the same screen. How do we achieve this?

You can do it in two ways:

1. The dynamic part of the UI can be created programmatically. However we saw in my earlier tutorial that it is not a very good way to mix UI and code. So, we can

2. Define the dynamic UI too as an XML and use XML inflation to include it into the existing UI.

We will see how to do the 2^nd way, which probably is a good practice too.

As always, again a very simple example. Assume I have a very simple linear layout. In that I want to include a button. I can do it as part of the mail XML itself. However, assume that this button is supposed to be reused in many activities and hence I have defined it as a separate XML. How do I include it into the main XML?

So, here is the main.xml

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:id="@+id/layout1"

</LinearLayout>

Here is the buttons.xml that is also created in the res/layout folder:

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

<Button xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/button_small_left"

style="?android:attr/buttonStyleSmall"

android:text="Press to close"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

And here is the Activity’s onCreate(…) method of the InflateView class:

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

final LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);

Button b = (Button)inflater.inflate(R.layout.buttons,

null);

lLayout = (LinearLayout)findViewById(R.id.layout1);

lLayout.addView(b);

First 3 lines must be familiar. In the 4^th line, I am getting a handle to the LayoutInflater through the getSystemService(…) method. This inflater has a method inflate to which I pass the buttons.xml by passing the parameter R.layout.buttons. Then, I try to append this button to the Linear Layout that already exists and is set as the view in line 2 setContentView(R.layout.main). How to append? I get a handle to the LinearLayout lLayout and add the new button to it in the last line!

That simple to inflate an XML and append it to an existing view!

However, I have gone ahead and added another bit to this program as shown below:

b.setOnClickListener(new OnClickListener() {

public void onClick(View v) {

//restrict to adding only 1 textview child element

if (lLayout.getChildAt(2) == null)

{

TextView tv = (TextView)inflater.inflate(R.layout.text, null);

lLayout.addView(tv);

}

});

On the click of this dynamically added button, I am showing how we can add more to the UI dynamically through inflation. Assume, on the click of the button, you want to show some new text. This TextView is defined in another XML called text.xml which is also in the res/layout folder.

So, I am inflating from this XML and appending it to the LinearLayout view. So, a lot can be achieved for dynamic UI through inflation.

You can download the complete sample code here.

Creating Android UI Programmatically

2010-12-02T16:53:00.003+05:30

So far, in all my examples, I have been using the declarative way of creating an Android UI using XML. However, there could arise certain situations when you may have to create UI programmatically. Sincere advice would be to avoid such a design since android has a wonderful architecture where the UI and the program are well separated. However, for those few exceptional cases where we may need too… here is how we do it.

Every single view or viewgroup element has an equivalent java class in the SDK. The structure and naming of the classes and methods is very similar to the XML vocabulary that we are used to so far.

Let us start with a LinearLayout. How would we declare it in an XML?

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

</LinearLayout>

This just contains a TextView embedded in a LinearLayout. A very trivial example. But serves the purpose intended. Let me show how almost every single element here corresponds to a class or a method call in the class. So the equivalent code in the onCreate(…) method of an activity would be like this:

super.onCreate(savedInstanceState);

lLayout = new LinearLayout(this);

lLayout.setOrientation(LinearLayout.VERTICAL);

//-1(LayoutParams.MATCH_PARENT) is fill_parent or match_parent since API level 8

//-2(LayoutParams.WRAP_CONTENT) is wrap_content

lLayout.setLayoutParams(new LayoutParams(

LayoutParams.MATCH_PARENT,

LayoutParams.MATCH_PARENT));

tView = new TextView(this);

tView.setText("Hello, This is a view created programmatically! " +

"You CANNOT change me that easily :-)");

tView.setLayoutParams(new LayoutParams(

LayoutParams.MATCH_PARENT,

LayoutParams.WRAP_CONTENT));

lLayout.addView(tView);

setContentView(lLayout);

Like this any layout view can be created. But from this small example you can notice two outstanding things – very tedious to code for every attribute of the view. And any simple change in the view, you need to change the code, compile, deploy and only then you see the effect of the change – unlike in a layout editor.

You can download the sample code here.

Android Eclipse link Error - New Project

2010-12-02T11:10:00.002+05:30

I set up a new environment on my new laptop with Windows7 and jdk1.6.0_21 version. Did the initial setup with eclipse installation, android SDK installation, installing the ADT plugin on eclipse etc. I then imported all the android projects I had created so far. It worked perfectly fine.

Next I created a simple project without any custom stuff, it failed to create with a link error as shown in the image below:

After much trial and error, setting up everything afresh, changing or creating a new workspace, nothing seemed to work. I noticed that the Android package was not visible in the Java build path that you get to see in the project properties. So, finally I found a manual workaround to overcome this problem if you mandatorily want to continue working in the same workspace

Solution: Same workspace:

The manual resolution I found is to make a classpath entry in the .classpath file outside the eclipse environment.

The .classpath file may have such an entry before you edit it:

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

</classpath>

So add an entry for the android framework to be included as shown below:

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

<classpathentry kind="con" path="com.android.ide.eclipse.adt.ANDROID_FRAMEWORK"/>

</classpath>

What actually corrupted my workspace, i have not yet figured out. However, while searching on the web for all possible solutions, I came across the announcement on the eclipse forums that Eclipse 3.3 to 3.6 on windows platform is not stable with the JDK version - jdk1.6.0_21. Hence we need to either roll back to patch 20 or upgrade to 22. I have upgraded and see that eclipse is far more stable now.

Please see this link for more details on the windows and jdk problem mentioned above:

http://www.eclipse.org/forums/index.php?t=msg&th=171988&start=0&

Solution: Different or new workspace:

Just upgrade your JDK to jdk1.6.0_22 and point eclipse to use this as the default JDK. Create a new workspace and you are done. It fixes the problem.

Hope this helps many not to waste time on searching a solution that is not to do with the way you are coding but with the environment set up itself. I had to spend quite a bit of my precious time before figuring this out.

Sample Code Download Link

2010-09-20T11:36:00.000+05:30

Hi,

I got a lot of requests for alternate download sites (for the Sample Code). So, I have put all the sample code into one page and here is the link to the same. Hope this helps you.

https://sites.google.com/site/saigeethamn/home/android-tutorial-code-for-download

Google debuts DIY code tools for Android phones

2010-07-14T10:17:00.000+05:30

BBC News - Google debuts DIY code tools for Android phones

This seems to be very interesting stuff... though at the outset it may seem a dampener for hard core techies who take joy in cracking tough nuts by themselves, I am sure these DIY code tools can certainly help the techies too to innovate and re-discover themselves in very new avatars... Need to check what exactly this has to offer. :)

Google launches Android 2.2 SDK

2010-07-14T10:02:00.002+05:30

Google launches Android 2.2 SDK - V3.co.uk - formerly vnunet.com

Hmm... a new version of the SDk is out! The article above highlights one of the features - the ability to move applications to SD Card thus giving more space for mote applications to be accommodated on an Android mobile.
This is a minor release and yet there are quite a few noteworthy features, some of them listed below:
1. Multiple keyboard languages - a user can switch between languages by swiping across the spacebar
2. The android mobile can be used as a protable Wi-Fi hotspot from which 8 devices can connect.
3. The camera and gallery have been enhanced with a new UI for controlling zoom, focus, flash, exposure etc.
4. Some of the new platform technologies introduced are a new media framework - Stagefright and bluetooth enhancements
5. For the developers. there are some new APIs introduced in Apps on external storage, Media framework, Camera and camcorder, graphics, data backup, device policy manager and UI framework.

For more details on the above, read the article: Android 2.2 Platform Highlights

Image Switcher View | Android Developer Tutorial

2010-05-20T16:28:00.000+05:30

Now we will explore ImageSwitcher View. It is a view useful to switch smoothly between two images and thus provides ways of transitioning from one to another through appropriate animations.

We will implement the same concept of showing a gallery of images that scrolls at the top of the android screen landscape and upon selection of one image, it gets displayed as a larger image in the lower part through the use of an ImageSwitcher. This is what I had done earlier in the GalleryView tutorial but now instead of showing the selected picture through an ImageView, I will show it using a ImageSwitcher. Though the output may seem very similar, lot of other methods are available on the ImageSwitcher that can be used, if required.

Here is how the output would look (NOTE that I have not used the default gallery background provided by Android in the Gallery images)

So, to begin with, first we need to declare the layout xml to have a gallery and the ImageSwitcher:

<Gallery

android:id="@+id/Gallery01"

android:layout_width="fill_parent"

android:layout_height="wrap_content"></Gallery>

<ImageSwitcher

android:id="@+id/ImageSwitcher01"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

</ImageSwitcher>

The next thing that we need to do is create a class that not only extends Activity but also implements ViewFactory. The ViewFactory is a Interface that creates views that need to be shown in the ImageSwitcher. So it has one method makeView() which we need to implement. It is here that we can set the attributes of the ImageView that would be shown within the ImageSwitcher - like its background, it scale, its layout parameters etc. – typically those attributes that we would have otherwise statically set through a layout xml.

Here is the class declaration and the method makeView():

public class ImageSwitcherView extends Activity implements ViewFactory {

and

@Override

public View makeView() {

ImageView iView = new ImageView(this);

iView.setScaleType(ImageView.ScaleType.FIT_CENTER);

iView.setLayoutParams(new

ImageSwitcher.LayoutParams(

LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));

iView.setBackgroundColor(0xFF000000);

return iView;

}

This alone is the real difference from the Gallery example.

Other smaller things we need to do is get a handle to the ImageSwitcher in the onCreate() method:

iSwitcher = (ImageSwitcher) findViewById(R.id.ImageSwitcher01);

iSwitcher.setFactory(this);

iSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,

android.R.anim.fade_in));

iSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,

android.R.anim.fade_out));

Here we also set the animation on how the image should fly in and fly out of the area. Then, we get a handle to the gallery and set an ImageAdapter to it. The ImageAdpater is as described in my Gallery Example. If you have not seen that, please go through that and then try this example, as I would not want to repeat myself here.

Now on the click of a gallery image, we would want to pass the selected image to the ImageSwitcher and this is what we do here:

gallery.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {

iSwitcher.setImageResource(pics[arg2]);

}

});

}

This way we are done. You may download the complete code here.