Shadow effect in Recyclerview items
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.
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.
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"