Shadow effect in Recyclerview items

Question

I want to achieve a design with a linear layout and few widgets along with shadow effect such as elevation, but I'm unable to get the shadows right.

I tried to adding elevation no to the linear layout, but it doesn't show any effect in the design.

I tried cardview also, but I'm not getting the desired shadow effect.

My Recylerview Item XML:

<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="match_parent"
    android:layout_height="wrap_content"
    android:elevation="10dp"
    android:outlineProvider="bounds">

    <LinearLayout
      android:id="@+id/layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="5dp"
      android:background="@drawable/shape_rectangle_rounded_corner_black"
      android:orientation="vertical">

      <RelativeLayout
        android:id="@+id/rl_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="20dp"
        android:paddingStart="20dp">

        <de.hdodenhof.circleimageview.CircleImageView
          android:layout_width="13dp"
          android:layout_height="13dp"
          android:background="@color/colorPrimary"
          android:visibility="gone"
          app:civ_border_width="1dp"/>

        <TextView
          android:id="@+id/tv_time"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:fontFamily="@font/font_avenirltstd_book"
          android:textColor="@color/color_light_grey"
          android:textSize="14sp"
          tools:text="12 PM"/>

        <TextView
          android:id="@+id/tv_distance"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginEnd="15dp"
          android:layout_alignParentEnd="true"
          android:fontFamily="@font/font_avenirltstd_book"
          android:text="2.1 mi."
          android:textColor="@color/color_light_grey"
          android:textSize="14sp"/>

      </RelativeLayout>

      <TextView
        android:id="@+id/tv_workout_Name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="10dp"
        android:paddingStart="20dp"
        android:fontFamily="@font/font_avenirltstd_heavy"
        android:textColor="@color/color_black_1"
        android:textSize="24sp"
        tools:text="HIIT Workout"/>


      <TextView
        android:id="@+id/tv_type_of_booking"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="10dp"
        android:paddingBottom="20dp"
        android:paddingStart="20dp"
        android:fontFamily="@font/font_avenirltstd_book"
        android:text="One-Time Booking"
        android:textColor="@color/color_light_grey"
        android:textSize="14sp"/>

    </LinearLayout>
  </LinearLayout>

My RecyclerView item:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@color/white"
  android:clipToPadding="false">


  <ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false">

    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="#F3f3f3"
      android:clipToPadding="false">

        <com.marcohc.robotocalendar.RobotoCalendarView
          android:id="@+id/robotoCalendarView"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:elevation="10dp"
          android:visibility="visible"
          app:mcv_calendarMode="month"
          app:mcv_dateTextAppearance="@style/CalendarDateTextAppearance"
          app:mcv_headerTextAppearance="@style/CalendarHeaderTextAppearance"
          app:mcv_leftArrow="@drawable/mcv_action_previous"
          app:mcv_monthLabels="@null"
          app:mcv_rightArrow="@drawable/mcv_action_next"
          app:mcv_selectionColor="@color/color_red"
          app:mcv_selectionMode="single"
          app:mcv_showOtherDates="out_of_range"
          app:mcv_weekDayTextAppearance="@style/CalendarWeekTextAppearance"/>

      <View
        android:id="@+id/view_1"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_below="@+id/msvw"
        android:background="@drawable/shadow"/>

        <android.support.v7.widget.RecyclerView
          android:id="@+id/rv_sessions_list"
          android:layout_width="match_parent"
          android:layout_height="match_parent"/>
    </RelativeLayout>

  </ScrollView>

</RelativeLayout>

Current output:

Expected output:

score 3 · Answer 1 · edited Jun 03 '19 at 22:04

You'll have to use CardView to get the shadow effect. Try the following layout as RecyclerView item, and see if it works.

<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:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="10dp"
app:cardUseCompatPadding="true"
app:cardCornerRadius="10dp">

<LinearLayout
  android:id="@+id/layout"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_margin="5dp"
  android:background="@drawable/shape_rectangle_rounded_corner_black"
  android:orientation="vertical">

  <RelativeLayout
    android:id="@+id/rl_time"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="20dp"
    android:paddingStart="20dp">

    <de.hdodenhof.circleimageview.CircleImageView
      android:layout_width="13dp"
      android:layout_height="13dp"
      android:background="@color/colorPrimary"
      android:visibility="gone"
      app:civ_border_width="1dp"/>

    <TextView
      android:id="@+id/tv_time"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:fontFamily="@font/font_avenirltstd_book"
      android:textColor="@color/color_light_grey"
      android:textSize="14sp"
      tools:text="12 PM"/>

    <TextView
      android:id="@+id/tv_distance"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginEnd="15dp"
      android:layout_alignParentEnd="true"
      android:fontFamily="@font/font_avenirltstd_book"
      android:text="2.1 mi."
      android:textColor="@color/color_light_grey"
      android:textSize="14sp"/>

  </RelativeLayout>

  <TextView
    android:id="@+id/tv_workout_Name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingTop="10dp"
    android:paddingStart="20dp"
    android:fontFamily="@font/font_avenirltstd_heavy"
    android:textColor="@color/color_black_1"
    android:textSize="24sp"
    tools:text="HIIT Workout"/>


  <TextView
    android:id="@+id/tv_type_of_booking"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingTop="10dp"
    android:paddingBottom="20dp"
    android:paddingStart="20dp"
    android:fontFamily="@font/font_avenirltstd_book"
    android:text="One-Time Booking"
    android:textColor="@color/color_light_grey"
    android:textSize="14sp"/>

</LinearLayout>

Replace the tag android.support.v7.widget.CardView with the AndroidX CardView tag in case you're using AndroidX libraries. By using the cardCornerRadius tag, you don't need to give custom Background to your LinearLayout.

Also, don't forget to check if hardwareAccelerated = true in your Manifest file. It is already true if you're targeting API 14+. You won't see shadows if it's set to false.

score 1 · Answer 2 · edited Jun 03 '19 at 22:02

Here's my suggestion to you based on what I know:

Set your top-level RelativeLayout to have padding equal to the margins you've set on the relative layout that you want to show shadow;
Set android:clipToPadding="false" on the same RelativeLayout;
Remove the margin from the RelativeLayout that also has elevation set;
You may also need to set a non-transparent background color on the child layout that needs elevation.

F.Mysir · Answer 3 · 2021-11-21T20:57:48.377

1

In case you came to check why elevation is not working on your cardview a mistake I have done is I had to change:

android:elevation="8dp"

with

app:cardElevation="8dp"

edited Nov 21 '21 at 20:57

answered Mar 29 '21 at 09:40

F.Mysir

2,838
28
39

score 1 · Answer 4 · answered Jan 20 '22 at 09:29

1

Add the below code to the Recycler view's item activity

android:outlineProvider="bounds"
android:elevation="3dp"
android:clipToPadding="false"

answered Jan 20 '22 at 09:29

Wainaina Nik

163
1
8

score 0 · Answer 5 · edited Jun 03 '19 at 22:01

0

Android CardView is what you're looking for. Put your calendar and each element inside a card.

Change the card elevation for modifying the shadow size.

edited Jun 03 '19 at 22:01

Peter Mortensen

30,738
21
105
131

answered Jun 03 '19 at 04:11

Tam Huynh

2,026
1
16
20

Shadow effect in Recyclerview items

Current output:

Expected output:

5 Answers5