In this article we will learn how to work with Custom ListView in android studio. ListView is a viewgroup which groups several items from a data source like array or database and displays them in a scroll-able list. Moreover, ListView uses the Adapter to bind the data. In order to create a ListView widget we need to add it in the xml file as following.
<ListView
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
ListView with Custom ArrayAdapter
By default the ArrayAdapter class creates a view for each array item by calling toString() on each item and placing the contents in a TextView. To create a complex view for each item (for example, if you want an ImageView for each array item), extend the ArrayAdapter class and override the getView() method to return the type of View you want for each item. For example:
public class MyAdapter extends ArrayAdapter<YourClassData>{
private LayoutInflater inflater;
public MyAdapter (Context context, List<YourClassData> data){
super(context, 0, data);
inflater = LayoutInflater.from(context);
}
@Override
public long getItemId(int position)
{
//It is just an example
YourClassData data = (YourClassData) getItem(position);
return data.ID;
}
@Override
public View getView(int position, View view, ViewGroup parent)
{
ViewHolder viewHolder;
if (view == null) {
view = inflater.inflate(R.layout.custom_row_layout_design, null);
// Do some initialization
//Retrieve the view on the item layout and set the value.
viewHolder = new ViewHolder(view);
view.setTag(viewHolder);
}
else {
viewHolder = (ViewHolder) view.getTag();
}
//Retrieve your object
YourClassData data = (YourClassData) getItem(position);
viewHolder.txt.setTypeface(m_Font);
viewHolder.txt.setText(data.text);
viewHolder.img.setImageBitmap(BitmapFactory.decodeFile(data.imageAddr));
return view;
}
private class ViewHolder
{
private final TextView txt;
private final ImageView img;
private ViewHolder(View view)
{
txt = (TextView) view.findViewById(R.id.txt);
img = (ImageView) view.findViewById(R.id.img);
}
}
}
By default the ArrayAdapter creates a view for each array item by calling toString() on each item and placing the contents in a TextView. Example:
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, myStringArray);
where android.R.layout.simple_list_item_1 is the layout that contains a TextView for each string in the array. Then simply call setAdapter() on your ListView:
ListView listView = (ListView) findViewById(R.id.listview);
listView.setAdapter(adapter);
To use something other than TextViews for the array display, for instance, ImageViews, or to have some of data besides toString() results fill the views, override getView(int, View, ViewGroup) to return the type of view you
want. Check this example.
// Get the reference to your ListView
ListView listResults = (ListView) findViewById(R.id.listResults);
// Set its adapter
listResults.setAdapter(adapter);
// Enable filtering in ListView
listResults.setTextFilterEnabled(true);
// Prepare your adapter for filtering
adapter.setFilterQueryProvider(new FilterQueryProvider() {
@Override
public Cursor runQuery(CharSequence constraint) {
// in real life, do something more secure than concatenation
// but it will depend on your schema
// This is the query that will run on filtering
String query = "SELECT _ID as _id, name FROM MYTABLE "
+ "where name like '%" + constraint + "%' "
+ "ORDER BY NAME ASC";
return db.rawQuery(query, null);
}
});
Let’s say your query will run every time the user types in an EditText:
EditText queryText = (EditText) findViewById(R.id.textQuery);
queryText.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(final CharSequence s, final int start, final int count, final
int after) {
}
@Override
public void onTextChanged(final CharSequence s, final int start, final int before, final
int count) {
// This is the filter in action
adapter.getFilter().filter(s.toString());
// Don't forget to notify the adapter
adapter.notifyDataSetChanged();
}
@Override
public void afterTextChanged(final Editable s) {
}
});
