How to add shadow on CardView aligned to bottom of parent

问题

I have a CardView aligned bottom to screen, destpite the elevation I want to add more shadow to top of the CardView. I've tried with

  android:shadowColor="#000"
  android:shadowDx="0"
  android:shadowDy="30"
  android:shadowRadius="50"

But see no changes this is my code:

    <RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:clipToPadding="false"
        android:clipChildren="false"
         android:orientation="vertical"
         android:layout_width="match_parent"
         android:layout_height="match_parent">

    <!--rest of the code-->

     <LinearLayout
            android:layout_width="match_parent"
            android:layout_alignParentBottom="true"
            android:shadowColor="#000"
            android:shadowDx="0"
            android:shadowDy="30"
            android:shadowRadius="50"
            android:layout_height="wrap_content">
        <android.support.v7.widget.CardView      
xmlns:app="http://schemas.android.com/apk/res-auto"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:elevation="8dp"                         
             android:divider="@android:color/transparent"
             android:dividerHeight="0.0px"
             android:clipToPadding="false"
             android:clipChildren="false"
             app:cardElevation="10dp"
             app:cardPreventCornerOverlap="false">

          <!--rest of the code-->
    </android.support.v7.widget.CardView>
    </LinearLayout>

    </RelativeLayout>

回答1:

Well margin don't help much, so I put padding on main container and remove all those shadow properties because the android:elevation="" is what is doing the job.

Here is some clear code, that is working for this need:

<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:clipToPadding="false"
        android:clipChildren="false"
        android:orientation="vertical"
        android:padding="20dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

  <!--rest of the code-->

  <LinearLayout
         android:layout_width="match_parent"
         android:layout_alignParentBottom="true"
         android:clipToPadding="false"
       android:clipChildren="false"
         android:layout_height="wrap_content">
    <android.support.v7.widget.CardView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:elevation="8dp"
         android:divider="@android:color/transparent"
         android:dividerHeight="0.0px"
         android:clipToPadding="false"
         android:clipChildren="false"
         card_view:cardElevation="10dp"
         card_view:cardPreventCornerOverlap="false">

      <TextView
          android:layout_width="match_parent"
          android:padding="20dp"
          android:layout_height="wrap_content"
          android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
          do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
          veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborum"
        />   
    </android.support.v7.widget.CardView>
  </LinearLayout>

</RelativeLayout>

And an image on how this looks:

回答2:

By adding margin to your Card View

<LinearLayout
        android:layout_width="match_parent"
        android:layout_alignParentBottom="true"
        android:shadowColor="#000"
        android:shadowDx="0"
        android:shadowDy="30"
        android:shadowRadius="50"
        android:layout_height="wrap_content">

        <android.support.v7.widget.CardView
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:elevation="8dp"
            android:divider="@android:color/transparent"
            android:dividerHeight="0.0px"
            android:clipToPadding="false"
            android:clipChildren="false"
            app:cardElevation="10dp"
            android:layout_margin="4dp"
            app:cardPreventCornerOverlap="false">

            <!--rest of the code-->
        </android.support.v7.widget.CardView>
    </LinearLayout>

回答3:

Adding a margin around the view that should have a shadow might help.

回答4:

You can use the following XML as the background of layout for shadow

use shadow_background.xml in layout

  <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shadow_background_1">
  </RelativeLayout>

shadow_background.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
    <shape>
        <padding android:top="0.5dp" android:right="0.5dp" android:bottom="1dp" android:left="0.5dp" />
        <solid android:color="#10CCCCCC" />
        <corners android:radius="8dp" />
    </shape>
</item>
<item>
    <shape>
        <padding android:top="0.5dp" android:right="0dp" android:bottom="1dp" android:left="0.5dp" />
        <solid android:color="#10CCCCCC" />
        <corners android:radius="7dp" />
    </shape>
</item>
<item>
    <shape>
        <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
        <solid android:color="#20CCCCCC" />
        <corners android:radius="6dp" />
    </shape>
</item>
<item>
    <shape>
        <padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
         <solid android:color="#30CCCCCC" />
        <corners android:radius="5dp" />
    </shape>
</item>
<item>
    <shape>
        <padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
        <solid android:color="#40CCCCCC" />
        <corners android:radius="4dp" />
    </shape>
</item>
<item>
    <shape>
        <padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
        <solid android:color="#50CCCCCC" />
        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape>

        <padding android:top="0dp" android:right="0.1dp" android:bottom="0.5dp" android:left="0.1dp" />
        <solid android:color="#60CCCCCC" />
        <corners android:radius="3dp" />
    </shape>
</item>

<!-- Background -->
<item>
    <shape>
        <solid android:color="#ffffff" />
        <corners android:radius="3dp" />
    </shape>
</item>

来源：https://stackoverflow.com/questions/41615468/how-to-add-shadow-on-cardview-aligned-to-bottom-of-parent