web-dev-qa-db-ja.com

親の下部に配置された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>
androidshadowcardview
10
Merian

余白はあまり役に立たないので、メインコンテナにパディングを配置し、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

29
Merian

カードビューにマージンを追加することにより

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

影を付ける必要があるビューの周囲にマージンを追加すると役立つ場合があります。

5
Frank

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

1
Atul