Android list view tutorial by Javatechig

  • 463 views
Uploaded on

This post will walk you through Android ListView Tutorial for building simple and customized ListView using different Android adapters. …

This post will walk you through Android ListView Tutorial for building simple and customized ListView using different Android adapters.
List is one of the most common UI patterns, which is being used extensively to display the collection of data elements in rows. In android 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.

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
463
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
15
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Android ListView Tutorial By - Javatechig.com
  • 2. Android ListView Tutorial Table of Contents 1. What is Adapter? 2. Building ListView using ArrayAdapter 3. Building ListView using Custom Adapter 3.1. Create your custom row layout 3.2. Writing a custom adapter 3.3. Putting it all together 3.4. Output 4. Customizing ListView 4.1. Change ListView selection colour in Android 5. How to change the divider color in the ListView? 5.1. Changing ListView divider color and height 5.2. Using a drawable for ListView divider 5.3. Changing ListView divider color pragmatically 6. References This post will walk you through Android ListView Tutorial for building simple and customized ListView using different Android adapters. List is one of the most common UI patterns, which is being used extensively to display the collection of data elements in rows. In android 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. 1. What is Adapter? Adapter is basically bridge between UI components and the data source that fill data into UI Component. Adapter is used to supply the data to like spinner, list view, grid view etc. For example, we can create a list view from xml layout without data, and using adapter we can supply data sets to list view.
  • 3. If you look at the above images you will certainly get an idea of list view. This kind of customizable list views can be done using an adapter. 2. Building ListView using ArrayAdapter This is the simplest way we can create a simple default styled list view from array of elements. To do this there are three things to concentrate, 1. Find out what data you want to display in list: For our example, I am considered taking a static array of strings. But for complex scenarios it can be a response from server, or data fetched from database. 2. Declare the list view object in your xml layout: ListView is the user interface element we are using to represent data to user. So in my example, the layout contains a list view. Make sure you provide an appropriate id. 3. Now finally, feed the list view with the data sets: For this we use adapters. We can always customize our adapter, but for to start let’s make it simple. I am using Array adapter class available in android. Here is how my layout file looks like ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <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=".ListActivity" > <ListView android:id="@+id/months_list" android:layout_width="match_parent" android:layout_height="wrap_content" > </ListView> </LinearLayout> ListActivity.java ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 package com.javatechig.droid.ui; import android.os.Bundle; import android.app.Activity; import android.widget.ArrayAdapter; import android.widget.ListView; public class ListActivity extends Activity { // Initialize the array String[] monthsArray = { "JAN", "FEB", "MAR", "APR", "MAY", "JUNE", "JULY", "AUG", "SEPT", "OCT", "NOV", "DEC" }; // Declare the UI components private ListView monthsListView;
  • 4. 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 private ArrayAdapter arrayAdapter; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_list); // Initialize the UI components monthsListView = (ListView) findViewById(R.id.months_list); // For this moment, you have ListView where you can display a list. // But how can we put this data set to the list? // This is where you need an Adapter // context - The current context. // resource - The resource ID for a layout file containing a layout // to use when instantiating views. // From the third parameter, you plugged the data set to adapter arrayAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, monthsArray); // By using setAdapter method, you plugged the ListView with adapter monthsListView.setAdapter(arrayAdapter); } } Output of the above code is 3. Building ListView using Custom Adapter If you have followed my previous example, then you are ready with a simple list which using ArrayAdapter. Now it’s the time to create something fancy. In this section of tutorial, you will find steps to customize a list using custom adapters.
  • 5. In this above example I am displaying a new list items. Below is my NewsItem object ? 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 public class NewsItem { private String headline; private String reporterName; private String date; public String getHeadline() { return headline; } public void setHeadline(String headline) { this.headline = headline; } public String getReporterName() { return reporterName; } public void setReporterName(String reporterName) { this.reporterName = reporterName; } public String getDate() { return date; } public void setDate(String date) { this.date = date; } @Override public String toString() { return "[ headline=" + headline + ", reporter Name=" + reporterName + " , date=" + date + "]"; } } 3.1. Create your custom row layout I have created a simple layout as shown in the image below, which holds news headline, reported name and date. list_row_layout.xml ? 1 2 3 4 5 6 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:minHeight="50dp" android:orientation="horizontal"
  • 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 android:padding="5dip" > <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:textStyle="bold" android:typeface="sans" /> <TextView android:id="@+id/reporter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/title" android:layout_marginTop="5dip" android:text="" android:textColor="#343434" android:textSize="12sp" /> <TextView android:id="@+id/date" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/reporter" android:layout_alignBottom="@+id/reporter" android:layout_alignParentRight="true" android:text="" android:textColor="#343434" android:textSize="12sp" /> </RelativeLayout> 3.2. Writing a custom adapter CustomListAdapter.java ? 1 2 3 4 5 6 7 8 9 10 11 public class CustomListAdapter extends BaseAdapter { private ArrayList listData; private LayoutInflater layoutInflater; public CustomListAdapter(Context context, ArrayList listData) { this.listData = listData; layoutInflater = LayoutInflater.from(context); } @Override public int getCount() {
  • 7. 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 return listData.size(); } @Override public Object getItem(int position) { return listData.get(position); } @Override public long getItemId(int position) { return position; } public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder; if (convertView == null) { convertView = layoutInflater.inflate(R.layout.list_row_layout, null); holder = new ViewHolder(); holder.headlineView = (TextView) convertView.findViewById(R.id.title); holder.reporterNameView = (TextView) convertView.findViewById(R.id.reporter); holder.reportedDateView = (TextView) convertView.findViewById(R.id.date); convertView.setTag(holder); } else { holder = (ViewHolder) convertView.getTag(); } holder.headlineView.setText(listData.get(position).getHeadline()); holder.reporterNameView.setText("By, " + listData.get(position).getReporterName()); holder.reportedDateView.setText(listData.get(position).getDate()); return convertView; } static class ViewHolder { TextView headlineView; TextView reporterNameView; TextView reportedDateView; } } 3.3. Putting it all together Now we are ready with adapter and layout. Let’s put all of them together and build a custom list.
  • 8. activity_main.xml : This is my main activity layout. For making this example simpler, I just have a ListView inside a LinearLayout. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 <?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="fill_parent" android:orientation="vertical" > <ListView android:id="@+id/custom_list" android:layout_width="fill_parent" android:layout_height="wrap_content" android:dividerHeight="1dp" /> </LinearLayout> Here my activity class MainActivity.java where I am initializing list view and 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 public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ArrayList image_details = getListData(); final ListView lv1 = (ListView) findViewById(R.id.custom_list); lv1.setAdapter(new CustomListAdapter(this, image_details)); lv1.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> a, View v, int position, long id) { Object o = lv1.getItemAtPosition(position); NewsItem newsData = (NewsItem) o; Toast.makeText(MainActivity.this, "Selected :" + " " + newsData, Toast.LENGTH_LONG).show(); } }); } private ArrayList getListData() { ArrayList results = new ArrayList(); NewsItem newsData = new NewsItem(); newsData.setHeadline("Dance of Democracy"); newsData.setReporterName("Pankaj Gupta"); newsData.setDate("May 26, 2013, 13:35"); results.add(newsData);
  • 9. 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 newsData = new NewsItem(); newsData.setHeadline("Major Naxal attacks in the past"); newsData.setReporterName("Pankaj Gupta"); newsData.setDate("May 26, 2013, 13:35"); results.add(newsData); newsData = new NewsItem(); newsData.setHeadline("BCCI suspends Gurunath pending inquiry "); newsData.setReporterName("Rajiv Chandan"); newsData.setDate("May 26, 2013, 13:35"); results.add(newsData); newsData = new NewsItem(); newsData.setHeadline("Life convict can`t claim freedom after 14 yrs: SC"); newsData.setReporterName("Pankaj Gupta"); newsData.setDate("May 26, 2013, 13:35"); results.add(newsData); newsData = new NewsItem(); newsData.setHeadline("Indian Army refuses to share info on soldiers mutilated at LoC"); newsData.setReporterName("Pankaj Gupta"); newsData.setDate("May 26, 2013, 13:35"); results.add(newsData); newsData = new NewsItem(); newsData.setHeadline("French soldier stabbed; link to Woolwich attack being probed"); newsData.setReporterName("Sudeep Nanda"); newsData.setDate("May 26, 2013, 13:35"); results.add(newsData); return results; } } 3.4. Output
  • 10. 4. Customizing ListView Read More from JAVATECHIG.COM