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