Custom ListView in Android Studio

Custom ListView in Android Studio

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) {
 }
 });

Learn more about ListView.

learn how to use array adapter with AutoCompleteTextView.

Related posts

Leave a Comment