Android App ListView Adapter - Day Six

Before moving further, please refer to the article series on Android:

Introduction:

In this article I will show you how to show data in ListView. There are many methods to show a data in ListView, but I have made custom adapter because in this adapter you can easily customize the rows.

What is ListView
  • ListView is a view group that displays a list of scrollable items.
  • The list items are automatically inserted to the list using an Adapter that pulls content from a source such as an array or database query and converts each item result into a view that's placed into the list.

Step 1:

  1. Create a layout activity_product_list.xml
  2. Create ListView in activity_product_list.xml

    xml

Design

output

Step 2:

What is ListRow

  • Every line in the list view consists of a layout which can be as complex as you want. 
  • A typical line in a list view has an image on the left side and two text lines in the middle as depicted in the following graphic.
Code of ListRow name as row_product_list.xml?
  1. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"  
  2. android:layout_width="fill_parent"  
  3. android:layout_height="wrap_content"  
  4. android:background="#665544"  
  5. android:orientation="horizontal"  
  6. android:padding="2dp">  
  7.   
  8. <LinearLayout  
  9. android:layout_width="wrap_content"  
  10. android:layout_height="wrap_content"  
  11. android:background="@color/black"  
  12. android:padding="2dp">  
  13.   
  14. <!--image-->  
  15. <ImageView  
  16. android:layout_width="wrap_content"  
  17. android:layout_height="wrap_content"  
  18. android:adjustViewBounds="true"  
  19. android:scaleType="fitXY"  
  20. android:src="@drawable/ic_lion" />  
  21. <!--title-->  
  22.   
  23. </LinearLayout>  
  24.   
  25. <LinearLayout  
  26. android:layout_width="match_parent"  
  27. android:layout_height="match_parent"  
  28. android:background="#4433ff"  
  29. android:orientation="vertical"  
  30. android:padding="10dp">  
  31. <TextView  
  32. android:id="@+id/row_product_name"  
  33. android:layout_width="match_parent"  
  34. android:layout_height="wrap_content"  
  35. android:text="Name here"  
  36. android:textColor="@color/black"  
  37. android:textSize="20sp" />  
  38.   
  39. <TextView  
  40. android:id="@+id/row_product_price"  
  41. android:layout_width="match_parent"  
  42. android:layout_height="wrap_content"  
  43. android:text="Price"  
  44. android:textColor="@color/white"  
  45. android:textSize="15sp" />  
  46.   
  47. </LinearLayout>  
  48.   
  49. </LinearLayout>  
output

Now you can see that we made one row and all the ListRow follows this design.

Step 3:

Go to the ProductListActivity.class and paste the following code,

  1. package com.khawarislam.customclass;  
  2.   
  3. import android.app.Activity;  
  4. import android.content.Context;  
  5. import android.content.Intent;  
  6. import android.os.Bundle;  
  7. import android.support.v7.app.AppCompatActivity;  
  8. import android.view.View;  
  9. import android.widget.AdapterView;  
  10. import android.widget.ListView;  
  11. import android.widget.Toast;  
  12.   
  13. import java.util.ArrayList;  
  14.   
  15. public class ProductListActivityextends Activity   
  16. {  
  17.   
  18.     ListViewmListView;  
  19.     Context context;  
  20.     ArrayList < Product > arrayList;  
  21.     @Override  
  22.     protected void onCreate(Bundle savedInstanceState)  
  23.     {  
  24.         super.onCreate(savedInstanceState);  
  25.         context = this;  
  26.         setContentView(R.layout.activity_product_list);  
  27.         arrayList = new ArrayList < > ();  
  28.         final ProductDatasourcemProductDatasource = new ProductDatasource();  
  29.   
  30.         arrayList = mProductDatasource.getItemarrayList();  
  31.         mListView = (ListView) findViewById(R.id.product_listview);  
  32.   
  33.         ProductAdaptarmProductAdaptar = new ProductAdaptar(context, arrayList);  
  34.         mListView.setAdapter(mProductAdaptar);  
  35.         mListView.setOnItemClickListener(new AdapterView.OnItemClickListener()  
  36.         {  
  37.   
  38.             @Override  
  39.             public void onItemClick(AdapterView < ? > parent, View view, intposition, long id)  
  40.             {  
  41.                 Product mProduct = arrayList.get(position);  
  42.                 mProductDatasource.insert(mProduct);  
  43.                 Toast.makeText(context, mProduct.getProduct_name(), Toast.LENGTH_SHORT).show();  
  44.             }  
  45.         });  
  46.   
  47.     }  
  48. }  
Step 4:

What is Adapter
?
  • An adapter manages the data model and adapts it to the individual rows in the list view. An adapter extends the BaseAdapter class.

What is ArrayAdapter?

  • ArrayAdapter can handle data based on Arrays. The ArrayAdapter class can handle a list or array of Java objects as input. Every Java object is mapped to one row.

Default Vs Custom Adapter

Default Adapter:

  • Android provides default adapter implementations. It can only handle String values.

Custom Adapter:

  • The adapter needs to create a layout for each row of the list. The ListView instance calls the getView() method on the adapter for each data element. In this method the adapter creates the row layout and maps the data to the views in the layout.

Create a custom adapter class ProductAdapter.java,

java

Now as we can see in this image we declared two methods: one method is to make object of arraylist of product and another we declare two textview and assign it into datasource.

What is LayoutInflater

  • Instantiates a layout XML file into its corresponding View objects. It is never used directly. Instead, use getLayoutInflater() or getSystemService(String) to retrieve a standard LayoutInflater instance that is already hooked up to the current context and correctly configured for the device you are running on.
For Example:
  1. LayoutInflaterinflater = (LayoutInflater) context .getSystemService(Context. LAYOUT_INFLATER_SERVICE);  
  2. View rowView = inflater.inflate(R.layout.row_product_list, parent, false); 

Read more articles on Android:

Next Recommended Readings