Android ListView is a view which groups several items and display them in vertical scrollable list. The list items are automatically inserted to the list using an Adapter that pulls content from a source such as an array or database.
An adapter actually bridges between UI components and the data source that fill data into UI Component. Adapter can be used to supply the data to like spinner, list view, grid view etc.
In this example i will be demonstrating how to build simple android ListView and Custom ListView. This article is about creating simple ListView with textViews and CustomListView with textViews and Images.
Let’s get start by creating a project in Eclipse IDE.
1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java)
2. Open your your AndroidManifest.xml file and make your “MainActivity” as Launcher activity.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.listview_demo" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="22" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> |
3. Create a layout file for MainActivtiy.java under res ⇒ layout folder. I named the layout file as activity_main.xml. This will be your first launching activity layout.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ListView android:id="@+id/listView1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:divider="#ff00" android:dividerHeight="2dp" > </ListView> </RelativeLayout> |
4. Add the following code in MainActivity.java activity. In this following code we make a ArrayList and use Adapter for manages the data model and adapts it to the individual entries in the widget.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
package com.listview_demo; import java.util.ArrayList; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.View; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.ArrayAdapter; import android.widget.ListView; import android.widget.Toast; public class MainActivity extends ActionBarActivity { ListView list; ArrayList<String> array; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); list = (ListView) findViewById(R.id.listView1); // initialize array list array = new ArrayList<String>(); // adding items into listview for (int i = 0; i < 6; i++) { array.add("Item" + i); } // array adapter to hold the list items ArrayAdapter<String> adapter = new ArrayAdapter<String>( MainActivity.this, android.R.layout.simple_list_item_1, array); // setting array adapter over list view list.setAdapter(adapter); // Notifying adapter for data changed adapter.notifyDataSetChanged(); list.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<> arg0, View arg1, int position, long arg3) { // Showing a toast on item click Toast.makeText(MainActivity.this, "You had clicked over item :" + position, Toast.LENGTH_SHORT).show(); } }); } } |
5. Run the application and you will get the output as shown in video.
1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java)
2. Open your your AndroidManifest.xml file and make your MainActivity as Launcher activity.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.customlistview" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="22" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> |
3. Create a layout file for MainActivtiy.java under res ⇒ layout folder. I named the layout file as activity_main.xml. This will be your first launching activity layout.
1 2 3 4 5 6 7 8 9 10 11 12 |
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ListView android:id="@+id/list" android:layout_width="fill_parent" android:layout_height="fill_parent" > </ListView> </RelativeLayout> |
4. Create a layout file for custom views for listview under res ⇒ layout folder. I named the layout file as custom.xml. This will be your custom layout for listview.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="5dp" > <ImageView android:id="@+id/image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5dp" /> <TextView android:id="@+id/text" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:padding="5dp" android:text="TextView" /> </LinearLayout> |
5. Create a Items.java class for setting and getting listview items from it. This class works as getter and setter for listview items.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
package com.customlistview; public class Items { String title; Integer image; public Items(String title, Integer image) { // Setter this.image = image; this.title = title; } // Getter public String getTitle() { return title; } public Integer getImage() { return image; } } |
6. Create a CustomAdapter.java class for custom listview adapter for inflating custom view over listView.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
package com.customlistview; import java.util.ArrayList; import android.content.Context; import android.media.Image; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView; public class CustomAdapter extends BaseAdapter { Context context; ArrayList<Items> arraylist; public CustomAdapter(Context context, ArrayList<Items> arraylist) { this.context = context; this.arraylist = arraylist; } @Override public int getCount() { // array list size return arraylist.size(); } @Override public Object getItem(int arg0) { // array list items return arraylist.get(arg0); } @Override public long getItemId(int pos) { // item id return pos; } @Override public View getView(int position, View view, ViewGroup parent) { ViewHolder holder = null; //Layout Inflater for inflating a layout over listview LayoutInflater inflater = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); if (view == null) { view = inflater.inflate(R.layout.custom, parent, false); holder = new ViewHolder(); holder.text = (TextView) view.findViewById(R.id.text); holder.iamge = (ImageView) view.findViewById(R.id.image); view.setTag(holder); } else { holder = (ViewHolder) view.getTag(); } //Getting title and imageview from ITEMS class String title = arraylist.get(position).getTitle(); Integer image_ = arraylist.get(position).getImage(); //Setting title and image on textView and imageview holder.text.setText(title); holder.iamge.setBackgroundResource(image_); return view; } //view Holder class for holding views public class ViewHolder { TextView text; ImageView iamge; } } |
7. Add the following code in MainActivity.java activity. In this following code we learn how to use custom adapter in listview and set custom listview over adapter.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
package com.customlistview; import java.util.ArrayList; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.util.Log; import android.view.View; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.ListView; import android.widget.Toast; public class MainActivity extends ActionBarActivity { ListView list; Items items; CustomAdapter adapter; ArrayList<Items> arraylist; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); list = (ListView) findViewById(R.id.list); // initialize the aarray list arraylist = new ArrayList<Items>(); // adding items to array list arraylist.add(new Items("Cupcake", R.drawable.cupcake)); arraylist.add(new Items("Donut", R.drawable.donut)); arraylist.add(new Items("Eclair", R.drawable.eclair)); arraylist.add(new Items("Froyo", R.drawable.froyo)); arraylist.add(new Items("Gingerbread", R.drawable.gingerbread)); arraylist.add(new Items("Honeycomb", R.drawable.honeycomb)); arraylist.add(new Items("Icecreamsandwich", R.drawable.icecream)); adapter = new CustomAdapter(MainActivity.this, arraylist); list.setAdapter(adapter); adapter.notifyDataSetChanged(); list.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<> arg0, View arg1, int position, long arg3) { // Showing clicked items title Toast.makeText(MainActivity.this, arraylist.get(position).getTitle(), Toast.LENGTH_SHORT) .show(); } }); } } |
8. Run the application and you will get the output as shown in video and you are done.
Thanks. 🙂
Subscribe to us and get the latest news.