Tuesday, December 10, 2013

Listview, adding items to listview: Android tutorial

Program description:

This is a ListView example program in android.

This activity has a listview, button, and edit text.
User will enter items in edit text, and clicks add button to add that element into listview.

This will show you how to use a listview,  arraylist, arrayadapter.


Brief about adapter design patters used in this program:

User enters data into edit Text --> this data will be inserted into arraylist<String> --> which gives its data to arrayadapter<string> --> which pushes data to destination list view.

Here source is arraylist, bridge is array adapter, and destination is listview.



Adapter View:
Any view that is getting input from any adapter is called as Adapter View.
List view is an example of adapter view.
List view generally will contain vertically scrollable list of items.

Functions of adapters in Android:

  1.  Adapters will take inputs from source and gives to the destination.
  2.  If there is any change in the source and if we notify to the adapter then adapter will  go and modify the destination.
  3. Adapter will take each data item from source and prepare a view and dispatches that view to the destination.
Steps to create list view program:
1.    Create main.xml file with three visible components ( edit text, button and list view).
2.    Go to your activity Java file then create and initialize all the variables.
class MyActivity extends Activity
{
            EditText et;
            Button b;
            List view lv;
            ArrayList <String> al;
            ArrayAdapter <String> aa;
3.    Establish the communication channel between ArrayList and ArrayAdapter.
4.    Establish the communication channel between ArrayAdapter and List View.
5.    Write the button clickListener to establish the channel between EditText an-d ArrayList.

First activity 

package com.techpalle.b15_listview;
import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends Activity {
 //step2 : create all the variables.
 EditText et;
 Button b;
 ListView lv;
 ArrayList al;
 ArrayAdapter aa;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  //step3 : intitalize all the variables.
  et = (EditText) findViewById(R.id.editText1);
  b = (Button) findViewById(R.id.button1);
  lv = (ListView) findViewById(R.id.listView1);
  al = new ArrayList();//initialize array list
  aa = new ArrayAdapter(this, 
    android.R.layout.simple_list_item_1, 
    al);//step4 : establish communication bw arraylist and adapter
  //step5 : establish communication bw adapter and dest (listview)
  lv.setAdapter(aa);
  lv.setOnItemClickListener(new OnItemClickListener() {
   @Override
   public void onItemClick(AdapterView parent, 
     View v, int arg2,
     long arg3) {
    String item = al.get(arg2);
    Toast.makeText(getApplicationContext(), item, 0).show();
   }
  });
  //step6 : button click logic
  b.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    //step i: take text from et and add to arraylist
    String item = et.getText().toString();
    al.add(0, item);
    //step ii: notify to adapter
    aa.notifyDataSetChanged();
    //step iii: clr edit text
    et.setText("");
   }
  });
 }
}

xml file for first activity 
File name : activity_main.xml

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:paddingBottom="@dimen/activity_vertical_margin"  
   android:paddingLeft="@dimen/activity_horizontal_margin"  
   android:paddingRight="@dimen/activity_horizontal_margin"  
   android:paddingTop="@dimen/activity_vertical_margin"  
   tools:context=".MainActivity" >  
   <EditText  
     android:id="@+id/editText1"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_alignParentTop="true"  
     android:layout_centerHorizontal="true"  
     android:hint="Enter item names"  
     android:ems="10" />  
   <Button  
     android:id="@+id/button1"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_below="@+id/editText1"  
     android:layout_centerHorizontal="true"  
     android:text="Add to ListView" />  
   <ListView  
     android:id="@+id/listView1"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:layout_alignLeft="@+id/editText1"  
     android:layout_below="@+id/button1" >  
   </ListView>  
 </RelativeLayout>  

Download complete code : Click to download

Tags : android, listview, arrayadapter, listview setonitemclicklistener, setadapter, listview example, tutorial

2 comments:

  1. Thank you for the tutorial.It worked for me.And one more doubt, what should i do to get the same data while reopening thw app.

    ReplyDelete
  2. Thanku.Have been trying for a long time Finally it worked :)

    ReplyDelete