CardView suddenly turned black

Question

I've got a problem with the CardView in the RecyclerView. My CardView suddenly became black and my RatingBar became blue. I'm using the InfiniteRecyclerView but changing it to the simple RecyclerView has no effect. I can change the CardView's background colour to white but the RatingBar will still be blue. This is an example of what is happening:

Black CardView

I use the normal RecyclerView in another activity within a fragment with the same adapter and it looks just fine. Here is an example:

Normal CardView

This is the single_recipe_recycler_item.xml layout file:

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

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?android:attr/selectableItemBackground"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/recipe_recycler_image"
        android:layout_width="80dp"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:src="@mipmap/ic_launcher" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="5dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="5dp">

        <!-- RealmRecipe Title -->
        <TextView
            android:id="@+id/recipe_recycler_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:gravity="end"
            android:text="Very very very very very very long title"
            android:textColor="@color/colorBlack"
            android:textSize="@dimen/title"
            android:textStyle="bold" />

        <!-- Publisher -->
        <TextView
            android:id="@+id/recipe_recycler_publisher"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_below="@id/recipe_recycler_title"
            android:layout_marginTop="5dp"
            android:text="Publisher"
            android:textColor="@color/colorBlack"
            android:textSize="@dimen/genre"
            android:textStyle="italic" />

        <!-- Rating -->
        <RatingBar
            android:id="@+id/recipe_recycler_rating_bar"
            style="@style/Widget.AppCompat.RatingBar.Small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_below="@id/recipe_recycler_publisher"
            android:layout_marginTop="5dp"
            android:isIndicator="true"
            android:max="5" />

    </RelativeLayout>

</LinearLayout>

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

This is my AppTheme:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Why is this happening? Is there a bug in CardView? Any suggestions on how to fix this?

Answer 1

I encountered the same issue and here is how I solved it. Make sure that your Adapter inflates the layout as follows. For you to understand better let's call this Adapter MyAdapter

@Override
public View getView(int position, View view, ViewGroup parent) {
    if (view == null){
        LayoutInflater layoutInflater = (LayoutInflater) getContext()
                .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        view = layoutInflater.inflate(R.layout.recycler_row_layout_person, null, true);

    }

Then for the Activity in which you'll be using your Adapter, make sure you're using the right Context. Now say we'll be using MyAdapter in an activity called MyActivity. The wrong ways to use the layout inflator with the wrong Context are as follows

1. First Wrong Way

   MyAdapter adapter = new MyAdapter(
                                getApplicationContext(), R.layout.recycler_row_layout_person, arrayList
                        );
   

2. Second Wrong Way

   MyAdapter adapter = new MyAdapter(
                                getContext(), R.layout.recycler_row_layout_person, arrayList
                        );
   

Here's the RIGHT way to do it. And this is the way I solved it.

MyAdapter adapter = new MyAdapter(
                                 MyActivity.this, R.layout.recycler_row_layout_person, arrayList
                         );

I HOPE IT HELPS

Answer 2

I had the same problem and tried this, it worked for me

card_view:cardBackgroundColor="#fff"

Your XML file

<android.support.v7.widget.CardView 
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
card_view:cardBackgroundColor="#fff">