如何在与父级底部对齐的CardView上添加阴影

时间:2017-01-12 14:19:14

标签: android shadow cardview

我有一个CardView对齐底部屏幕,尽管我希望在CardView顶部添加更多阴影。我试过

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

但是看到没有变化这是我的代码:

    <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>

4 个答案:

答案 0 :(得分:24)

好的边距不会有多大帮助,所以我在主容器上添加了填充并删除了所有这些阴影属性,因为android:elevation=""正在完成工作。

以下是一些明确的代码,可以满足这种需求:

<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>

关于这看起来的图像: enter image description here

答案 1 :(得分:4)

在应该有阴影的视图周围添加边距可能会有所帮助。

答案 2 :(得分:4)

通过在卡片视图中添加保证金

<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 :(得分:0)

您可以使用以下XML作为阴影的布局背景

在布局中使用shadow_background.xml

  <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>

enter image description here