How to greyout a card in a card view?

Question

I have a card view that lists a set of cards dynamically. I have used recyclerview for that. Now I want to disable a card(based on value)by greying out the card or something like that. This is the layout that contains the card view

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="112dp"
        android:layout_height="140dp"
        android:layout_margin="10dp"
        android:clickable="true"
        android:focusable="true"
        android:scaleType="fitXY">

        <RelativeLayout
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:padding="8dp">

            <ImageView
                android:id="@+id/appIcon"
                android:layout_width="match_parent"
                android:layout_height="62dp"
                android:padding="5dp"
                tools:ignore="VectorDrawableCompat" />

            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/appIcon"
                android:layout_centerInParent="true"
                android:gravity="center"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                android:textColor="@drawable/selector"
                android:textSize="10dp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/appVersion"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentEnd="true"
                android:layout_marginBottom="5dp"
                android:layout_marginEnd="1dp"
                android:text="version 0.0"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                android:textSize="8dp" />

        </RelativeLayout>

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

</LinearLayout> 

I have found some related queries and have tried out using selectors and greying out each field instead of the entire card.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:color="@color/colorAppName" />
    <item android:state_enabled="false" android:color="@color/colorPrimary" />

</selector>

and in my class(Adapter.kt)

name = itemView.findViewById(R.id.name) as TextView
if(value==true)
{
  name.isEnabled=false
}

But I want to disable the entire card. Please help

Answer 1

Add android:background="@drawable/selector" to your RelativeLayout or LinearLayout . That will work for enable and disable.

Note:- This is not related to question but if you follow. It will good for you.

We compare if(booleanVariable) directly instead of comparison like if(booleanVariable==true) .

Answer 2

You can set tint to your relative layout which is direct child of card view in your item design. You have to do this in xml:

 <android.support.v7.widget.CardView
        android:layout_width="112dp"
        android:layout_height="140dp"
        android:layout_margin="10dp"
        android:clickable="true"
        android:focusable="true"
        android:scaleType="fitXY">

        <RelativeLayout
            android:id="@+id/relParent"
            android:background="#fff"
            android:layout_width="100dp"
            android:layout_height="150dp"
            android:padding="8dp">
      ....>

I have added two property in RelativeLayout first is id and second is background.

Now in adapter you can do this:

if(value==true)  
{
itemView.relParent.background.setColorFilter(Color.parseColor("#6F6F6F"),PorterDuff.Mode.SRC_IN)
        itemView.relParent.isEnabled=false
}
else
{
itemView.relParent.background.setColorFilter(Color.parseColor("#FFFFFF"),PorterDuff.Mode.SRC_IN)
        itemView.relParent.isEnabled=true
}

Note: You must have to set background to RelativeLayout from xml otherwise itemView.relParent.background will return null and your app will crash.

Update You need to set forground color to your card you in that case do this:

itemView.cardDashboard.foreground= ColorDrawable(Color.parseColor("#906F6F6F"))

Here cardDashboard is card view which you are using in your item design.

So the final code will be like this:

       if(value==true)  
        {
        itemView.cardDashboard.foreground= ColorDrawable(Color.parseColor("#906F6F6F"))     
   itemView.relParent.isEnabled=false
        }
        else
        {
        itemView.cardDashboard.foreground= ColorDrawable(Color.parseColor("#006F6F6F"))
                itemView.relParent.isEnabled=true
        }

Answer 3

Try setting the following to all the views,

android:duplicateParentState="true"

When this attribute is set to true, the view gets its drawable state (focused, pressed, etc.) from its direct parent rather than from itself.

Then dynamically disable the layout of the item (at a particular position) resulting in disabling all its child views.

Note: Since your cardviews are in a recycler view you need to maintain the state for diffrent positions inside your adapter.

You can maintain the background states using the selectors as you did before.

I changed your layouts by adding the above mentioned attribute:-

<LinearLayout 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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">

<android.support.v7.widget.CardView
    android:layout_width="112dp"
    android:layout_height="140dp"
    android:layout_margin="10dp"

    android:id="@+id/cd"
    android:scaleType="fitXY">

    <RelativeLayout
        android:layout_width="100dp"
        android:layout_height="150dp"
        android:duplicateParentState="true"
        android:padding="8dp">

        <ImageView
            android:id="@+id/appIcon"
            android:layout_width="match_parent"
            android:layout_height="62dp"
            android:padding="5dp"
            android:duplicateParentState="true"
            tools:ignore="VectorDrawableCompat" />

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:duplicateParentState="true"

            android:text="@string/app_name"
            android:layout_below="@+id/appIcon"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:onClick="clickMe"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"

            android:textSize="10dp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/appVersion"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:duplicateParentState="true"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            android:layout_marginBottom="5dp"
            android:layout_marginEnd="1dp"
            android:text="version 0.0"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
            android:textSize="8dp" />

    </RelativeLayout>

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

</LinearLayout>

And have tested with disabling the cardview state, its child views also show the change with their color fading to light grey(haven't used selector for views so it changes to default disabled state (tested for textview)) .But for any clicklistner on the views you will have to use the saved state for the position disabled and not perform task when state is disabled.