Monday 13 June 2011

ListView with custom layout

If you want rows to have a different look than the stock rows, one way to accomplish this is to supply your own layout XML to be used for each row, telling Android to use your layout rather than one of the built-in ones. This gives you complete control over what goes in the row and how it is laid out.
For example, suppose you want a ListView whose entries are made up of an icon, followed by some text. You could construct a layout for the row that looks like this:

Step 1-:Create a row layout according to your requirement here we have taken an example it is.

 <?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="fill_parent">
<ImageView android:id="@+id/Image" android:layout_margin="5dip"
android:background="@drawable/icon" android:layout_width="wrap_content"
android:layout_height="wrap_content"></ImageView>
<TextView android:id="@+id/ImageTitle" android:text="ImageTitle"
android:layout_toRightOf="@+id/Image" android:textColor="#FFFFFF"
android:layout_alignTop="@+id/Image"android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
<TextView android:id="@+id/ImageDescription" android:text="ImageDescription"
android:layout_toRightOf="@+id/Image" android:layout_below="@+id/ImageTitle"
android:textColor="#FFFFFF" android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
</RelativeLayout>

Step 2-:Create a own adapter class with View Holder class for listview.

public class ListViewExample extends Activity {
String ImageTitle_arr[] = { "ImageTitle-1", "ImageTitle-2", "ImageTitle-3",
"ImageTitle-4", "ImageTitle-5", "ImageTitle-6", "ImageTitle-7",
"ImageTitle-8", "ImageTitle-9" };
String ImageDescription_arr[] = { "ImageDescription-1",
"ImageDescription-2", "ImageDescription-3", "ImageDescription-4",
"ImageDescription-5", "ImageDescription-6", "ImageDescription-7",
"ImageDescription-8", "ImageDescription-9" };

private ListView ListView01;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ListView01 = (ListView) findViewById(R.id.ListView01);

/** Set own adapter in listView */
ListView01.setAdapter(new SimpleAdapter(this));
}
private class SimpleAdapter extends BaseAdapter {
private LayoutInflater mInflater;

public SimpleAdapter(Context context) {
mInflater = LayoutInflater.from(context);
}
@Override
public int getCount() {
return ImageTitle_arr.length - 1;
}
@Override
public Object getItem(int arg0) {
return null;
}
@Override
public long getItemId(int arg0) {
return 0;
}
/**
* This getView method inflate the view if it is null and set the value
* accordingly
*/
@Override
public View getView(int position, View customView, ViewGroup arg2) {
ViewHolder tempLayoutHolder;
if (customView == null) {
customView = mInflater.inflate(R.layout.customlayout, null);
tempLayoutHolder = new ViewHolder();
tempLayoutHolder.Image = (ImageView) customView
.findViewById(R.id.Image);
tempLayoutHolder.ImageTitle = (TextView) customView
.findViewById(R.id.ImageTitle);
tempLayoutHolder.ImageDescription = (TextView) customView
.findViewById(R.id.ImageDescription);
tempLayoutHolder.Image.setImageResource(R.drawable.icon);
tempLayoutHolder.ImageTitle.setText(ImageTitle_arr[position]);
tempLayoutHolder.ImageDescription
.setText(ImageDescription_arr[position]);
customView.setTag(tempLayoutHolder);
}
return customView;
}
}
/** This is the ViewHoldwe is use for hold the view temporary */
private class ViewHolder {
ImageView Image;
TextView ImageTitle;
TextView ImageDescription;
}
}
Step 3-:Run the project

Android- Simple ListView Tutorial -1


List View -: is one of Android's most widely used widgets. It is rather easy to use, very flexible, and incredibly powerful. "ListView"  is used to show a list of items in a vertically scrolling list. "ListView" gets the data to display via an adapter.
Adapter -:Android has two standard adapters, ArrayAdapter and CursorAdapter . "ArrayAdapter" can handle data based on Arrays or Lists while "SimpleCursorAdapter" handle database related data.
                                                     You can develop your own Adapter by extending these classes or the BaseAdapter class. An adapter which must extend "BaseAdapter" and is responsible for providing the data model for the list and for converting the data into the fields of the list.
ListActivity -: An activity that displays a list of items by binding to a data source such as an array or Cursor, and exposes event handlers when the user selects an item.
Now we are going to see about a simple listview example. In Android


Step 1-: Create a simplelistlayout.xml file in side the layout folder of the project 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ListView android:id="@+id/ListView01"android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

</LinearLayout>

Step 2-: Create a ListViewExample class .
public class ListViewExample extends Activity {
    /** Array of items they are display in ListView */
private String Items_arr[]={"List View Item-1","List View Item-2","List View Item-3","List View Item-4","List View Item-5","List View Item-6","List View Item-7","List View Item-8","List View Item-9"};
    private ListView ListView01;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.main);
        ListView01 =(ListView)findViewById(R.id.ListView01);
        /** By using setAdpater method in listview we an add string array in list.*/
        ListView01.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1 , Items_arr));
    }
}

Step 3-: Run the application.