Android Studio Custom ListView

A custom ListView is a user interface element that displays a list of items with custom layout and formatting. Android Studio provides a simple and easy way to create a custom ListView using adapter classes. In this tutorial, we will learn how to create a custom ListView in Android Studio.

Syntax

The syntax for creating a custom ListView in Android Studio is as follows:

ListView listView = findViewById(R.id.list_view);
MyAdapter myAdapter = new MyAdapter(this, list);
listView.setAdapter(myAdapter);

Here, listView is the instance of the ListView in the layout file, MyAdapter is the custom adapter class that extends the BaseAdapter class, and list is the list of items that we want to display in the ListView.

Example

Let's create a simple example of a custom ListView that displays a list of country names and their flags.

First, we need to create a layout file for the custom row item of the ListView. Create a file named list_item_country.xml in the res/layout directory and add the following code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="horizontal">

    <ImageView
            android:id="@+id/iv_flag"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:scaleType="centerCrop"
            android:layout_margin="10dp"/>

    <TextView
            android:id="@+id/tv_country_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:textStyle="bold"
            android:layout_gravity="center_vertical"/>

</LinearLayout>

In this layout file, we have added an ImageView to display the flag of the country and a TextView to display the country name.

Next, we need to create a custom adapter class named CountryAdapter that extends the BaseAdapter class. Create a file named CountryAdapter.java and add the following code:

public class CountryAdapter extends BaseAdapter {
    private final List<Country> countries;
    private final Context context;

    public CountryAdapter(Context context, List<Country> countries) {
        this.context = context;
        this.countries = countries;
    }

    @Override
    public int getCount() {
        return countries.size();
    }

    @Override
    public Object getItem(int position) {
        return countries.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            convertView = LayoutInflater.from(context).inflate(R.layout.list_item_country, parent, false);
        }

        ImageView ivFlag = convertView.findViewById(R.id.iv_flag);
        TextView tvCountryName = convertView.findViewById(R.id.tv_country_name);

        Country country = countries.get(position);
        ivFlag.setImageResource(country.getFlagId());
        tvCountryName.setText(country.getName());

        return convertView;
    }
}

In this adapter class, we have overridden the getCount, getItem, getItemId, and getView methods. The getView method is responsible for creating the custom row item view by inflating the list_item_country.xml layout file and setting the country flag and name in the ImageView and TextView, respectively.

Finally, in the MainActivity class, we need to create a list of Country objects, create an instance of the CountryAdapter class, and set this adapter to the ListView. Add the following code in the onCreate method of MainActivity class:

ListView listView = findViewById(R.id.list_view);

List<Country> countryList = new ArrayList<>();
countryList.add(new Country("Australia", R.drawable.australia_flag));
countryList.add(new Country("Brazil", R.drawable.brazil_flag));
countryList.add(new Country("Canada", R.drawable.canada_flag));
countryList.add(new Country("India", R.drawable.india_flag));
countryList.add(new Country("USA", R.drawable.usa_flag));

CountryAdapter countryAdapter = new CountryAdapter(this, countryList);
listView.setAdapter(countryAdapter);

Output

Here is the output of the example:

Explanation

In this example, we have created a custom row item view layout using the list_item_country.xml layout file. We have also created a custom adapter class named CountryAdapter that extends the BaseAdapter class and overrides the getCount, getItem, getItemId, and getView methods to display the country flag and name in the ListView.

In the MainActivity class, we have created a list of Country objects, created an instance of the CountryAdapter class, and set this adapter to the ListView.

Use

A custom ListView is very useful when we want to display a list of items with custom layout and formatting. We can use a custom ListView to display a list of songs with their album artwork, a list of products with their images and prices, or a list of contacts with their profile pictures and names.

Important Points

• The getView method of the adapter class is responsible for creating the custom row item view by inflating the layout file and setting the data in the views.
• The adapter class must extend the BaseAdapter class and override the getCount, getItem, getItemId, and getView methods.
• The ListView must set the adapter class instance using the setAdapter method.

Summary

In this tutorial, we have learned how to create a custom ListView in Android Studio using adapter classes. We have created a simple example that displays a list of country names and their flags. We have also discussed the syntax, example, output, explanation, use, important points, and summary of creating a custom ListView in Android Studio.