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.



Friday, 27 May 2011


The simple android custom listview can assist only a single string, where its not possible to use them on all application. This leads to create custom list view example tutorial .
Step 1:
Add a normal listview in the main.xml layout and make sure u set the layout width as fill parent.
Main.xml
[sourcecode language="xml"]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:id="@+id/TextView01" android:layout_height="wrap_content" android:text="List of Country &amp; their denotation" android:textStyle="normal|bold" android:gravity="center_vertical|center_horizontal" android:layout_width="fill_parent"></TextView>
<ListView android:id="@+id/ListView01" android:layout_height="wrap_content"
android:layout_width="fill_parent">
</ListView>
</LinearLayout>
[/sourcecode]
Step 2 :
Add two textview(textview1&textview2) in listview.xml and add background image(bg.png) to textview1.
Listview.xml
[sourcecode language="xml"]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content" android:gravity="left|center"
android:layout_width="wrap_content" android:paddingBottom="5px"
android:paddingTop="5px" android:paddingLeft="5px">
<TextView android:id="@+id/TextView01" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:gravity="center"
android:background="@drawable/bg" android:textColor="#FFFF00"
android:text="hi"></TextView>
<TextView android:text="@+id/TextView02" android:id="@+id/TextView02"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginLeft="10px" android:textColor="#0099CC"></TextView>
</LinearLayout>
[/sourcecode]
Step 3 :
The class EfficientAdapter should extend BaseAdapter for basic listview.
Step 4:
Create a class Holder that contains two textview.
Step 5:
Create two separate variables for country list and denotation.
Step 6:
Set the content view to main and set the set the listview adapter to EfficientAdapter class.
This will load the listcontent in the listview.
[sourcecode language="java"]
import android.app.Activity;
import android.os.Bundle;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ListView;
import android.widget.TextView;
public class customlistview extends Activity {
private static class EfficientAdapter extends BaseAdapter {
private LayoutInflater mInflater;
public EfficientAdapter(Context context) {
mInflater = LayoutInflater.from(context);
}
public int getCount() {
return country.length;
}
public Object getItem(int position) {
return position;
}
public long getItemId(int position) {
return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = mInflater.inflate(R.layout.listview, null);
holder = new ViewHolder();
holder.text = (TextView) convertView
.findViewById(R.id.TextView01);
holder.text2 = (TextView) convertView
.findViewById(R.id.TextView02);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.text.setText(curr[position]);
holder.text2.setText(country[position]);
return convertView;
}
static class ViewHolder {
TextView text;
TextView text2;
}
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ListView l1 = (ListView) findViewById(R.id.ListView01);
l1.setAdapter(new EfficientAdapter(this));
}
private static final String[] country = { "Iceland", "India", "Indonesia",
"Iran", "Iraq", "Ireland", "Israel", "Italy", "Laos", "Latvia",
"Lebanon", "Lesotho ", "Liberia", "Libya", "Lithuania",
"Luxembourg" };
private static final String[] curr = { "ISK", "INR", "IDR", "IRR", "IQD",
"EUR", "ILS", "EUR", "LAK", "LVL", "LBP", "LSL ", "LRD", "LYD",
"LTL ", "EUR"
};
}

[caption id="attachment_1195" align="alignnone" width="480" caption="custom list view in landscape"]