CardView n'affiche pas Shadow dans Android L


123

Ma vue de carte dans Listview ne montre pas d'ombre dans Android L (Nexus 5). De plus, les bords arrondis ne sont pas correctement représentés. Voici le code de la vue de l'adaptateur de Listview:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res/com.example.myapp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@android:color/white"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardCornerRadius="4dp"
    app:cardElevation="4dp" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingTop="@dimen/activity_vertical_margin" >

        <TextView
            android:id="@+id/tvName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginTop="@dimen/padding_small"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <ImageView
            android:id="@+id/ivPicture"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tvName"
            android:layout_centerHorizontal="true"
            android:scaleType="fitCenter" />

        <TextView
            android:id="@+id/tvDetail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/ivPicture"
            android:layout_centerHorizontal="true"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

Et le XML ListView:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res/com.example.myapp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/app_bg" >

<ListView
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:cacheColorHint="#00000000"
    android:divider="@android:color/transparent"
    android:drawSelectorOnTop="true"
    android:smoothScrollbar="true" />

<ProgressBar
    android:id="@+id/progressBarMain"
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:visibility="gone" /></RelativeLayout>

Cela fonctionne bien sur les appareils pré-L avec une ombre appropriée et des coins arrondis. Mais ne fonctionne pas sur un appareil Android L. Pouvez-vous dire ce que je manque ici?



@AIL Mais je n'utilise pas d'arrière-plan transparent pour cardview ou l'une de ses vues parentes
isumit

@isumit Ouais, même problème ici.
greywolf82

@ greywolf82 au cas où vous n'auriez pas encore trouvé de solution. J'ai ajouté une marge à la vue de la carte et son ombre est maintenant affichée dans Lollipop
isumit

Réponses:


279

Après avoir parcouru à nouveau la documentation, j'ai finalement trouvé la solution.

Ajoutez simplement card_view:cardUseCompatPadding="true"à votre CardViewet des ombres apparaîtront sur les appareils Lollipop.

Ce qui se passe, c'est que la zone de contenu dans une CardViewprise de tailles différentes sur les appareils pré-sucette et sucette. Ainsi, dans les appareils sucette, l'ombre est en fait couverte par la carte, donc elle n'est pas visible. En ajoutant cet attribut, la zone de contenu reste la même sur tous les appareils et l'ombre devient visible.

Mon code xml est comme:

<android.support.v7.widget.CardView
    android:id="@+id/media_card_view"
    android:layout_width="match_parent"
    android:layout_height="130dp"
    card_view:cardBackgroundColor="@android:color/white"
    card_view:cardElevation="2dp"
    card_view:cardUseCompatPadding="true"
    >
...
</android.support.v7.widget.CardView>

@ alex-lockwood Pouvez-vous expliquer votre changement, c'est- card_view:cardElevation="2sp"à- dire à card_view:cardElevation="2dp"?
Ram Patra

1
@Ramswaroop spne doit être utilisé que pour les tailles de texte. dpdoit être utilisé pour toutes les autres dimensions.
Alex Lockwood

I mon cas card_view: cardUseCompatPadding était nécessaire. De plus, je dois changer targetSdkVersion à 21. Changer la marge n'a aucun effet.
Remi

@ KishanSolanki124 Je pense que l'OP (@isumit) a perdu la trace de ce fil.
Ram Patra

55

N'oubliez pas que pour dessiner une ombre, vous devez utiliser le hardwareAccelerateddessin

hardwareAccelerated = true

entrez la description de l'image ici

hardwareAccelerated = false

matériel CardView accéléré

Voir Accélération matérielle Android pour plus de détails


10
L'accélération matérielle est activée par défaut si votre niveau d'API cible est> = 14!
Aksel Fatih

2
Ça marche,. Mais je ne comprends pas la raison derrière cela
Deepak Kumar

54

utiliser app:cardUseCompatPadding="true"dans votre vue de carte. Par exemple

<android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginRight="@dimen/cardviewMarginRight"
        app:cardBackgroundColor="@color/menudetailsbgcolor"
        app:cardCornerRadius="@dimen/cardCornerRadius"
        app:cardUseCompatPadding="true"
        app:elevation="0dp">
    </android.support.v7.widget.CardView>

28

check hardwareAccelerated dans le manifeste le rend vrai, le rendant faux supprime les ombres, quand une fausse ombre apparaît dans l'aperçu XML mais pas dans le téléphone.


24

Ajoutez cette ligne à CardView ....

card_view:cardUseCompatPadding="true" //for enable shadow
card_view:cardElevation="9dp" // this for how much shadow you want to show

Conseils

Vous pouvez éviter layout_marginTop et layout_marginBottom car l'ombre elle-même prend un peu d'espace vers le haut et vers le bas de celui-ci. La quantité d'espace définie par combien vous utiliserez dans card_view: cardElevation = "ndp".

Codage heureux (:


22

Enfin, j'ai pu obtenir des ombres sur l'appareil Lollipop en ajoutant une marge à la vue de la carte. Voici la disposition finale de la vue de la carte:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res/com.example.myapp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@android:color/white"
    android:foreground="?android:attr/selectableItemBackground"
    android:layout_marginLeft="@dimen/activity_horizontal_margin"
    android:layout_marginRight="@dimen/activity_horizontal_margin"
    android:layout_marginTop="@dimen/padding_small"
    android:layout_marginBottom="@dimen/padding_small"
    app:cardCornerRadius="4dp"
    app:cardElevation="4dp" >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingTop="@dimen/activity_vertical_margin" >

    <TextView
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="@dimen/padding_small"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <ImageView
        android:id="@+id/ivPicture"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvName"
        android:layout_centerHorizontal="true"
        android:scaleType="fitCenter" />

    <TextView
        android:id="@+id/tvDetail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ivPicture"
        android:layout_centerHorizontal="true"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin" />
</RelativeLayout>


2
J'avais déjà les valeurs card_view: cardUseCompatPadding définies, je ne pouvais toujours pas obtenir les ombres. Ce qui me manquait, c'est ceci, les marges. Et ça a vraiment marché. Merci.
Ajith Memana

quelle est votre valeur de marge? est 8dpassez?
behelit

13

Ajoutez simplement ces balises:

app:cardElevation="2dp"
app:cardUseCompatPadding="true"

Alors c'est devenu:

<android.support.v7.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="?colorPrimary"
    app:cardCornerRadius="3dp"
    app:cardElevation="2dp"
    app:cardUseCompatPadding="true"
    app:contentPadding="1dp" />

12

Vous pouvez ajouter cette ligne de code pour l'ombre en vue carte

card_view:cardElevation="3dp"

Ci-dessous vous avez un exemple

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="@android:color/white"
    android:foreground="?android:attr/selectableItemBackground"
    card_view:cardElevation="3dp"
    card_view:cardCornerRadius="4dp">

J'espère que cela t'aides!


merci, la clé était card_view: cardElevation et non android: cardElevation
Badr

8

Vous pouvez essayer en ajoutant cette ligne

 card_view:cardUseCompatPadding="true"

Le code entier ressemblera à ceci

  <android.support.v7.widget.CardView 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_margin="5dp"
        android:orientation="horizontal"
        card_view:cardUseCompatPadding="true"
        card_view:cardCornerRadius="5dp">
 </android.support.v7.widget.CardView

7

Dans mon cas, l'ombre n'apparaissait pas sur les appareils Android L car je n'ai pas ajouté de marge. Le problème est que CardView crée automatiquement cette marge sur <5 appareils, alors maintenant je le fais comme ceci:

CardView card = new CardView(context);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
        LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
if (Build.VERSION_CODES.LOLLIPOP == Build.VERSION.SDK_INT) {
    params.setMargins(shadowSize, shadowSize, shadowSize,
            shadowSize);
} else {
    card.setMaxCardElevation(shadowSize);
}
card.setCardElevation(shadowSize);
card.setLayoutParams(params);

l'ajout de marges à cardview à partir du fichier de mise en page fonctionne. N'a pas essayé du code
isumit

6

Ajoutez android: hardwareAccelerated = "true" dans votre fichier manifestes comme ci-dessous, cela fonctionne pour moi

 <activity
        android:name=".activity.MyCardViewActivity"
        android:hardwareAccelerated="true"></activity>

4

Tout d'abord, assurez-vous que les dépendances suivantes sont correctement ajoutées et compilées dans le fichier build.gradle

    dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'

    }

et après cela, essayez le code suivant:

     <android.support.v7.widget.CardView 
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_margin="5dp"
            android:orientation="horizontal"
            card_view:cardCornerRadius="5dp">
     </android.support.v7.widget.CardView

problème surgit dans Android L car l'attribut layout_margin n'est pas ajouté


0

Mon recyclerview était lent à se charger donc en lisant le stackoverflow.com, j'ai changé hardwareAccelerated à "false" alors l'élévation ne s'affiche pas dans l'appareil. Le je suis redevenu vrai. Ça marche pour moi.


0

La vue Carte ne peut pas afficher d'ombre car vous RelativeLayoutêtes dans l'ombre de la vue Carte. Pour afficher l'ombre, ajoutez des marges sur votre vue Carte. Par exemple:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="4dp"
    android:layout_marginBottom="8dp">

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

</RelativeLayout>

0

Je pense que si vous vérifiez d'abord votre manifeste si vous avez écrit, android:hardwareAccelerated="false" vous devriez trueavoir une ombre pour la carte Comme cette réponse ici


0

Vérifiez que vous n'utilisez pas android:layerType="software"dans votre RecyclerView .

Le changer pour android:layerType="hardware"résoudre le problème pour moi.


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.