2012年12月17日月曜日

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.


<?xml version="1.0" encoding="utf-8"?>
<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" >
    </ListView>

</LinearLayout>

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();
  
 }
}






0 件のコメント:

コメントを投稿