Wednesday, March 17, 2010

Create a Custom ListView

This blog helps to create a custom list view.

Steps to create a Custom List View

1. Create Layout for your listview

2. Create a class which extend the ArrayAdapter

3. Assign the Values to View.

4. Implement the Custom Adapter in the mainactivity


Create Layout for your listview

This layout are used to show the listview as a each view. You can add the multiple view in that. In this example i have added only one textview and change the property.


Sample layout [customlistview.xml]

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:background="#FF04FF" android:layout_width="fill_parent"

android:layout_height="wrap_content">

<TextView android:text="@+id/TextView01" android:id="@+id/TextView01"

android:textColor="#FFFFFF" android:textSize="25px"

android:layout_height="fill_parent" android:layout_width="fill_parent"></TextView>

</LinearLayout>



Create a class which extend the ArrayAdapter & Assign the Values to View.

  • This class should extend the ArrayAdapter.

  • Create a parametrized constructor which pass the Context Object, CustomLayout ID as a integer value and Items as a arraylist.

  • Override getView() and assign the values in that.


Sample Custom Array Adapter Class [as a class member of mainactivity]

private class OrderAdapter extends ArrayAdapter<Order> {

private ArrayList<Order> items;

public OrderAdapter(Context context, int resource, ArrayList<Order> items) {

super(context, resource, items);

this.items = items;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

View v = convertView;

if (v == null) {

LayoutInflater vi = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

v = vi.inflate(R.layout.customlistview, null);

}

Order o = items.get(position);

if (o != null) {

TextView tt = (TextView) v.findViewById(R.id.TextView01);

if (tt != null) {

tt.setText("Name: " + o.getTitleName());

}

}

return v;

}

}


Implement the Custom Adapter in the mainactivity

  • Create a Instance for the custom Adapater class and ArrayList

    OrderAdapter customAdapter;

ArrayList<Order> orderList;


  • get the List of Items

orderList = new ArrayList<Order>();

orderList.add(new Order("first"));

orderList.add(new Order("second"));

orderList.add(new Order("third"));

customAdapter = new OrderAdapter(this, R.layout.customlistview,

orderList);


ListView l = (ListView) findViewById(R.id.ListView01);

l.setAdapter(customAdapter);


Sample Source


MainActivity.java


public class MainActivity extends Activity {

/** Called when the activity is first created. */

OrderAdapter customAdapter;

ArrayList<Order> orderList;


@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);


orderList = new ArrayList<Order>();

orderList.add(new Order("first"));

orderList.add(new Order("second"));

orderList.add(new Order("third"));

customAdapter = new OrderAdapter(this, R.layout.customlistview,

orderList);


ListView l = (ListView) findViewById(R.id.ListView01);

l.setAdapter(customAdapter);

}


private class OrderAdapter extends ArrayAdapter<Order> {


private ArrayList<Order> items;


public OrderAdapter(Context context, int resource,

ArrayList<Order> items) {

super(context, resource, items);

this.items = items;

}


@Override

public View getView(int position, View convertView, ViewGroup parent) {


View v = convertView;

if (v == null) {

LayoutInflater vi = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);


v = vi.inflate(R.layout.customlistview, null);

}

Order o = items.get(position);

if (o != null) {

TextView tt = (TextView) v.findViewById(R.id.TextView01);

if (tt != null) {

tt.setText("Name: " + o.getTitleName());

}

}

return v;

}

}


}


Order.java

public class Order {


public Order(String titleName) {

this.titleName = titleName;

}


private String titleName;


public String getTitleName() {

return titleName;

}


public void setTitleName(String titleName) {

this.titleName = titleName;

}


}


main.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:layout_width="fill_parent"

android:layout_height="wrap_content" android:text="@string/hello" />

<ListView android:id="@+id/ListView01" android:layout_height="fill_parent"

android:layout_width="fill_parent"></ListView>

</LinearLayout>


customlistview.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:background="#FF04FF" android:layout_width="fill_parent"

android:layout_height="wrap_content">

<TextView android:text="@+id/TextView01" android:id="@+id/TextView01"

android:textColor="#FFFFFF" android:textSize="25px"

android:layout_height="fill_parent" android:layout_width="fill_parent"></TextView>

</LinearLayout>







4 comments:

  1. sale all product in hindi

    Hindisales provide you most productive Offers notification for you. If you Want to buy any products for you. Just check offers on that products in hindisales and check it out from here
    Hot offers on Amazon]

    ReplyDelete
  2. tipsontechnology

    learn every time new tips on technology

    Hey my audience, in this website we’ll post about many tips on technology. many tips on hacking, education and many entertainment niche. i’ll post somethin Tips on technology
    g special for you, Everyday
    So check out it from here

    ReplyDelete
  3. Login Your au-usd Account. Read In Depth au-usd
    au-usd Now You Can Login Your Blackpearlfx E-Account Through Your au-usd Account Login.

    ReplyDelete
  4. Excellent content ,Thanks for sharing this .,
    Leanpitch provides online training in ICP ACC, everyone can use it wisely.

    Certified Agile coach certification
    Agile coach

    ReplyDelete