ListView is used for arranging items in a vertical and scrollable list. ListViews are commonly used to display a large set of similar data.
For example, displaying list of contacts. Item/row is represented by a single item view. This pattern is quite handy as it shows several contacts on screen at the same time. Its helps displaying list of data in a very simple and scrollable manner.
The simplest way to display a list view is using ArrayAdapter class . You can study how to create ListViews using array adapter here. We can also create our own custom adapters using BaseAdapter class. Custom Adapters are way better than array adapters, they give you more control over the list/grid view content and UI .Here we inflate each row of listView using a layout.
The following example explains the usage of ListView using a custom adapter.
Step1: Create the xml for the activity which contains a ListView
activity_main.xml
<RelativeLayout 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"
tools:context=".MainActivity" >
<ListView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/listView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
>
</ListView>
</RelativeLayout>
Step 2: Create a custom layout for each row of the List View.
list_view_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp" >
<ImageView
android:id="@+id/list_item_image"
android:layout_width="50px"
android:layout_height="50px"
android:layout_marginRight="10px"
android:background="@drawable/ic_launcher" >
</ImageView>
<TextView
android:id="@+id/list_item_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5px"
android:text="@+id/label"
android:textSize="15px" >
</TextView>
</LinearLayout>
Step 3: Create a custom adapter in the following way .
ImageAdapter.java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
public class ImageAdapter extends BaseAdapter {
private Context context;
private final String[] StrValues;
public ImageAdapter(Context context, String[] StrValues) {
this.context = context;
this.StrValues = StrValues;
}
// getView that displays the data at the specified position in the data set.
public View getView(int position, View convertView, ViewGroup parent) {
// create a new LayoutInflater
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View gridView;
gridView = null;
convertView = null;// avoids recycling of grid view
if (convertView == null) {
gridView = new View(context);
// inflating grid view item
gridView = inflater.inflate(R.layout.list_view_item, null);
// set value into textview
TextView textView = (TextView) gridView
.findViewById(R.id.list_item_label);
textView.setText(StrValues[position]);
}
return gridView;
}
// Total number of items contained within the adapter
@Override
public int getCount() {
return StrValues.length;
}
@Override
public Object getItem(int position) {
return null;
}
@Override
public long getItemId(int position) {
return 0;
}
}
Step 4: Create the Activity and implement custom adapter in the activity using the code mentioned below.
- Create ImageAdapter type adapter .
- Set ListView adapter as this custom adapter.
- You can set listeners on your list view also.
MainActivity.java
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends Activity {
static final String[] StrValues = new String[] { "one", "two", "three",
"four", "five", "six", "seven", "eight", "nine", "ten", "eleven",
"twelve", "thirteen", "fourteen", "fifteen", "sixteen",
"seventeen", "eighteen", "nineteen", "twenty", "twenty one",
"twenty two" };
ListView listView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
listView = (ListView) findViewById(R.id.listView1);
// setting adapter on listview
listView.setAdapter(new ImageAdapter(this, StrValues));
//setting on item click listener
listView.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {//displaying toast
Toast.makeText(
getApplicationContext(),
((TextView) v.findViewById(R.id.list_item_label))
.getText(), Toast.LENGTH_SHORT).show();
}
});
}
}
Screenshot:
Download
You can also download the above ListView Example here.
Related Posts:
Androidexterous 