Custom Layout in AutoCompleteTextView in Android

Create new project in Android Studio with steps as below:

Open res\values\strings.xml file and add new string as below:

<resources>
    <string name="app_name">Learn Android with Real Apps</string>
    <string name="search_product">Search Product...</string>
    <string name="product_info">Product Info</string>
    <string name="id">Id</string>
    <string name="name">Name</string>
    <string name="price">Price</string>
    <string name="description">Description</string>
    <string name="photo">Photo</string>
</resources>

Copy images to res\drawable folder

Create new package named entities. In this package, create new java class named Product.java as below:

package android.demo.entities;

import java.io.Serializable;

public class Product implements Serializable {

    private String id;

    private String name;

    private double price;

    private String description;

    private int photo;

    public String getId() {
        return this.id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return this.name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public double getPrice() {
        return this.price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    public String getDescription() {
        return this.description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public int getPhoto() {
        return this.photo;
    }

    public void setPhoto(int photo) {
        this.photo = photo;
    }

    public Product() {
    }

    public Product(String id, String name, double price, String description, int photo) {
        this.id = id;
        this.name = name;
        this.price = price;
        this.description = description;
        this.photo = photo;
    }
}

Create new package named models. In this package, create new java class named ProductModel.java as below:

package android.demo.models;

import android.demo.entities.Product;
import android.demo.learnandroidwithrealapps.R;
import java.util.ArrayList;
import java.util.List;

public class ProductModel {

    private List<Product> products;

    public ProductModel() {
        this.products = new ArrayList<Product>();
        products.add(new Product("p01", "Laptop 1", 4, "Description for Product 1", R.drawable.thumb1));
        products.add(new Product("p02", "Laptop 2", 8, "Description for Product 2", R.drawable.thumb2));
        products.add(new Product("p03", "Computer 1", 9, "Description for Product 3", R.drawable.thumb3));
        products.add(new Product("p04", "Computer 2", 11, "Description for Product 4", R.drawable.thumb1));
        products.add(new Product("p05", "Mobile 1", 5, "Description for Product 5", R.drawable.thumb2));
        products.add(new Product("p06", "Mobile 2", 21, "Description for Product 6", R.drawable.thumb3));
    }

    public List<Product> getProducts() {
        return this.products;
    }

}

Select res\layout folder. In this folder, create new layout named autocomplete_custom_layout.xml as below:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageViewPhoto"
        android:layout_width="wrap_content"
        android:layout_height="67dp"
        app:srcCompat="@drawable/thumb1" />

    <TextView
        android:id="@+id/textViewName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

</LinearLayout>

Create new package named adapters. In this package, create new java class named ProductListAdapter.java as below:

package android.demo.adapters;

import android.content.Context;
import android.demo.entities.Product;
import android.demo.learnandroidwithrealapps.R;
import android.support.annotation.NonNull;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.Filter;
import android.widget.ImageView;
import android.widget.TextView;

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

public class ProductListAdapter extends ArrayAdapter<Product> {

    private Context context;
    private List<Product> products = new ArrayList<Product>();
    private List<Product> filteredProducts = new ArrayList<Product>();

    public ProductListAdapter(Context context, List<Product> products) {
        super(context, R.layout.autocomplete_custom_layout, products);
        this.context = context;
        this.products = products;
    }

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

    @NonNull
    @Override
    public Filter getFilter() {
        return new ProductFilter(this, products);
    }

    @NonNull
    @Override
    public View getView(int position, View view, ViewGroup parent) {
        Product product = filteredProducts.get(position);
        view = LayoutInflater.from(context).inflate(R.layout.autocomplete_custom_layout, parent, false);
        TextView textViewName = (TextView) view.findViewById(R.id.textViewName);
        ImageView imageViewPhoto = (ImageView) view.findViewById(R.id.imageViewPhoto);
        textViewName.setText(product.getName());
        imageViewPhoto.setImageResource(product.getPhoto());
        return view;
    }

    private class ProductFilter extends Filter {

        ProductListAdapter productListAdapter;
        List<Product> originalList;
        List<Product> filteredList;

        public ProductFilter(ProductListAdapter productListAdapter, List<Product> originalList) {
            super();
            this.productListAdapter = productListAdapter;
            this.originalList = originalList;
            this.filteredList = new ArrayList<>();
        }

        @Override
        protected FilterResults performFiltering(CharSequence constraint) {
            filteredList.clear();
            final FilterResults results = new FilterResults();
            if (constraint == null || constraint.length() == 0) {
                filteredList.addAll(originalList);
            } else {
                final String filterPattern = constraint.toString().toLowerCase().trim();
                for (final Product product : originalList) {
                    if (product.getName().toLowerCase().contains(filterPattern)) {
                        filteredList.add(product);
                    }
                }
            }
            results.values = filteredList;
            results.count = filteredList.size();
            return results;
        }

        @Override
        protected void publishResults(CharSequence constraint, FilterResults results) {
            productListAdapter.filteredProducts.clear();
            productListAdapter.filteredProducts.addAll((List) results.values);
            productListAdapter.notifyDataSetChanged();
        }
    }

}

Open res\layout\activity_main.xml file and create layout as below:

<?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"
    tools:context=".MainActivity">

    <AutoCompleteTextView
        android:id="@+id/autoCompleteTextViewProduct"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/product_info"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/id"
        android:textSize="16sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textViewId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/name"
        android:textSize="16sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textViewName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/price"
        android:textSize="16sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textViewPrice"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/description"
        android:textSize="16sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textViewDescription"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/photo"
        android:textSize="16sp"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/imageViewPhoto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        app:srcCompat="@drawable/thumb1" />

</LinearLayout>

Add code to MainActivity.java file in android.demo.learnandroidwithrealapps package as below:

package android.demo.learnandroidwithrealapps;

import android.demo.adapters.ProductListAdapter;
import android.demo.entities.Product;
import android.demo.models.ProductModel;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AutoCompleteTextView;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private AutoCompleteTextView autoCompleteTextViewProduct;
    private TextView textViewId, textViewName, textViewPrice, textViewDescription;
    private ImageView imageViewPhoto;

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

    private void initView() {
        textViewId = findViewById(R.id.textViewId);
        textViewName = findViewById(R.id.textViewName);
        textViewPrice = findViewById(R.id.textViewPrice);
        textViewDescription = findViewById(R.id.textViewDescription);
        imageViewPhoto = findViewById(R.id.imageViewPhoto);
        autoCompleteTextViewProduct = findViewById(R.id.autoCompleteTextViewProduct);
    }

    private void loadData() {
        autoCompleteTextViewProduct.setHint(getText(R.string.search_product));
        autoCompleteTextViewProduct.setThreshold(1);
        ProductModel productModel = new ProductModel();
        autoCompleteTextViewProduct.setAdapter(new ProductListAdapter(getApplicationContext(), productModel.getProducts()));
        autoCompleteTextViewProduct.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView&lt;?&gt; adapterView, View view, int position, long id) {
                autoCompleteTextViewProduct_onItemClick(adapterView, view, position, id);
            }
        });
    }

    private void autoCompleteTextViewProduct_onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
        Product product = (Product) adapterView.getItemAtPosition(position);
        autoCompleteTextViewProduct.setText(product.getName());
        textViewId.setText(product.getId());
        textViewName.setText(product.getName());
        textViewPrice.setText(String.valueOf(product.getPrice()));
        textViewDescription.setText(product.getDescription());
        imageViewPhoto.setImageResource(product.getPhoto());
    }

}

Create Project

Step 1: Input Project Name and Select Project Location

Step 2: Select SDK for Android App

Step 3: Select Default Activity for App

Step 4: Finish create project

Add Strings

Add Photos

Create Entities

Create Models

Create Custom AutoCompleteTextView Layout

Create Custom Adapter

Main Activity Layout

Main Activity Class

Structure of Project

Run App

Load AutoCompleteTextView

Search Product with Keyword

Use ItemClick Event of AutoCompleteTextView