Part 1 – Layouts & Model Class

Watch the next part

In this video series we are going to build an AutoCompleteTextView with a custom adapter, that can not only show text suggestions, but also images.
In part 1 we will prepare our MainActivity layout as well as the row layout for each suggestions item. We will also create the Java class that will contain the information for each suggestion (the name and the image resource) and lastly we will create an ArrayList and fill it with 5 of these items.

Show less

activity_main.xmlcountry_autocomplete_row.xmlCountryItem.javaMainActivity.java

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context="com.codinginflow.customautocompleteexample.MainActivity">

    <AutoCompleteTextView
        android:id="@+id/actv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:completionThreshold="1"
        android:hint="Select a country" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="4dp">

    <ImageView
        android:id="@+id/image_view_flag"
        android:layout_width="60dp"
        android:layout_height="40dp"
        tools:src="@drawable/flag_afghanistan" />

    <TextView
        android:id="@+id/text_view_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:paddingStart="8dp"
        android:textAppearance="?android:attr/textAppearanceListItemSmall"
        tools:text="Afghanistan" />

</LinearLayout>

package com.codinginflow.customautocompleteexample;

public class CountryItem {
    private String countryName;
    private int flagImage;

    public CountryItem(String countryName, int flagImage) {
        this.countryName = countryName;
        this.flagImage = flagImage;
    }

    public String getCountryName() {
        return countryName;
    }

    public int getFlagImage() {
        return flagImage;
    }
}

package com.codinginflow.customautocompleteexample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private List<CountryItem> countryList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fillCountryList();
    }

    private void fillCountryList() {
        countryList = new ArrayList<>();
        countryList.add(new CountryItem("Afghanistan", R.drawable.flag_afghanistan));
        countryList.add(new CountryItem("Albania", R.drawable.flag_albania));
        countryList.add(new CountryItem("Algeria", R.drawable.flag_algeria));
        countryList.add(new CountryItem("Andorra", R.drawable.flag_andorra));
        countryList.add(new CountryItem("Angola", R.drawable.flag_angola));
    }
}