Skip to content

Custom Suggestions Adapter

Mansur edited this page Jan 27, 2017 · 5 revisions

Custom Suggestions Adapter

In this tutorial I will show you how to create a custom adapter for MaterialSearchBars suggestion list. I assume that you have some experience with the Android SDK, so I'm not explaining too basic things


Step 1. Define a data model.

Let's imagine that we want to display some products in the suggestions list items. So our model will look like this:

public class Product {
    private String title;
    private int price;

    public Product(String title, int price) {
        this.title = title;
        this.price = price;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public int getPrice() {
        return price;
    }

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

Step 2. Create ViewHolder

Now we need to create a class that inherits from RecyclerView.ViewHolder. Our ViewHolder will perform the same functions as in RecyclerView. Documentation RecyclerView.ViewHolder can be read Here

  static class SuggestionHolder extends RecyclerView.ViewHolder{
        protected TextView title;
        protected TextView subtitle;

        public SuggestionHolder(View itemView) {
            super(itemView);
            title = (TextView) itemView.findViewById(R.id.title);
            subtitle = (TextView) itemView.findViewById(R.id.subtitle);
        }
    }

Step 3. Create adapter

The third thing we need to do is create a class and inherit it from SuggestionsAdapter. SuggestionsAdapter<S, V> takes two generic types: S is the type of your data model, V - type of the ViewHolder, which you want to work with. To make it easier to understand how to work with SuggestionsAdapter, I will hint - it is a modified RecyclerView.Adapter. Note that in SuggestionsAdapter data storage and processing have already been implemented , so you don't need to worry about it. Your goal is to associate the data with the view.

SuggestionsAdapter has three abstract methods that you will need to override:

  • getSingleViewHeight()
  • onCreateViewHolder(...)
  • onBindSuggestionHolder(...)

And other public methods, such as:

  • addSuggestion(S r)
  • setSuggestions(List<S> suggestions)
  • clearSuggestions()
  • deleteSuggestion(int postion, S r)
  • List<S> getSuggestions() ...

So let's start! Сreate a CustomSuggestionsAdapter class and override its abstract methods as shown below

public class CustomSuggestionsAdapter extends SuggestionsAdapter<Product, SuggestionHolder> {

    @Override
    public void onBindSuggestionHolder(Product suggestion, SuggestionHolder holder, int position) {
        
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }

    @Override
    public int getSingleViewHeight() {
        return 0;
    }

}

Now we will try to understand what each method is, and will immediately write its implementation.

1. onCreateViewHolder - We need to create and return an instance of our SuggestionHolder:

    @Override
    public SuggestionHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = getLayoutInflater().inflate(R.layout.item_custom_suggestion, parent, false);
        return new SuggestionHolder(view);
    }

2. onBindSuggestionHolder - Here we need to get the data and from the Product objects and bind them to the SuggestionsHolder

  @Override
  public void onBindSuggestionHolder(Product suggestion, SuggestionHolder holder, int position) {
      holder.title.setText(suggestion.getTitle());
      holder.subtitle.setText("The price is " + suggestion.getPrice() + "$");
  }

3.getSingleViewHeight - used by MaterialSearchBar to calculate the total height of the suggestions list. Note that View-the elements in this list must have the same height. Imagine that our View has a height 60dp:

  @Override
  public int getSingleViewHeight() {
      return 60;
  }

Step 3. Setting up MaterialSearchBar

Great! We just have to pass the instance of the CustomSuggestionsAdapter class to our MaterialSearchBar.

MaterialSearchBar searchBar = (MaterialSearchBar) findViewById(R.id.searchBar);
LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
CustomSuggestionsAdapter customSuggestionsAdapter = new CustomSuggestionsAdapter(inflater);
List<Product> suggestions = new ArrayList<>();
for (int i = 1; i < 11; i++) {
    suggestions.add(new Product("Product " + i, i * 10));
}
        
customSuggestionsAdapter.setSuggestions(suggestions);
searchBar.setCustomSuggestionAdapter(customSuggestionsAdapter);