Astonio
Astonio

Reputation: 655

Different viewtypes in recyclerview with GridLayoutManager

I know many have asked this question before, I too have in fact I have worked on a chat app that uses a recyclerview to show chats, I use view types pick a message layout depending on the sender but I feel this question is different.

I have a Recyclerview which is displaying content with a GridLayoutManager heres an image to show that, in my image I have 3 items; A, B and C, I would like C to fit the width, I am really not sure if this can be achieved with view types, below is my Adapter code

Adapter:

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


private Context context;
private ArrayList<StoreDisplayProduct> products;
private Interfaces.OnItemClickedListener onItemClickedListener;


public StoreDisplayItemAdapter(Context context, ArrayList<StoreDisplayProduct> products, Interfaces.OnItemClickedListener onItemClickedListener) {
    this.context = context;
    this.products = products;
    this.onItemClickedListener = onItemClickedListener;
}

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    LayoutInflater inflater = LayoutInflater.from(parent.getContext());
    return new ItemViewHolder(inflater.inflate(R.layout.store_display_item, parent, false));
}

public StoreDisplayProduct getProductsItem(int pos) {
    return products.get(pos);
}

public void setProducts(ArrayList<StoreDisplayProduct> products) {
    this.products = products;
    notifyDataSetChanged();
}

@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
    StoreDisplayProduct product = getProductsItem(position);
    ItemViewHolder viewHolder = (ItemViewHolder) holder;
    viewHolder.txtProductType.setText(product.getProductTypeDisplayName());
    viewHolder.txtName.setText(product.getName());
    viewHolder.img.post(() -> Picasso.with(context)
            .load(product.getDisplayImage().getFullSize())
            .fit()
            .transform(new RoundedCornersTransformation(10,10))
            .placeholder(R.color.asbestos)
            .centerCrop()
            .into(viewHolder.img));

}


@Override
public int getItemCount() {
    return this.products.size();
}


public class ItemViewHolder extends RecyclerView.ViewHolder {

    @BindView(R.id.txtProductType)
    TextView txtProductType;
    @BindView(R.id.img)
    SquareImageView img;
    @BindView(R.id.txtName)
    TextView txtName;
    public ItemViewHolder(View itemView) {
        super(itemView);
        ButterKnife.bind(this, itemView);

        itemView.setOnClickListener(v -> {
            onItemClickedListener.onItemClicked(v, getAdapterPosition());
        });
    }
}


}

And how I use the adapter

    recyclerStoreDisplayProducts.setAdapter(storeDisplayItemAdapter);
    recyclerStoreDisplayProducts.setLayoutManager(new GridLayoutManager(getContext(), 2));
    recyclerStoreDisplayProducts.setHasFixedSize(true);
    recyclerStoreDisplayProducts.setNestedScrollingEnabled(true);

Upvotes: 1

Views: 1223

Answers (2)

Samset
Samset

Reputation: 129

You can use span count like

GridLayoutManager layoutManager = new GridLayoutManager(this, 4);
layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
    @Override
    public int getSpanSize(int position) {
        if (position<3)
            return 1;
        else
            return 2;
    }
});

Upvotes: 1

Brahma Datta
Brahma Datta

Reputation: 1112

You can use the Staggered Grid Layout Manager as per your question @Aubry,

//you need to add the code for creating a staggered layout manager
recyclerStoreDisplayProducts.setAdapter(storeDisplayItemAdapter);
StaggeredGridLayoutManager staggeredGridLayoutManager = new 
StaggeredGridLayoutManager(mNoOfColumns,StaggeredGridLayoutManager.HORIZONTAL); 
recyclerStoreDisplayProducts.setHasFixedSize(true);
recyclerStoreDisplayProducts.setNestedScrollingEnabled(true);
recyclerStoreDisplayProducts.setLayoutManager(staggeredGridLayoutManager);

Upvotes: 0

Related Questions