How to set different color for each items in RecyclerViews' GridLayoutManager

Question

I've implemented the GridLayoutManager and it is working fine. I've used a CardView for the item layout.

Screenshot of the GridLayoutManager:

I just want to set a different color for the first five items in the list and repeat the same colors for the next five. For example, If my list contains 10 items, then the first five items have different colors suppose red, green, blue, yellow, pink and then from the item 6 - 10 these same colors should be set as the background color. I've tried to set the CardView background color using setCardBackgroundColor(Color.parseColor("#FF6363")).But this simply changes the background color of all the items. Is there any way to set different colors to items?

@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(parent.getContext())
            .inflate(R.layout.device_card, parent, false);
    CardView dc = view.findViewById(R.id.cardViewCard);
    dc.setCardBackgroundColor(Color.parseColor("#FF6363"));

    return new ViewHolder(view);
}

score 2 · Accepted Answer · answered Jan 24 '21 at 00:17

You got to change it in your onBindViewHolder.

I think this code may work for you, just use the switch with the modulus of your position plus 1 divided by 5, and then In every case, you set the color you want as background.

@Override
public void onBindViewHolder(@NonNull final ViewHolder holder, int position) {

    switch((position+1)%5) {
        case 0: 
            dc.setCardBackgroundColor(Color.parseColor("#Color5"));
            break;
        case 1:
            dc.setCardBackgroundColor(Color.parseColor("#Color1"));
            break;
        case 2:
            dc.setCardBackgroundColor(Color.parseColor("#Color2"));
            break;
        case 3:
            dc.setCardBackgroundColor(Color.parseColor("#Color3"));
            break;
        case 4:
            dc.setCardBackgroundColor(Color.parseColor("#Color4"));
    }
}

rahat · Answer 2 · 2021-02-03T09:40:30.480

To to do it with a random color, generated at runtime you can do it this way.

@Override
public void onBindViewHolder(@NonNull final ViewHolder holder, int position) {
        Random rand = new Random();
        Int red = rand.nextInt(255 - 1)
        Int green = rand.nextInt(255 - 1)
        Int  blue = rand.nextInt(255 - 1)
        dc.setCardBackgroundColor(Color.argb(1,red,green,blue));
}

UPDATE

Random rand = new Random(); //declare this in adapter class, instead of creating multiple times do it once

@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(parent.getContext())
            .inflate(R.layout.device_card, parent, false);
    CardView dc = view.findViewById(R.id.cardViewCard);
            Int red = rand.nextInt(255 - 1)
            Int green = rand.nextInt(255 - 1)
            Int  blue = rand.nextInt(255 - 1)
            dc.setCardBackgroundColor(Color.argb(1,red,green,blue));
            return new ViewHolder(view);
}

This will set random colors to the view and the colors won't change when you scroll the content, Since the onCreateViewHolder called once for each view, whereas the onBindViewHolder called many times when ever content scrolls.

I had used the random method to select the colors. But whenever I scrolled down and went back to the top the colors were different which gives a poor UX. — Palwandew, Feb 03 '21 at 09:08
so you want random colors but, you don't want them to change? — rahat, Feb 03 '21 at 09:33
My initial thought was to set colors randomly. But, then there was a probability that the system can assign the background color to one of the cards inside the recyclerView. Which could make the card missing from the list since other cards could have a different color. — Palwandew, Feb 04 '21 at 14:08

How to set different color for each items in RecyclerViews' GridLayoutManager

2 Answers2