web-dev-qa-db-fra.com

Comment ajouter une ombre sur CardView alignée au bas du parent

J'ai un CardView aligné en bas à l'écran, malgré l'élévation, je veux ajouter plus d'ombre en haut du CardView. J'ai essayé avec

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

Mais ne voyez aucun changement, voici mon 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>
androidshadowcardview
10
Merian

Eh bien, la marge n'aide pas beaucoup, alors je mets du rembourrage sur le conteneur principal et je supprime toutes ces propriétés d'ombre parce que le Android:elevation="" est ce qui fait le travail.

Voici un code clair, qui fonctionne pour ce besoin:

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

Et une image à quoi cela ressemble: enter image description here

29
Merian

En ajoutant de la marge à votre vue Carte

<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

L'ajout d'une marge autour de la vue qui devrait avoir une ombre peut être utile.

5
Frank

Vous pouvez utiliser le XML suivant comme arrière-plan de la mise en page pour l'ombre

utiliser shadow_background.xml dans la mise en page

  <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