Unable to add shadow and borders to Recycler View item

Question

I have created a recycler view and added an offset item decoration and added elevation attribute to the list item but it's not working. Please help!!

This is what I want

What I have

My Code For My Offset Item Decoration

public class ItemOffsetDecoration extends RecyclerView.ItemDecoration {

private int mItemOffset;

private ItemOffsetDecoration(int itemOffset) {

    mItemOffset = itemOffset;

}

public ItemOffsetDecoration(@NonNull Context context, @DimenRes int itemOffsetId) {

    this(context.getResources().getDimensionPixelSize(itemOffsetId));

}

@Override

public void getItemOffsets(Rect outRect, View view, RecyclerView parent,

                           RecyclerView.State state) {

    super.getItemOffsets(outRect, view, parent, state);

    outRect.set(mItemOffset, mItemOffset, mItemOffset, mItemOffset);

  }

}

Here's is my list item after adding the Card View and using the elevation attribute.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:longClickable="true"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/row_padding_vertical">

<android.support.v7.widget.CardView
    android:id="@+id/transaction_cardView"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:elevation="20dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:layout_marginBottom="0dp">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/txtHour"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginEnd="8dp"
            android:layout_marginTop="2dp"
            android:text="5:10"
            android:textAlignment="viewEnd"
            android:textColor="@color/transaction_text"
            android:textSize="16sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/txtDate" />

        <TextView
            android:id="@+id/txtDescription"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignEnd="@+id/txtAmount"
            android:layout_alignParentTop="true"
            android:ellipsize="end"
            android:lines="1"
            android:text="TextView"
            android:textColor="@color/transaction_text"
            android:textSize="25sp"
            app:layout_constraintTop_toBottomOf="@+id/txtAmount" />

        <TextView
            android:id="@+id/txtAmount"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/txtDescription"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginTop="8dp"
            android:lines="1"
            android:text="TextView"
            android:textColor="@color/transaction_text"
            android:textSize="26sp"
            android:textStyle="bold"
            android:typeface="sans"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/txtDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_marginEnd="8dp"
            android:layout_marginTop="8dp"
            android:text="07/01/2"
            android:textAlignment="textEnd"
            android:textColor="@color/transaction_text"
            android:textSize="16sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </android.support.constraint.ConstraintLayout>

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


</RelativeLayout>

I think it is not working be case there are no boundaries set in this code.

Any help would be deeply appreciated!

Answer 1

Change Your Parent Layout Tag From

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"

To

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"

Answer 2

Try adding cardView as your main Layout in your item_file of recyclerView you can set elevation

Here you can refer below code:

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/white"
        app:cardCornerRadius="4dp"
        app:cardElevation="5dp"
        app:cardUseCompatPadding="true">

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

Answer 3

Update your Cardview layout from

<android.support.v7.widget.CardView
    android:id="@+id/transaction_cardView"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:elevation="20dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:layout_marginBottom="0dp">

to

<android.support.v7.widget.CardView
    android:id="@+id/transaction_cardView"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:layout_marginBottom="0dp"
    app:cardElevation="10dp"
    app:contentPadding="2dp"
    app:cardUseCompatPadding="true"
    >

one more thing shadows will not show if you have this line in your manifest

<application
     android:hardwareAccelerated="false"

so make sure it's set to true or not there

Answer 4

Add these lines to the parent RelativeLayout

xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:clipToPadding="false"
android:clipChildren="false"

And add this line to the CardView

card_view:cardElevation="10dp"