Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Zebra-striping color-effect on RecycledView widget rows

What I'm trying to do is to assign a different color to every other row in a RecycledView. I created a custom RecycledView.Adapter, and in onCreateViewHolder method I have this:

// Create a row_folder view
View view = inflater.inflate(R.layout.row_folder, parent, false);

if(position % 2 == 0) {
   view.setBackgroundColor(Color.BLACK);
}


// Use MyViewHolder to bind the view
MyViewHolder holder = new MyViewHolder(view);

return holder;

The color does not get assigned. What am I missing ? Thanks.

edited: row_folder xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="72dp"
        android:background="@color/my_white"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/folder_icon"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:layout_marginLeft="16dp"
            android:src="@drawable/folder_icon" />

        <TextView
            android:id="@+id/folder_name"
            android:layout_width="190dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="16dp"
            android:text="The Mills"
            android:textColor="@color/my_blue"
            android:textSize="16sp"
            android:textStyle="bold" />

        <ImageView
            android:id="@+id/folder_content_icon"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="center"
            android:layout_marginLeft="12dp"
            android:src="@drawable/folder_content_icon" />

        <TextView
            android:id="@+id/content_number"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="16dp"
            android:gravity="left"
            android:text="3"
            android:textColor="@color/my_blue"
            android:textSize="16sp"
            android:textStyle="bold" />
    </LinearLayout>

</LinearLayout>
like image 844
Nactus Avatar asked Dec 25 '22 22:12

Nactus


1 Answers

do something like this in your recycler view adapter:

@Override
public void onBindViewHolder(ViewHolder holder, int position)
{
     if(position % 2 == 0) 
     {
         //holder.rootView.setBackgroundColor(Color.BLACK);
         holder.rootView.setBackgroundResource(R.color.black);
     }
     else 
     {
         //holder.rootView.setBackgroundColor(Color.WHITE);
         holder.rootView.setBackgroundResource(R.color.white);
     }
}

EDIT:

Change your xml file like this: row_folder.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rootView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="72dp"
    android:background="@color/my_white"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/folder_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:layout_marginLeft="16dp"
        android:src="@drawable/folder_icon" />

    <TextView
        android:id="@+id/folder_name"
        android:layout_width="190dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="16dp"
        android:text="The Mills"
        android:textColor="@color/my_blue"
        android:textSize="16sp"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/folder_content_icon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="center"
        android:layout_marginLeft="12dp"
        android:src="@drawable/folder_content_icon" />

    <TextView
        android:id="@+id/content_number"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="16dp"
        android:gravity="left"
        android:text="3"
        android:textColor="@color/my_blue"
        android:textSize="16sp"
        android:textStyle="bold" />
</LinearLayout>

create one more variable in your ViewHolder class as below:

public static class ViewHolder extends RecyclerView.ViewHolder
{
    LinearLayout rootView;//newly added field
    public ViewHolder(View view)
    {
        super(view);
        rootView=(LinearLayout)view.findViewById(R.id.rootView);
    }
}

I hope it might work.

like image 94
Amrut Bidri Avatar answered Jan 29 '23 11:01

Amrut Bidri