Using Adapters with List View

In this example , we will be using Adapter to diaply data in a List. Also, whenever user clicks on a particular item, respective image shows up in the image view below.

Steps to develop this can be summarized below -

• Make a new project with Empty Activity.
• Add two arrays - one for names another for respective images
• Use ArrayAdapter to connect the data source i.e. array and view.
• Make a layout which contains a listview and an Image View.
• Make a testview to be sued to display individual items in the listview.
• Implement AdapterView.OnItemClickListener and override its method - OnItemClickListener
• Any click on one of the items on the list is detected by onItemClickListener
• OnItemClick method provides the position of the click,AdapterView object, clicked view id and view object
• We use the position argument to display the respective image on the ImageView.

Used Concepts & Used Version:

compileSdkVersion 23

buildToolsVersion "25.0.0"

Now, let us begin the development...

1.ListDisplay Activity (Launcher Activity)

package in.sisoft.android.adapter1; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.Adapter; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.ListView; import android.widget.Toast; public class ListDisplay extends Activity implements AdapterView.OnItemClickListener { // Array of strings... String[] RestArray = {"KFC","McDonalds","Pizza Hut", "StartBucks","Subway"}; int[] RestImage = {R.drawable.kfc,R.drawable.mcd, R.drawable.pizzahut,R.drawable.starbucks,R.drawable.subway}; ImageView iv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); iv = (ImageView)findViewById(R.id.iv); ArrayAdapter adapter = new ArrayAdapter<String> (this, R.layout.activity_listview, RestArray); ListView listView = (ListView) findViewById(R.id.rest_list); listView.setAdapter(adapter); listView.setOnItemClickListener(this); } public void onItemClick(AdapterView parent,View v,int position,long id) { Toast.makeText(this,RestArray[position],Toast.LENGTH_SHORT).show(); iv.setImageResource(RestImage[position]); } }

2. Layout for ListDisplay.class

<LinearLayout 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:orientation="vertical" tools:context=".ListDisplay" > <ListView android:id="@+id/rest_list" android:layout_width="match_parent" android:layout_height="wrap_content" > </ListView> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/iv"/> </LinearLayout>

3.activity_listview.xml (For every unit of list view)

<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/label" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dip" android:textSize="16dip" android:textStyle="bold" > </TextView>

Whenever user clicks on one of the list items, they see respective image below.