CODEWITHSUNDEEP
androidandroid-recyclerviewandroid-cardviewandroid-elevation
Coolio Cena
Coolio Cena

Reputation: 69

CardView elevation not working with RecyclerView

CardView elevation works fine when tested in a separate application, but when the same code for the cardView is used to craft items of a RecyclerView, the elevation no longer appears.

Here is the code for the RecyclerView list item:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:layout_height="wrap_content"
             android:layout_width="match_parent"
             xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:card_view="http://schemas.android.com/apk/res-auto"
             xmlns:app="http://schemas.android.com/apk/res-auto"
             android:layout_margin="10dp">


<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent"
    card_view:cardUseCompatPadding="true"
    app:cardMaxElevation="6dp"
    card_view:cardCornerRadius="3dp"
    card_view:cardElevation="24dp">

    <LinearLayout android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/thumbnail"
            android:layout_width="match_parent"
            android:layout_height="250dp" />

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/thumbnail"
            />
    </LinearLayout>


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

And here is my main activity xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                   xmlns:tools="http://schemas.android.com/tools"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:orientation="vertical"
                   android:background="@drawable/bitmap"
                   android:layerType="software"
                   android:padding="10dp"
    tools:context="com.example.android.vikramadityastimeline.MainActivity">

<android.support.v7.widget.RecyclerView
    android:id="@+id/card_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    />



 </FrameLayout>

Upvotes: 5

Views: 8635

Answers (6)

MGLabs
MGLabs

Reputation: 91

This is the xml sample code for the screenshot below:

<androidx.cardview.widget.CardView 
    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="wrap_content"
    app:cardCornerRadius="10dp"
    app:cardElevation="2dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="true"
    app:contentPadding="10dp"
    app:contentPaddingBottom="0dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="5dp">

        <TextView
            android:id="@+id/name_tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Name" />
        <TextView
            android:id="@+id/sim_tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="SIM" />
        <TextView
            android:id="@+id/ID_tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="ID" />
        <TextView
            android:id="@+id/model_tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="model" />
    </LinearLayout>

</androidx.cardview.widget.CardView>

cardView list with shadow

Upvotes: 0

Esteban
Esteban

Reputation: 515

I just had the same problem and the solution I found was to add the next tag in the AndroidManifest:

android:hardwareAccelerated="true"

Example:

<application
        android:allowBackup="true"
        android:hardwareAccelerated="true"
        android:icon="@mipmap/ic_launcher"
        android:theme="@style/AppTheme">

Documentation:

https://developer.android.com/guide/topics/graphics/hardware-accel

Upvotes: 0

Tobibur Rahman
Tobibur Rahman

Reputation: 161

Use this in your card view. It solved my same problem.

app:cardUseCompatPadding="true"

Upvotes: 4

Parth Munjpara
Parth Munjpara

Reputation: 82

In your code you used frame layout in recycler view item and inside that you have cardview. You gives margin as 10dp to frame layout but my suggestion to you is that remove that line and add margin to the card view. In recycler view there are no space between items so shadow of your cardview may be hidden because your outer frame layout completes there so try by cahnging your code like this :

    <?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:layout_height="wrap_content"
             android:layout_width="match_parent"
             xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:card_view="http://schemas.android.com/apk/res-auto"
             xmlns:app="http://schemas.android.com/apk/res-auto"
             android:padding="10dp">


<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent"
    app:cardUseCompatPadding="true"
    app:cardMaxElevation="6dp"
    android:layout_marginBottom="10dp"
    app:cardCornerRadius="3dp"
    app:cardElevation="24dp">

    <LinearLayout android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/thumbnail"
            android:layout_width="match_parent"
            android:layout_height="250dp" />

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/thumbnail"
            />
    </LinearLayout>


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

Upvotes: 2

Harshad Pansuriya
Harshad Pansuriya

Reputation: 20920

To Support it, you need to specify app:cardUseCompatPadding="true" in your support CardView.

<android.support.v7.widget.CardView
        app:cardElevation="4dp"
        app:cardUseCompatPadding="true"
        app:cardMaxElevation="6dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
</android.support.v7.widget.CardView>

Upvotes: 16

Vishal Vaishnav
Vishal Vaishnav

Reputation: 3422

Add this line to your CardView xml tag;

android:layout_margin="10dp"

Upvotes: 0

Related Questions