CardView ไม่แสดง Shadow ใน Android L


123

My Cardview ภายใน Listview ไม่แสดงเงาใน Android L (Nexus 5) นอกจากนี้ขอบกลมยังแสดงไม่ถูกต้อง นี่คือรหัสสำหรับมุมมองอะแดปเตอร์ของ 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>

และ 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>

ใช้งานได้ดีกับอุปกรณ์ pre-L ที่มีเงาและมุมโค้งมนที่เหมาะสม แต่ไม่ทำงานบนอุปกรณ์ Android L บอกได้ไหมว่าฉันขาดอะไรที่นี่?



@AIL แต่ฉันไม่ได้ใช้พื้นหลังโปร่งใสสำหรับ cardview หรือมุมมองหลักใด ๆ
isumit

@isumit ใช่ปัญหาเดียวกันที่นี่
greywolf82

@ greywolf82 ในกรณีที่คุณยังไม่พบวิธีแก้ไข ฉันเพิ่มระยะขอบให้กับ cardview และตอนนี้มันกำลังแสดงเงาใน Lollipop
isumit

คำตอบ:


280

หลังจากอ่านเอกสารอีกครั้งในที่สุดฉันก็พบวิธีแก้ปัญหา

เพียงแค่เพิ่มลงcard_view:cardUseCompatPadding="true"ในของคุณCardViewและเงาของคุณจะปรากฏบนอุปกรณ์ Lollipop

สิ่งที่เกิดขึ้นคือพื้นที่เนื้อหาในCardViewขนาดที่แตกต่างกันในอุปกรณ์ก่อนอมยิ้มและอมยิ้ม ดังนั้นในอุปกรณ์อมยิ้มจึงมีเงาปกคลุมด้วยการ์ดจึงมองไม่เห็น การเพิ่มแอตทริบิวต์นี้พื้นที่เนื้อหาจะยังคงเหมือนเดิมในทุกอุปกรณ์และเงาจะปรากฏให้เห็น

รหัส xml ของฉันเป็นดังนี้:

<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 คุณช่วยกรุณาอธิบายการเปลี่ยนแปลงของคุณคือcard_view:cardElevation="2sp"เพื่อcard_view:cardElevation="2dp"?
รามภัทรา

1
@Ramswaroop spควรใช้สำหรับขนาดข้อความเท่านั้น dpควรใช้สำหรับมิติข้อมูลอื่น ๆ ทั้งหมด
Alex Lockwood

ฉัน case card_view ของฉัน: จำเป็นต้องใช้ cardUseCompatPadding นอกจากนี้ฉันต้องเปลี่ยน targetSdkVersion เป็น 21 การเปลี่ยนระยะขอบไม่มีผล
Remi

@ KishanSolanki124 ฉันคิดว่า OP (@isumit) ได้สูญเสียการติดตามของกระทู้นี้
รามภัทรา

55

อย่าลืมว่าในการวาดเงาคุณต้องใช้การhardwareAcceleratedวาดภาพ

hardwareAccelerated = true

ใส่คำอธิบายภาพที่นี่

hardwareAccelerated = false

hardwareAccelerated CardView

ดูรายละเอียดการเร่งฮาร์ดแวร์ของ Android


10
การเร่งฮาร์ดแวร์จะเปิดใช้งานโดยค่าเริ่มต้นหากระดับ API เป้าหมายของคุณคือ> = 14!
Aksel Fatih

2
มันใช้งานได้. แต่ฉันไม่เข้าใจเหตุผลเบื้องหลังสิ่งนี้
Deepak Kumar

54

ใช้ app:cardUseCompatPadding="true"ภายใน cardview ของคุณ ตัวอย่างเช่น

<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

ตรวจสอบhardwareAccelerated ในรายการทำให้เป็นจริงทำให้เป็นเท็จลบเงาเมื่อเงาเท็จปรากฏในตัวอย่าง xml แต่ไม่ปรากฏในโทรศัพท์


24

เพิ่มบรรทัดนี้ใน CardView ....

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

เคล็ดลับ

คุณสามารถหลีกเลี่ยง layout_marginTop และ layout_marginBottom ได้เนื่องจากเงาจะใช้พื้นที่ในการขึ้นและลงจำนวนพื้นที่ที่กำหนดโดยจำนวนเงินที่คุณจะใช้ใน card_view: cardElevation = "ndp"

Happy Coding (:


22

ในที่สุดฉันก็สามารถรับเงาบนอุปกรณ์ Lollipop ได้โดยเพิ่มระยะขอบให้กับมุมมองการ์ด นี่คือรูปแบบการดูการ์ดขั้นสุดท้าย:

<?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
ฉันมีชุดค่า card_view: cardUseCompatPadding แล้ว แต่ก็ยังไม่สามารถรับเฉดสีได้ สิ่งที่ฉันขาดหายไปคือนี่คือระยะขอบ และมันได้ผลจริงๆ ขอบคุณ
Ajith Memana

ค่ามาร์จิ้นของคุณคืออะไร? คือ8dpพอ?
behelit

13

เพียงเพิ่มแท็กนี้:

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

ดังนั้นมันจึงกลายเป็น:

<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

คุณสามารถเพิ่มโค้ดบรรทัดนี้สำหรับเงาในมุมมองการ์ด

card_view:cardElevation="3dp"

ด้านล่างนี้คุณมีตัวอย่าง

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

หวังว่านี่จะช่วยได้!


ขอบคุณคีย์คือ card_view: cardElevation ไม่ใช่ android: cardElevation
Badr

8

คุณสามารถลองโดยเพิ่มบรรทัดนี้

 card_view:cardUseCompatPadding="true"

Whole code จะเป็นแบบนี้

  <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

ในกรณีของฉันเงาไม่ปรากฏบนอุปกรณ์ Android L เพราะฉันไม่ได้เพิ่มระยะขอบ ปัญหาคือ CardView สร้างระยะขอบนี้โดยอัตโนมัติบนอุปกรณ์ <5 เครื่องตอนนี้ฉันทำแบบนี้:

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

การเพิ่มระยะขอบให้กับ cardview จากงานไฟล์เค้าโครง ไม่ได้ลองใช้รหัส
isumit

6

เพิ่ม android: hardwareAccelerated = "true" ในไฟล์ Manifest ของคุณเหมือนด้านล่างซึ่งใช้ได้กับฉัน

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

4

ก่อนอื่นตรวจสอบให้แน่ใจว่าการอ้างอิงต่อไปนี้ถูกเพิ่มและคอมไพล์อย่างเหมาะสมในไฟล์ build.gradle

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

    }

และหลังจากนี้ลองใช้รหัสต่อไปนี้:

     <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

ไม่มีการเพิ่มปัญหาในแอตทริบิวต์ layout_margin ของ Android L beacuse


0

Recyclerview ของฉันโหลดช้าดังนั้นเมื่ออ่าน stackoverflow.com ฉันเปลี่ยน hardwareAccelerated เป็น "false" จากนั้นระดับความสูงจะไม่แสดงในอุปกรณ์ ฉันเปลี่ยนกลับเป็นจริง มันใช้ได้กับฉัน


0

มุมมองการ์ดไม่สามารถแสดงเงาได้เนื่องจากคุณRelativeLayoutอยู่ในเงาของมุมมองการ์ด หากต้องการแสดงเงาให้เพิ่มระยะขอบในมุมมองการ์ดของคุณ ตัวอย่างเช่น:

<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

ฉันคิดว่าถ้าคุณตรวจสอบไฟล์ Manifest ของคุณก่อนหากคุณเขียนandroid:hardwareAccelerated="false" คุณควรทำให้มันtrueมีเงาสำหรับการ์ดชอบคำตอบนี้ที่นี่


0

ตรวจสอบคุณไม่ได้ใช้android:layerType="software"ของคุณในRecyclerView

การเปลี่ยนเพื่อandroid:layerType="hardware"แก้ไขปัญหาให้ฉัน


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.