This article begins a small series of articles about customizing lists (ListView). We'll write a little app to plan your cases. In the first part I will cover moment to create a Listview, its customization, adding extra elements (Header, Footer) and fill the list.
Related Articles
Statement of the problem
At the end of our series of articles the application must perform the following functions:
- Add / Delete / Select / Move scheduled case.
- Delete all scheduled cases.
- Select / deselect all scheduled cases.
- Save / Load cases scheduled on the card.
- Animation delete scheduled case.
- Animation flying cells.
Some theory
ListView is a view group that displays a list of scrollable items. The list items are automatically inserted to the list using an Adapter that pulls content from a source such as an array or database query and converts each item result into a view that's placed into the list.
The basic algorithm development and customization ListView as follows:
1. First, you must develop a data structure which will represent one item. It can be a simple type or object (such as String or Integer), or developed class, as in our case (ToDoItem).
2. In the next step, it is necessary to develop all xml layout:
- layout for a list item (listitem.xml);
- layout for the Activity, which will be our ListView (in this case, main.xml);
- layout for the Header and Footer, if they (list_header.xml, list_footer.xml).
3. Next, you need to develop adapter (CustomListAdapter.java) for the formation of our ListView to the specified data source. In this case, the adapter will be extended from the BaseAdapter and the data source will be used ArrayList.
4. The last step - the union of all developed in our Activity. Algorithm for object initialization next:
- load or initialize list (ArrayList) of the data;
- initialize ListView (using the findViewById());
- create adapter with the downloaded data;
- if there is a Header or Footer, that add them to the ListView (using methods addHeaderView() or addFooterView(), respectively);
- set an adapter for ListView (using the setAdapter()).
For correct work of ListView, you should follow these rules:
- Header and Footer to be added before calling setAdapter ();
- if you added Header or Footer, that note that the parameter position in the method onItemClick () for ListView will:
- For one more, if you have added Header;
- One or two larger than the data source (method size() for the ArrayList, if added 1 (or 2) View, respectively).
Practice
The images used in the project can be downloaded here.
Before the development layouts and classes, we must add the string resources.
Before the development layouts and classes, we must add the string resources.
xml version="1.0" encoding="utf-8"?>
resources>
string name="app_name">CustomListViewstring>
string name="txt_header_title">ToDo Liststring>
string name="txt_footer_title">Done: %sstring>
resources>
1. Development of the project will begin with the development of the class ToDoItem. Objects of this class will be the data source for the items in the list.
Set the following attributes of the class:
name - the name of the case;
check - done / not done by the current case;
index - the position in the list when adding (to be used to sort the list).
The class will be serialized in order to be able to save and load.
Source code:
import java.io.Serializable;
/**
* An item to the list
*/
public class ToDoItem implements Serializable{
private static final long serialVersionUID = 2008719019880549886L;
private String name; // Name of the case
private boolean check; // Done / Not done
private int index; // Position in the list when adding
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public boolean isCheck() {
return check;
}
public void setCheck(boolean check) {
this.check = check;
}
public int getIndex() {
return index;
}
public void setIndex(int index) {
this.index = index;
}
public ToDoItem(String name, int index) {
setName(name);
setIndex(index);
setCheck(false);
}
public ToDoItem() {
setName("");
setCheck(false);
}
}
2. Development of layouts
To begin with develop xml-layout to represent a single element in the list.On the layout of a few comments:
- android:focusable="false" used for the CheckBox, so that you can handle the press a list item (method onItemClick () for ListView).
Source code (listitem.xml):
xml version="1.0" encoding="utf-8"?>
LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:background="@drawable/item"
android:orientation="horizontal" >
TextView
android:id="@+id/listitem_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="left|center_vertical"
android:layout_weight="1"
android:singleLine="true"
android:ellipsize="end"
android:layout_marginLeft="10dp"/>
CheckBox
android:id="@+id/listitem_check"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:button="@drawable/custom_checkbox"
android:focusable="false"/>
LinearLayout>
LinearLayout>
Now, designed layouts for the Header and Footer. Header will be used for the header and Footer will display the number completed cases.
Source code (list_header.xml):
xml version="1.0" encoding="utf-8"?>
LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:background="@drawable/header" >
TextView
android:id="@+id/header_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:shadowColor="@android:color/black"
android:shadowDy="1"
android:shadowRadius="2"
android:textColor="@android:color/white"
android:textSize="20sp"
android:textStyle="bold"/>
LinearLayout>
LinearLayout>
Source code (list_footer.xml):
xml version="1.0" encoding="utf-8"?>
LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:background="@drawable/footer" >
TextView
android:id="@+id/footer_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="2dp"
android:gravity="right|center_vertical"
android:textStyle="bold" />
LinearLayout>
LinearLayout>
Now develop main layout that will ListView. Standard ListView by clicking on the item highlighted in black. To avoid this, it is necessary to add a property: android:cacheColorHint="@android:color/transparent".
Source code (main.xml):
LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background=
