CustomListView

     "Custom ListView"   

     Hello friends, In previous blog we are studied about ListView with ArrayAdapter. Now in this block weare going to study about custom ListView using BaseAdapter.

     In previous blog we have created one Simple ListView that contains only text. The custom ListView means creating custom layout of list items. In this tutorial we are going to adding image, text and button in one list row.

     Before implementing custom ListView lets know about BaseAdapter. In Android, an Adapter is a bridhe between UI component and data source (Like, ArrayList, Array etc) that help us to fill data in UI components.

    To customize ListView we can create own Adapter class with own layout file by extending BaseAdapter class. BaseAdapter can be used for implementing custom ListView, GridView , Spinner etc.

    The following code snippet shows the overrid methods of BaseAdapter class.

package com.custom.customlistviewdemo; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; public class MyAdapter extends BaseAdapter { @Override public int getCount() { //TODO : This method returns the total count of list items to be shown in list view return 0; } @Override public Object getItem(int i) { //TODO : This method used to get the list item with specified position in the data set. return null; } @Override public long getItemId(int i) { //TODO : It returns Item id with specified position. It returns long value of item id return 0; } @Override public View getView(int i, View view, ViewGroup viewGroup) { //TODO : In this we create or set the layout file to adapter class using inflater and set data to UI components Like Imageview, Textview //TODO : It creates custom view for listview return null; } }

    In above code snippet shows an structure and uses of methods of BaseAdapter. Now lets see one example of BaseAdapter.

    In below example we display list with ImageView, TextView and Button to understand how to implement custom ListView.

package com.custom.customlistviewdemo; import android.app.AlertDialog; import android.content.Context; import android.content.DialogInterface; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.Button; import android.widget.ImageView; import android.widget.ListView; import android.widget.TextView; import java.util.ArrayList; public class MyAdapter extends BaseAdapter { private Context context; private ArrayList<string> listItems; private ArrayList<integer> imageArray; private LayoutInflater inflater; public MyAdapter(Context context, ArrayList<string> listItems, ArrayList<integer> imageArray) { this.context = context; this.listItems = listItems; this.imageArray = imageArray; this.inflater = LayoutInflater.from(context); } @Override public int getCount() { //TODO : This method returns the total count of list items to be shown in list view return listItems.size(); //Return the size of array list } @Override public Object getItem(int i) { //TODO : This method used to get the list item with specified position in the data set. return null; } @Override public long getItemId(int i) { //TODO : It returns Item id with specified position. It returns long value of item id return 0; } @Override public View getView(final int i, View view, ViewGroup viewGroup) { //TODO : In this we create or set the layout file to adapter class using inflater and set data to UI components Like Imageview, Textview //TODO : It creates custom view for listview View v = inflater.inflate(R.layout.custom_view, null, false); final int position = i; TextView item_tv = v.findViewById(R.id.itemname_tv); ImageView list_img = v.findViewById(R.id.list_img); Button delete_btn = v.findViewById(R.id.delete_btn); //set text to item text view item_tv.setText(listItems.get(position)); //set image from image array list_img.setImageResource(imageArray.get(i)); //set click listener to button //Delete list item delete_btn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { AlertDialog.Builder builder = new AlertDialog.Builder(context); builder.setTitle("Delete") .setMessage("Are you sure to delete?") .setPositiveButton("Yes", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { //Delete list item and refresh list by calling notifyDataSetChanged() method listItems.remove(position); imageArray.remove(position); notifyDataSetChanged(); } }) .setNegativeButton("No", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { } }); AlertDialog dialog = builder.create(); dialog.show(); } }); return v; } }

   Now create a layout file of above class as follow.

<?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="wrap_content" android:layout_margin="2dp" android:orientation="horizontal"> <ImageView android:id="@+id/list_img" android:layout_width="100dp" android:layout_height="100dp" android:src="@mipmap/ic_launcher" /> <TextView android:id="@+id/itemname_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="10dp" android:text="List Item Name" android:textSize="27dp" /> <Button android:id="@+id/delete_btn" android:layout_width="40dp" android:layout_height="40dp" android:layout_gravity="center_vertical" android:layout_marginLeft="10dp" android:background="#00f20018" android:drawableLeft="@android:drawable/ic_menu_delete" /> </LinearLayout>

   After creating above two file its time to add listview in activity_main.xml file and set above custom adapter to ListView in MainActivity.java file. Lets see the following code snippet

  Copy and paste the following code in MainActivity.java file

package com.custom.customlistviewdemo; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.ListView; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { private ListView custom_listview; private ArrayList<string> listItem; private ArrayList<integer> imageList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); custom_listview = findViewById(R.id.custom_listview); //Add list items in array list listItem = new ArrayList<>(); listItem.add("KitKat"); listItem.add("Lollipop"); listItem.add("Marshmallow"); listItem.add("Nougat"); listItem.add("Oreo"); //Add images in array list imageList = new ArrayList<>(); imageList.add(R.drawable.kitkat); imageList.add(R.drawable.lollipop); imageList.add(R.drawable.marshmallow); imageList.add(R.drawable.nougat); imageList.add(R.drawable.oreo); //Create MyAdapter class instance and pass context and array list to adapter constructor MyAdapter myAdapter = new MyAdapter(this,listItem,imageList); //set adapter to listview custom_listview.setAdapter(myAdapter); } }

In above code "MainActivity.java", I have created two arraylist. One for list items which is string type and another one for images which is integer type arraylist. And this two arraylits are passed to the custom adapter class ie "MyAdapter.java".

  Now create the layout file of MainActivity.java class, It contains ListView. See the following code.

<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <ListView android:id="@+id/custom_listview" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>

  Done! Now run your code and see the output. If having any query don't be hesitate, type your query in comment box.
Enjoy coding!😊

Click Here To Download Full Code

Get full code