Custom Layout in AutoCompleteTextView in Android

Create Project

Create new project in Android Studio with steps as below:

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

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>

Add Photos

Copy images to res\drawable folder

Create Entities

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 Models

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

}

Create Custom AutoCompleteTextView Layout

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 Custom Adapter

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

}

Main Activity Layout

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>

Main Activity Class

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<?> 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());
    }

}

Structure of Project

Run App

Load AutoCompleteTextView

Search Product with Keyword

Use ItemClick Event of AutoCompleteTextView