How to create a simple list menu for android 4.2

I just started blogging on these days so I will be very appreciate if there is feedback comment on it.

My develop environment is jdk1.7 , android 4.2, and eclipse 4.2.1
This tutorial describe how to create a simple menu using default android layout and id .It is how is works. When you click on the list, toast will pop up on the screen. If it is difficult to image, figure below shows how it looks like.

1. Create listView layout

Following source code shows how the layout file looks like.


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

<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content" >



Create a new android application project and add the listView in to it. Note that don’t miss any line written above. If you miss it, maybe there is error occur.

Now, you got the listView on your layout but you couldn’t see anything as you don’t have set any data on to it. So, what we are going to do next is to set data on to listView layout.

2. Set Array Adapter on to listView layout

Enter the following source code to your MainActivity class and extends ListActivity class
Note that don’t extends Activity class.

public class MainActivity extends ListActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

String[] values = new String[] { "Android", "iPhone", "WindowsMobile"};
// First parameter - Context
// Second parameter - Layout for the row
// Third parameter - ID of the TextView to which the data is written
// Forth - the Array of data

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, android.R.id.text1, values);
// Assign adapter to ListView
setListAdapter(adapter);
}
}

By extending ListActivity class, you are able to adapt the String[] to listView via setListAdapter() method.

Android platform provide defaults layout for rows. Code above use is one of  example of defaults layout, android.R.layout.simple_list_item_1 contains default id android.R.id.text1. Of course you can create your own rows layout but on this tutorial, we are teaching how to create adapter by using Android defaults layout.

Now, you got “Android”,”iPhone”,”WindowsMobile” on your list. What we got to do next is to make the list function when we click on it.

3. Create onListItemClick

By adding following new method on to MainActivity class. When you click on the list item, toast will pop up.

@Override
public void onListItemClick(ListView l,View v,int position,long id){
String item = (String)getListAdapter().getItem(position);
Toast.makeText(getApplicationContext(),
item+"", Toast.LENGTH_SHORT)
.show();

}
String item is to get the string what you clicked. Toast.makeText is to show what your get on String item.

4. Done !

Now, debug it and you will get what I said at the first.
Here’s the complete MainActivity class look like.
import android.os.Bundle; 
import android.app.ListActivity;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends ListActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

String[] values = new String[] { "Android", "iPhone", "WindowsMobile"};
// First parameter - Context
// Second parameter - Layout for the row
// Third parameter - ID of the TextView to which the data is written
// Forth - the Array of data

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, android.R.id.text1, values);
// Assign adapter to ListView
setListAdapter(adapter);
}

@Override
public void onListItemClick(ListView l,View v,int position,long id){
String item = (String)getListAdapter().getItem(position);
Toast.makeText(getApplicationContext(),
item+"", Toast.LENGTH_SHORT)
.show();

}
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s