Add multiple view types like amazon app in Android

Question

I want to build an app like Amazon in Android.

Amazon app contains different view types based on position, it adds layouts like 2*2 layouts and linear layouts and also banner images in middle in different positions.

I have researched many question in Stack Overflow and found this answer,

How to create RecyclerView with multiple view type?

But this tells about adding different view types like text view and card views. But in amazon app it looks like they have used nested recyclerviews.

So I need to know-

1. How amazon app's UI is designed.

2. How to add multiple view types like amazon.

I am new android, any suggestions would really help.

NOTE: I see the same in Flipkart's app.

Answer 1

As per your query, the viewType you desire of an item in your RecyclerView will surely depend upon the dataset you will supply to the adapter (in case of the answer you have mentioned link of, its String[] myDataset in adapter's constructor) or upon the position of your item.

1. In case of viewType of an item depends upon position, mentioned answer is already an example.
2. In case of viewType of an item depends upon the dataset you supplied to adapter, viewType can be determined in the int getItemViewType(int position) method from the same dataset.

For an easy example with the same mentioned answer:

public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

private String[] mDataset;

public MyAdapter(String[] myDataset) {
    mDataset = myDataset;
}

class ViewHolder0 extends RecyclerView.ViewHolder {
    ...
    public ViewHolder0(View itemView){
        // Set default flag as background
    ...
    }
}

class ViewHolder1 extends RecyclerView.ViewHolder {
    ...
    public ViewHolder1(View itemView){
        // Inflate your gridview layout here
        ...
    }
    // define methods to interact with your grid view
}

class ViewHolder2 extends RecyclerView.ViewHolder {
    ...
    public ViewHolder2(View itemView){
        // Set Sri Lankan flag as background
    ...
}

@Override
public int getItemViewType(int position) {
    // determine your desired viewType here from dataset for example        
    switch (mDataset[position]){
        case "Identifier":// your logic to identify for displaying gridview
            return 1;
        case "Sri Lanka":
            return 2;
        case "Australia":
            return 3;
        default:
            return 0;
    }
}

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
     switch (viewType) {
         case 0: return new ViewHolder0(...);
         case 1: return new ViewHolder1(...);//holder responsible for you grid view
         case 2: return new ViewHolder2(...);
         ...
     }
}

@Override
public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int position) {
    switch (holder.getItemViewType()) {
        case 0:
            ViewHolder0 viewHolder0 = (ViewHolder0)holder;
            ...
            break;

        case 1:
            ViewHolder1 viewHolder1 = (ViewHolder1)holder;
            // here, bind data to your grid view
            ...
            break;

        case 2:
            ViewHolder2 viewHolder2 = (ViewHolder2)holder;
            ...
            break;
    }
}
}

Setting respective flags as background in RecyclerView's items is just an example. You can choose a complete different view as per the data at corresponding position in your dataset.

Also you will have to create different layouts for different viewTypes and inflate them in respective ViewHolders(0, 1, 2...).

In case you want an item as GridView,

1. You will define a layout file containing your GridView
2. Will inflate same layout in one of your viewholder classes.
3. Will define all methods to interact your grid view in same holder class
4. Will return respective integer code from int getItemViewType(int position) method
5. Will return respective viewholder from public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) method
6. Will bind data to your gridview from dataset in public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int position) method