Post
Ask Question

Create Custom Listener on Button in ListItem (ListView) in Android

Introduction

 
Hi friends, this is my first article on C# Corner, I am Ravi Sharma, an Android developer. 
 
This article is intended to make a custom listener on a button, that belongs to a list item. This article is another answer for the interview question “How to use an interface in Android?“.
 
Now to discuss the code to understand how to make a custom listener.
 
For doing this, first make a string array in a string file, this file is automatically generated in the value folder in the res folder as in the following:
 
values
 
Put the following code in this file,
  1. <string-array name="listdata">    
  2.       <item>item 1</item>    
  3.       <item>item 2</item>    
  4.       <item>item 3</item>    
  5.       <item>item 4</item>    
  6.       <item>item 5</item>    
  7.       <item>item 6</item>    
  8.       <item>item 7</item>    
  9.       <item>item 8</item>    
  10.       <item>item 9</item>    
  11.       <item>item 10</item>    
  12.       <item>item 11</item>    
  13.       <item>item 12</item>    
  14.       <item>item 13</item>    
  15.       <item>item 14</item>    
  16.       <item>item 15</item>    
  17.       <item>item 16</item>    
  18.       <item>item 17</item>    
  19.       <item>item 17</item>    
  20.       <item>item 18</item>    
  21.       <item>item 19</item>    
  22.       <item>item 20</item>    
  23.   </string-array>  
Then make a layout for the activity with the code below,
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
  2.     xmlns:tools="http://schemas.android.com/tools"    
  3.     android:id="@+id/container"    
  4.     android:layout_width="match_parent"    
  5.     android:layout_height="match_parent" >    
  6.     
  7.     <ListView    
  8.         android:id="@+id/listView"    
  9.         android:layout_width="fill_parent"    
  10.         android:layout_height="fill_parent" >    
  11.     </ListView>    
  12.     
  13. </RelativeLayout>  
Then make the child layout for the list, the code is below:
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:paddingBottom="@dimen/activity_vertical_margin"  
  6.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  7.     android:paddingRight="@dimen/activity_horizontal_margin"  
  8.     android:paddingTop="@dimen/activity_vertical_margin"  
  9.     tools:context="com.example.articalonlistiner.MainActivity$PlaceholderFragment" >  
  10.   
  11.     <TextView  
  12.         android:id="@+id/childTextView"  
  13.         android:layout_width="wrap_content"  
  14.         android:layout_height="match_parent"  
  15.         android:layout_alignParentLeft="true" />  
  16.   
  17.     <Button  
  18.         android:id="@+id/childButton"  
  19.         android:layout_width="wrap_content"  
  20.         android:layout_height="wrap_content"  
  21.         android:layout_alignParentRight="true"  
  22.         android:text="Click Me" />  
  23.   
  24. </RelativeLayout>  
Now make the reference of the ListView and Adapter.
 
Make an activity (MainActivity.java) in the src folder.
 
main activity
 
Write that code in the MainActivity.
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
  2.     xmlns:tools="http://schemas.android.com/tools"    
  3.     android:id="@+id/container"    
  4.     android:layout_width="match_parent"    
  5.     android:layout_height="match_parent" >    
  6.     
  7.     <ListView    
  8.         android:id="@+id/listView"    
  9.         android:layout_width="fill_parent"    
  10.         android:layout_height="fill_parent" >    
  11.     </ListView>    
  12.     
  13. </RelativeLayout>  
This code shows the error because you have not made the ListAdapter.java file in the src folder. Please make that file and extend it with ArrayAdapter<String>.
  1. public class ListAdapter extends ArrayAdapter<String>   
Then make the constructor of the ListAdapter as in the following,
  1. public ListAdapter(Context context, ArrayList<String> dataItem) {    
  2.         super(context, R.layout.child_listview, dataItem);    
  3.         this.data = dataItem;    
  4.         this.context = context;    
  5.     }   
There R.layout.child_listview is the child view of the ListView.
 
Now make an interface in ListAdapter, this interface works like a listener for the button.
  1. customButtonListener customListner;    
  2.     
  3.     public interface customButtonListener {    
  4.         public void onButtonClickListner(int position,String value);    
  5.     }   
And make a method to set the instance of the activity that has a ListView.
  1. public void setCustomButtonListner(customButtonListener listener) {    
  2.         this.customListner = listener;    
  3.     } 
This method shares the context of the MainActivity with the interface to use this.
 
Make a child class in ListAdapter.
  1. public class ViewHolder {    
  2.         TextView text;    
  3.         Button button;    
  4.     }   
If you have more items in the listItem view then add all the references in the ViewHolder class.
 
Now focus on the getview method of the adapter.
 
For this override the getView method. 
  1. @Override    
  2.     public View getView(final int position, View convertView, ViewGroup parent) {    
  3.         ViewHolder viewHolder;    
  4.         if (convertView == null) {    
  5.             LayoutInflater inflater = LayoutInflater.from(context);    
  6.             convertView = inflater.inflate(R.layout.child_listview, null);    
  7.             viewHolder = new ViewHolder();    
  8.             viewHolder.text = (TextView) convertView    
  9.                     .findViewById(R.id.childTextView);    
  10.             viewHolder.button = (Button) convertView    
  11.                     .findViewById(R.id.childButton);    
  12.             convertView.setTag(viewHolder);    
  13.         } else {    
  14.             viewHolder = (ViewHolder) convertView.getTag();    
  15.         }    
  16.         final String temp = getItem(position);    
  17.         viewHolder.text.setText(temp);    
  18.         viewHolder.button.setOnClickListener(new OnClickListener() {    
  19.     
  20.             @Override    
  21.             public void onClick(View v) {    
  22.                 if (customListner != null) {    
  23.                     customListner.onButtonClickListner(position,temp);    
  24.                 }    
  25.     
  26.             }    
  27.         });    
  28.     
  29.         return convertView;    
  30.     }   
Note- Here the yellow marked function is new for you. This is the main function to provide a listener for the button of each item of the list view. This function returns a callback for MainActivity because the MainActivity shares our context with the listener.
 
To use this you should implement this interface in MainActivity.
  1. public class MainActivity extends Activity implements    
  2.         customButtonListener  
After implementing this, this interface overrides the method. The method gives you the position of the list adapter.
 
I implemented it only to show the toast. It is the code of my function.
  1. @Override    
  2.     public void onButtonClickListner(int position, String value) {    
  3.         Toast.makeText(MainActivity.this, "Button click " + value,    
  4.                 Toast.LENGTH_SHORT).show();    
  5.     
  6.     }  
The output of this article is like,
 
genymotion
 
You can implement your method, whatever you want to do with the button.
 
Here is the simple Toast.
 
This article is over now. The following is the entire code of the MainActivity and List Adapter.
 
MainActivity
  1. package com.example.articalonlistiner;    
  2.     
  3. import java.util.ArrayList;    
  4. import java.util.Arrays;    
  5. import java.util.List;    
  6.     
  7. import com.example.articalonlistiner.ListAdapter.customButtonListener;    
  8.     
  9. import android.os.Bundle;    
  10. import android.support.v7.app.ActionBarActivity;    
  11. import android.widget.ListView;    
  12. import android.widget.Toast;    
  13.     
  14. public class MainActivity extends ActionBarActivity implements    
  15.         customButtonListener {    
  16.     
  17.     private ListView listView;    
  18.     ListAdapter adapter;    
  19.     ArrayList<String> dataItems = new ArrayList<String>();    
  20.     
  21.     @Override    
  22.     protected void onCreate(Bundle savedInstanceState) {    
  23.         super.onCreate(savedInstanceState);    
  24.         setContentView(R.layout.activity_main);    
  25.         String[] dataArray = getResources().getStringArray(R.array.listdata);    
  26.         List<String> dataTemp = Arrays.asList(dataArray);    
  27.         dataItems.addAll(dataTemp);    
  28.         listView = (ListView) findViewById(R.id.listView);    
  29.         adapter = new ListAdapter(MainActivity.this, dataItems);    
  30.         adapter.setCustomButtonListner(MainActivity.this);    
  31.         listView.setAdapter(adapter);    
  32.     
  33.     }    
  34.     
  35.     @Override    
  36.     public void onButtonClickListner(int position, String value) {    
  37.         Toast.makeText(MainActivity.this, "Button click " + value,    
  38.                 Toast.LENGTH_SHORT).show();    
  39.     
  40.     }    
  41.     
  42. }   
ListAdapter
  1. package com.example.articalonlistiner;    
  2.     
  3. import java.util.ArrayList;    
  4.     
  5. import android.content.Context;    
  6. import android.view.LayoutInflater;    
  7. import android.view.View;    
  8. import android.view.View.OnClickListener;    
  9. import android.view.ViewGroup;    
  10. import android.widget.ArrayAdapter;    
  11. import android.widget.Button;    
  12. import android.widget.TextView;    
  13.     
  14. public class ListAdapter extends ArrayAdapter<String> {    
  15.     customButtonListener customListner;    
  16.     
  17.     public interface customButtonListener {    
  18.         public void onButtonClickListner(int position,String value);    
  19.     }    
  20.     
  21.     public void setCustomButtonListner(customButtonListener listener) {    
  22.         this.customListner = listener;    
  23.     }    
  24.     
  25.     private Context context;    
  26.     private ArrayList<String> data = new ArrayList<String>();    
  27.     
  28.     public ListAdapter(Context context, ArrayList<String> dataItem) {    
  29.         super(context, R.layout.child_listview, dataItem);    
  30.         this.data = dataItem;    
  31.         this.context = context;    
  32.     }    
  33.     
  34.     @Override    
  35.     public View getView(final int position, View convertView, ViewGroup parent) {    
  36.         ViewHolder viewHolder;    
  37.         if (convertView == null) {    
  38.             LayoutInflater inflater = LayoutInflater.from(context);    
  39.             convertView = inflater.inflate(R.layout.child_listview, null);    
  40.             viewHolder = new ViewHolder();    
  41.             viewHolder.text = (TextView) convertView    
  42.                     .findViewById(R.id.childTextView);    
  43.             viewHolder.button = (Button) convertView    
  44.                     .findViewById(R.id.childButton);    
  45.             convertView.setTag(viewHolder);    
  46.         } else {    
  47.             viewHolder = (ViewHolder) convertView.getTag();    
  48.         }    
  49.         final String temp = getItem(position);    
  50.         viewHolder.text.setText(temp);    
  51.         viewHolder.button.setOnClickListener(new OnClickListener() {    
  52.     
  53.             @Override    
  54.             public void onClick(View v) {    
  55.                 if (customListner != null) {    
  56.                     customListner.onButtonClickListner(position,temp);    
  57.                 }    
  58.     
  59.             }    
  60.         });    
  61.     
  62.         return convertView;    
  63.     }    
  64.     
  65.     public class ViewHolder {    
  66.         TextView text;    
  67.         Button button;    
  68.     }    
  69. }   
If anyone has a query then provide it in the comments.
 
Thank for reading. 


Similar Articles