O CardView não mostra sombra no Android L


123

Meu Cardview dentro do Listview não está exibindo sombra no Android L (Nexus 5). Além disso, as bordas arredondadas não são mostradas corretamente. Aqui está o código para a visualização do adaptador do 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>

E o ListView xml:

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

Ele funciona bem em dispositivos pré-L com sombra adequada e cantos arredondados. Mas não funciona em um dispositivo Android L. Você pode dizer o que estou perdendo aqui?



@AIL Mas eu não estou usando nenhum plano de fundo transparente para o cardview ou qualquer uma de suas visualizações principais
isumit

@isumit Sim, mesmo problema aqui.
greywolf82

@ greywolf82 caso ainda não tenha encontrado uma solução. Eu adicionei margem ao Cardview e agora está exibindo sombra no Lollipop
isumit 01 de

Respostas:


279

Depois de passar pelos documentos novamente, finalmente encontrei a solução.

Basta adicionar card_view:cardUseCompatPadding="true"ao seu CardViewe as sombras aparecerão nos dispositivos Lollipop.

O que acontece é que a área de conteúdo CardViewtem tamanhos diferentes em dispositivos pré-pirulito e pirulito. Então, em dispositivos pirulito, a sombra é realmente coberta pelo cartão, então não é visível. Ao adicionar este atributo, a área de conteúdo permanece a mesma em todos os dispositivos e a sombra se torna visível.

Meu código xml é como:

<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 Você pode explicar sua mudança, ou seja, card_view:cardElevation="2sp"para card_view:cardElevation="2dp"?
Ram Patra,

1
@Ramswaroop spsó deve ser usado para tamanhos de texto. dpdeve ser usado para todas as outras dimensões.
Alex Lockwood

I my case card_view: cardUseCompatPadding was needed. Além disso, preciso alterar targetSdkVersion para 21. Alterar a margem não tem efeito.
Remi

@ KishanSolanki124 Acho que o OP (@isumit) perdeu o controle deste tópico.
Ram Patra

55

Não se esqueça que para desenhar sombra você deve usar o hardwareAccelerateddesenho

hardwareAccelerated = true

insira a descrição da imagem aqui

hardwareAccelerated = false

hardwareAccelerated CardView

Consulte a aceleração de hardware do Android para obter detalhes


10
A aceleração de hardware é habilitada por padrão se o nível de API de destino for> = 14!
Aksel Fatih

2
Está funcionando,. Mas eu não entendo a razão por trás disso
Deepak Kumar

54

usar app:cardUseCompatPadding="true"dentro do cardview. Por exemplo

<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

verificar hardwareAcelerado no manifesto torná-lo verdadeiro, tornando-o falso remove sombras, quando a sombra falsa aparece na visualização xml, mas não no telefone.


24

Adicione esta linha ao CardView ....

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

Dicas

Você pode evitar layout_marginTop e layout_marginBottom, já que a própria sombra ocupa algum espaço para cima e para baixo. A quantidade de espaço definida por quanto você usará em card_view: cardElevation = "ndp".

Happy Coding (:


22

Finalmente, consegui obter sombras no dispositivo Lollipop adicionando margem ao cardview. Aqui está o layout final do cardview:

<?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
Eu já tinha os valores card_view: cardUseCompatPadding configurados, ainda não consegui obter as sombras. O que estava faltando é isso, as margens. E realmente funcionou. Obrigado.
Ajith Memana de

qual é o seu valor de margem? é o 8dpsuficiente?
Behelit

13

Basta adicionar estas tags:

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

Então se tornou:

<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

Você pode adicionar esta linha de código para sombra na visualização do cartão

card_view:cardElevation="3dp"

Abaixo você tem um exemplo

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

Espero que isto ajude!


obrigado, a chave era card_view: cardElevation e não android: cardElevation
Badr

8

Você pode tentar adicionando esta linha

 card_view:cardUseCompatPadding="true"

O código inteiro será parecido com este

  <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

No meu caso, a sombra não estava aparecendo em dispositivos Android L porque eu não adicionei uma margem. O problema é que o CardView cria essa margem automaticamente em <5 dispositivos, então agora eu faço assim:

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

adicionar margens ao cardview de arquivos de layout funciona. Não tentei com o código
isumit

6

Adicione android: hardwareAccelerated = "true" em seu arquivo de manifestos como abaixo, funciona para mim

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

4

Em primeiro lugar, certifique-se de que as seguintes dependências sejam adicionadas e compiladas de forma adequada no arquivo build.gradle

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

    }

e depois tente o seguinte código:

     <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

o problema aumenta no Android L porque o atributo layout_margin não foi adicionado


0

Meu recyclerview carregava lentamente, então, lendo stackoverflow.com, mudei hardwareAccelerated para "false" e a elevação não está aparecendo no dispositivo. O que eu mudei de volta para verdade. Funciona para mim.


0

A visualização do cartão não pode mostrar sombra porque você RelativeLayoutestá na sombra da visualização do cartão. Para mostrar a sombra, adicione margens na visualização do cartão. Por exemplo:

<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

Eu acho que se você verificar seu manifesto primeiro, se você escreveu, android:hardwareAccelerated="false" você deve fazer com que truetenha sombra para o cartão Como esta resposta aqui


0

Verifique se você não está usando android:layerType="software"em seu RecyclerView .

Mudar para android:layerType="hardware"resolveu o problema para mim.


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.