How to set random background for cardview?

Question

I currently have an Android recyclerview and a list item for it. In the list item is a cardview for my views. I want to have random backgrounds for each card list this one:
my cards now have a solid background and I search every where and used any code but couldn't find an example for view like example.

My list item:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 
    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:id="@+id/card_view_lead"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardCornerRadius="10dp"
    app:cardPreventCornerOverlap="false">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/style_lead"
        android:padding="7dp">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:background="@android:color/transparent"
            android:contentDescription="@string/option"
            android:src="@drawable/ic_option"
            android:tint="@android:color/white" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/large_margin"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <com.makeramen.roundedimageview.RoundedImageView
                    android:id="@+id/lead_img"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:contentDescription="@string/test_pic"
                    app:riv_border_color="@color/colorPrimary"
                    app:riv_border_width="0.1dp"
                    app:riv_corner_radius="100dp"
                    tools:src="@drawable/pic_1" />

                <TextView
                    android:id="@+id/lead_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:layout_marginLeft="@dimen/standard_margin"
                    android:layout_toRightOf="@id/lead_img"
                    android:textColor="@android:color/white"
                    android:textSize="@dimen/large_font_size"
                    tools:text="@string/test_name" />

            </RelativeLayout>

            <TextView
                android:id="@+id/lead_city"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/standard_margin"
                android:layout_marginTop="16dp"
                android:textColor="@android:color/white"
                android:textSize="@dimen/large_font_size"
                tools:text="@string/test_city" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/standard_margin">

                <TextView
                    android:id="@+id/lead_price"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:textColor="@android:color/white"
                    android:textSize="@dimen/large_font_size"
                    tools:text="30$" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/large_margin"
                    android:layout_marginTop="16dp"
                    android:layout_toRightOf="@id/lead_price"
                    android:text="@string/per_hour"
                    android:textColor="@android:color/white"
                    android:textSize="@dimen/large_font_size" />

            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:layout_marginTop="16dp">

                <TextView
                    android:id="@+id/with"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/standard_margin"
                    android:text="@string/with"
                    android:textColor="@android:color/white"
                    android:textSize="@dimen/large_font_size" />

                <TextView
                    android:id="@+id/lead_vehicle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="6dp"
                    android:layout_toRightOf="@id/with"
                    android:textColor="@android:color/white"
                    android:textSize="@dimen/large_font_size"
                    tools:text="@string/car" />

                <ImageView
                    android:id="@+id/lead_vehicle_img"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="8dp"
                    android:layout_toRightOf="@id/lead_vehicle"
                    android:contentDescription="@string/car_img"
                    tools:src="@drawable/ic_car" />
            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>

</android.support.v7.widget.CardView>

u want to have random colors as your card view background?? – Moulesh Jun 29 '17 at 05:06 — Moulesh, Jun 29 '17 at 05:06
@Moulesh yes. i said in descriptions. – Jun 29 '17 at 05:09 — , Jun 29 '17 at 05:09
@A.Heydari what about my old answer ??? – IntelliJ Amiya Jun 29 '17 at 05:30 — IntelliJ Amiya, Jun 29 '17 at 05:30
Check my answer it will work... – Sunisha Guptan Jun 29 '17 at 05:31 — Sunisha Guptan, Jun 29 '17 at 05:31
[https://stackoverflow.com/a/47879588/8325853] – Tushar Lathiya Nov 02 '18 at 11:24 — Tushar Lathiya, Nov 02 '18 at 11:24

score 4 · Accepted Answer · answered Jun 29 '17 at 05:08

4

You can generate random colors each time you put a new item in the adapter list See this

Since you only provided the xml part, I am assuming you have a model where you store the information to display. You can add another property "color" where you can store the random color for each item, and set in on your onBindViewHolder method

answered Jun 29 '17 at 05:08

Ayush Khare

1,802
1
15
26

@A.Heydari object 'card' should be null and it is causing NullPointerException?? Debugging your code may help you to analyze it! – Darshn Jun 29 '17 at 05:32
Have a look at [this](https://gist.github.com/ayushkhare/f501721640ebc6cfc1b0d54fe96901ce) – Ayush Khare Jun 29 '17 at 05:37

user3360390 · Answer 2 · 2017-06-29T09:38:08.977

4

CardView cardView = (CardView)findViewById(R.id.card_view_lead);
cardView.setCardBackgroundColor(getRandomColorCode());

public int getRandomColorCode(){

  Random random = new Random();

  return Color.argb(255, random.nextInt(256), random.nextInt(256),     random.nextInt(256));

}

edited Jun 29 '17 at 09:38

answered Jun 29 '17 at 05:22

user3360390

41
3

can we use random gradient colors? – Ankit Gupta Jun 01 '20 at 18:53

Moulesh · Answer 3 · 2017-06-29T05:19:34.833

2

CardView card = (CardView)findViewById(R.id.card_view_lead);

in your onbindview holder

Random rnd = new Random();
        currentColor = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256));
    holder.card.setCardBackgroundColor(currentColor);

edited Jun 29 '17 at 05:19

answered Jun 29 '17 at 05:12

Moulesh

2,762
1
22
32

nullpointerexaption for card.setBackgroundColor(currentColor); – Jun 29 '17 at 05:16
that means you are not assigning the reference of cardview check updated answer.. Hope you know how to take reference to views from adapter – Moulesh Jun 29 '17 at 05:22

score 1 · Answer 4 · edited Jun 29 '17 at 05:49

Create Array in res/values/colour like this

<array name="note_neutral_colors">
    <item>#9E9E9E</item>
    <item>#455A64</item>
    <item>#607D8B</item>
</array>

<array name="note_accent_colors">
    <item>#039BE5</item>
    <item>#3D51B3</item>
    <item>#689f38</item>
    <item>#FD7044</item>
</array>

In Your Adapter Class

holder.cardView.setCardBackgroundColor(noticeModel.getColor());

Model Class

//Variable
int color;
//Cunstructor
this.color=color;  
///and generate Getter Setter

Do this Your Main Class.java

private static int getRandomColor(Context context) {
    int[] colors;
    if (Math.random() >= 0.6) {
        colors = context.getResources().getIntArray(R.array.note_accent_colors);
    } else {
        colors = context.getResources().getIntArray(R.array.note_neutral_colors);
    }
    return colors[((int) (Math.random() * colors.length))];
}

call this method with string request like this

yourModel = new Your_Model(data1,data2,data3,getRandomColor(YourActivity.this));

where must i use : yourModel = new Your_Model(data1,data2,data3,getRandomColor(YourActivity.this)); — , Jun 29 '17 at 05:59
@A.Heydari It used in your activity where you input data into model. — Ashutosh Tripathi, Jun 29 '17 at 06:11
This answer works really well for when you are using RecyclerView. Thanks! — Aswin G, Nov 16 '18 at 18:39

Alok Gupta · Answer 5 · 2017-06-29T05:09:58.443

0

You need to write some logic to produce random colors and then use it like

CardView card = (CardView)findViewById(R.id.card);
card.setCardBackgroundColor(color);

To produce random colors, solutions are already available on Stack Overflow, please have a look at this link.

edited Jun 29 '17 at 05:09

answered Jun 29 '17 at 05:05

Alok Gupta

1,353
1
13
29

i tried this but i did got an error 'null pointer exception'; if you have an idea about random color in java codes send me please – Jun 29 '17 at 05:07

Sunisha Guptan · Answer 6 · 2017-06-29T05:24:31.087

Normally we can do like this, Colors.xml

    <?xml version="1.0" encoding="utf-8"?>
<resources>

    <item name="blue" type="color">#FF33B5E5</item>
    <item name="purple" type="color">#FFAA66CC</item>
    <item name="green" type="color">#FF99CC00</item>
    <item name="orange" type="color">#FFFFBB33</item>
    <item name="red" type="color">#FFFF4444</item>
    <item name="darkblue" type="color">#FF0099CC</item>
    <item name="darkpurple" type="color">#FF9933CC</item>
    <item name="darkgreen" type="color">#FF669900</item>
    <item name="darkorange" type="color">#FFFF8800</item>
    <item name="darkred" type="color">#FFCC0000</item>

    <integer-array name="androidcolors">
        <item>@color/blue</item>
        <item>@color/purple</item>
        <item>@color/green</item>
        <item>@color/orange</item>
        <item>@color/red</item>
        <item>@color/darkblue</item>
        <item>@color/darkpurple</item>
        <item>@color/darkgreen</item>
        <item>@color/darkorange</item>
        <item>@color/darkred</item>
    </integer-array>

</resources>

And do this in your onCreateView(),

CardView card_view_lead;
         card_view_lead= (CardView) findViewById(R.id.card_view_lead);

        int[] androidColors = getResources().getIntArray(R.array.androidcolors);
        int randomAndroidColor = androidColors[new Random().nextInt(androidColors.length)];
        card_view_lead.setBackgroundColor(randomAndroidColor);

If you don't want to use color array then you can use like this in your onCreateView() or onCreate(),

mCardViewTop.setCardBackgroundColor(getRandomColor());
public static int getRandomColor() {
        Random rnd = new Random();
        return Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256));
    }

score 0 · Answer 7 · answered May 07 '23 at 10:10

To achieve the desired behavior where the colors are not repeated, and each item has a unique color based on its position, you can modify the code as follows:

<color name="cardColor1">#FFB2B2</color> <!-- light red -->
<color name="cardColor2">#FFD9B2</color> <!-- light orange -->
<color name="cardColor3">#FFFFB2</color> <!-- light yellow -->
<color name="cardColor4">#B2FFB2</color> <!-- light green -->
<color name="cardColor5">#B2FFFF</color> <!-- light blue-green -->
<color name="cardColor6">#B2B2FF</color> <!-- light blue -->
<color name="cardColor7">#D9B2FF</color> <!-- light lavender -->
<color name="cardColor8">#FFB2F5</color> <!-- light magenta -->
<color name="cardColor9">#FFD9E8</color> <!-- light pink -->
<color name="cardColor10">#FFE8D9</color> <!-- light peach -->
<color name="cardColor11">#E8FFD9</color> <!-- light lime -->
<color name="cardColor12">#D9E8FF</color> <!-- light sky blue -->


<array name="cardColors">
    <item>@color/cardColor1</item>
    <item>@color/cardColor2</item>
    <item>@color/cardColor3</item>
    <item>@color/cardColor4</item>
    <item>@color/cardColor5</item>
    <item>@color/cardColor6</item>
    <item>@color/cardColor7</item>
    <item>@color/cardColor8</item>
    <item>@color/cardColor9</item>
    <item>@color/cardColor10</item>
    <item>@color/cardColor11</item>
    <item>@color/cardColor12</item>
</array>

Then, modify the method to choose the color based on the current position while ensuring that the same color is not repeated:

    int lastColorIndex = -1;
    int[] androidColors = context.getResources().getIntArray(R.array.cardColors);
    int colorIndex = (position % androidColors.length); // get the color index based on the position
    if (colorIndex == lastColorIndex) { // if the same color as the last item is selected, increment the index
        colorIndex = (colorIndex + 1) % androidColors.length;
    }
    cvCard.setCardBackgroundColor(androidColors[colorIndex]);

int position = 1....................; – VIMAL K. VISHWAKARMA May 07 '23 at 10:11 — VIMAL K. VISHWAKARMA, May 07 '23 at 10:11

How to set random background for cardview?

7 Answers7