Android ดูเงา

104

ฉันค้นหารอบ ๆ แต่ไม่พบวิธีที่เหมาะสมในการดำเนินการนี้ ฉันต้องการให้เอฟเฟกต์เงาต่อไปนี้ในมุมมองของฉัน: ป้อนคำอธิบายภาพที่นี่

ป้อนคำอธิบายภาพที่นี่

บอกตามตรงฉันไม่รู้ว่าวินาทีนี้ทำโดยใช้เอฟเฟกต์เงาหรือไม่ ความคิดใด ๆ ?

android  shadow  dropshadow 
— longwalker
แหล่งที่มา
1
คุณหมายถึงสิ่งนี้? stackoverflow.com/questions/4406524/… (ตรวจสอบคำตอบที่โหวตสูงสุดไม่ใช่คำตอบที่ทำเครื่องหมายไว้)
— Luke Vo
1
@DatVM ขอบคุณดูเหมือนจะทำเคล็ดลับ แต่ฉันคิดว่าอาจมีเครื่องมือในตัวใน android sdk ตัวอย่างเช่นการเพิ่มเงาตกสำหรับเลย์เอาต์เชิงเส้นโดยการเพิ่มโค้ดบางบรรทัด: P
— longwalker
คำถามที่คล้ายกัน - stackoverflow.com/q/52954743/9640177 - การเพิ่มเงาให้กับเวกเตอร์ที่วาดได้
— mayank1513

คำตอบ:

158

ฉันรู้ว่าคำถามนี้ได้รับคำตอบแล้ว แต่ฉันต้องการให้คุณรู้ว่าฉันพบว่าdrawableในAndroid Studioนั้นคล้ายกับรูปภาพที่คุณมีในคำถามมาก: ลองดูสิ่งนี้:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

ดูเหมือนว่า:

ป้อนคำอธิบายภาพที่นี่

หวังว่าจะเป็นประโยชน์

แก้ไข

ตัวเลือกด้านบนมีไว้สำหรับเวอร์ชันเก่าAndroid Studioดังนั้นคุณอาจไม่พบ สำหรับเวอร์ชันที่ใหม่กว่า:

android:background="@android:drawable/dialog_holo_light_frame"

ยิ่งไปกว่านั้นหากคุณต้องการมีรูปร่างที่กำหนดเองฉันขอแนะนำให้ใช้ซอฟต์แวร์วาดภาพเหมือนPhotoshopและวาดมัน

ป้อนคำอธิบายภาพที่นี่

อย่าลืมที่จะบันทึกเป็น.9.pngไฟล์ (ตัวอย่าง: my_background.9.png)

อ่านเอกสาร: วาด 9-patch

แก้ไข 2

วิธีแก้ปัญหาที่ดีกว่าและทำงานยากน้อยกว่าคือการใช้CardViewและตั้งค่าapp:cardPreventCornerOverlap="false"เพื่อป้องกันไม่ให้มุมมองซ้อนทับเส้นขอบ:

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="2dp"
    app:cardElevation="2dp"
    app:cardPreventCornerOverlap="false"
    app:contentPadding="0dp">

    <!-- your layout stuff here -->

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

ตรวจสอบให้แน่ใจว่าได้รวมเวอร์ชันล่าสุดไว้ในเวอร์ชันbuild.gradleปัจจุบันแล้ว

compile 'com.android.support:cardview-v7:26.0.0'
— ริก
แหล่งที่มา
ขอบคุณจริงๆมันดูคล้ายกันมาก ฉันพบ "เค้าโครงการ์ด Google" สำหรับ Android ด้วยและมันก็เจ๋งมาก!
— longwalker
6
น่ากลัว นี่เป็นเพียง FYI สำหรับผู้ชมในอนาคต/<sdk-path>/extras/android/supportเท่านั้น
— theblang
2
สิ่งที่เกี่ยวกับการใช้ acardView
— Alex Chengalan
100

ฉันใช้ Android Studio 0.8.6 และไม่พบ:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

ดังนั้นฉันจึงพบสิ่งนี้แทน:

android:background="@android:drawable/dialog_holo_light_frame"

และดูเหมือนว่า:

ป้อนคำอธิบายภาพที่นี่

— Repo
แหล่งที่มา
1
แต่เราไม่สามารถเพิ่มรัศมีมุมได้?!
— Fay007
40

การวางพื้นหลัง@android:drawable/dialog_holo_light_frameให้เงา แต่คุณไม่สามารถเปลี่ยนสีพื้นหลังหรือรูปแบบเส้นขอบได้ดังนั้นจึงเป็นการดีกว่าที่จะได้รับประโยชน์จากเงาของมันในขณะที่ยังสามารถใส่พื้นหลังผ่านรายการเลเยอร์

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--the shadow comes from here-->
    <item
        android:bottom="0dp"
        android:drawable="@android:drawable/dialog_holo_light_frame"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">

    </item>

    <item
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">
        <!--whatever you want in the background, here i preferred solid white -->
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />

        </shape>
    </item>
</layer-list>

บันทึกไว้ในโฟลเดอร์ drawable ภายใต้พูด shadow.xml

เพื่อกำหนดให้กับมุมมองในไฟล์เลย์เอาต์ xml จะตั้งค่าพื้นหลังของมัน 

android:background="@drawable/shadow"
— โมฮาเหม็ดเซลิม
แหล่งที่มา
คุณตรวจสอบว่าใช้งานได้หรือไม่? <item> ที่สองไม่ทำอะไรเลย ฉันไม่สามารถเปลี่ยนเป็นมุมโปร่งใสหรือโค้งมนได้
— zeeshan
2
ในบรรดาทุกสิ่งที่ฉันได้ลองมีเพียงสิ่งเดียวที่ได้ผลขอบคุณ
— Shyam Sunder
1
ทางออกที่ยอดเยี่ยม
— user1974368
35

สร้าง card_background.xml ในโฟลเดอร์ res / drawable ด้วยรหัสต่อไปนี้:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>
    <shape android:shape="rectangle">
        <solid android:color="#BDBDBD"/>
        <corners android:radius="5dp"/>
    </shape>
</item>

<item
    android:left="0dp"
    android:right="0dp"
    android:top="0dp"
    android:bottom="2dp">
    <shape android:shape="rectangle">
        <solid android:color="#ffffff"/>
        <corners android:radius="5dp"/>
    </shape>
</item>
</layer-list>

จากนั้นเพิ่มรหัสต่อไปนี้ในองค์ประกอบที่คุณต้องการให้เค้าโครงการ์ด

android:background="@drawable/card_background"

บรรทัดต่อไปนี้กำหนดสีของเงาสำหรับการ์ด 

<solid android:color="#BDBDBD"/>
— วิเวกวาร์มา
แหล่งที่มา
10
นี่ไม่ใช่เงา - เพราะมันไม่จางหาย มันเป็นเหมือนเส้นขอบสองด้าน
— ban-geoengineering
มันไม่ใช่เงา
— ShadeToD
24

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

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

มันต้องการการพึ่งพาครั้งต่อไป

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
}
— Ilya Gazman
แหล่งที่มา
1
นี่เป็นคำตอบเดียวที่ถูกต้องเนื่องจากมีเพียงCardViewระดับเงาที่แตกต่างกันสำหรับระดับความสูงต่างๆในโหมดความเข้ากัน
— Jarett Millard
ฉันแนะนำ MaterialCardView เนื่องจากมีความชัดเจนและมีความสามารถมากกว่า
— H. Farid
12

อาจจะสายไป แต่สำหรับผู้ที่ยังคงมองหาคำตอบสำหรับสิ่งนี้ฉันพบโครงการบน git hub และนี่เป็นโครงการเดียวที่ตรงกับความต้องการของฉันจริงๆ android-materialshadowninepatch

เพียงเพิ่มบรรทัดนี้ในการพึ่งพา build.gradle ของคุณ

compile 'com.h6ah4i.android.materialshadowninepatch:materialshadowninepatch:0.6.3'

ไชโย ยกนิ้วให้ผู้สร้าง! มีความสุข

— ราล์ฟแกบบ
แหล่งที่มา
เฮ้ @ralphgabb สิ่งนี้ยังใช้ได้ดีสำหรับคุณหรือคุณมีทางออกที่ดีกว่าสำหรับอุปกรณ์อมยิ้มก่อน?
— Swapnil
@Swapnil ไม่แน่ใจว่า AndroidX รองรับสิ่งนี้หรือไม่ตอนนี้ฉันไม่สนับสนุนอุปกรณ์ pre-Marshmallow แล้ว
— ralphgabb
7

ฉันรู้ว่านี่เป็นการแฮ็กอย่างโง่เขลา
แต่ถ้าคุณต้องการสนับสนุนภายใต้ v21 นี่คือความสำเร็จของฉัน

rectangle_with_10dp_radius_white_bg_and_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Shadow layers -->
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_1" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_2" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_3" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_4" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_5" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_6" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_7" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_8" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_9" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_10" />
        </shape>
    </item>

    <!-- Background layer -->
    <item>
        <shape>
            <solid android:color="@android:color/white" />
            <corners android:radius="10dp" />
        </shape>
    </item>

</layer-list>

rectangle_with_10dp_radius_white_bg_and_shadow.xml (v21)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white" />
    <corners android:radius="10dp" />
</shape>

view_incoming.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/rectangle_with_10dp_radius_white_bg_and_shadow"
    android:elevation="7dp"
    android:gravity="center"
    android:minWidth="240dp"
    android:minHeight="240dp"
    android:orientation="horizontal"
    android:padding="16dp"
    tools:targetApi="lollipop">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Hello World !" />

</LinearLayout>

นี่คือผลลัพธ์:

ภายใต้ v21 (นี่คือสิ่งที่คุณสร้างด้วย xml) ป้อนคำอธิบายภาพที่นี่

สูงกว่า v21 (การแสดงผลระดับความสูงจริง) ป้อนคำอธิบายภาพที่นี่

  • ความแตกต่างที่สำคัญอย่างหนึ่งคือจะใช้พื้นที่ด้านในจากมุมมองดังนั้นพื้นที่เนื้อหาจริงของคุณจึงมีขนาดเล็กกว่า> =อุปกรณ์อมยิ้ม
— wonsuc
แหล่งที่มา
4

หากคุณต้องการใช้เงาอย่างถูกต้องคุณต้องทำสิ่งต่อไปนี้

พิจารณามุมมองนี้ซึ่งกำหนดด้วยพื้นหลังที่วาดได้:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

พื้นหลังที่วาดได้ถูกกำหนดให้เป็นสี่เหลี่ยมผืนผ้าที่มีมุมโค้งมน:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

นี่เป็นวิธีที่แนะนำในการใช้เงาลองดูที่https://developer.android.com/training/material/shadows-clipping.html#Shadows

— เปลี่ยน Sivan
แหล่งที่มา
2

ใช้คุณสมบัติการยกระดับเพื่อให้เงามีผล:

<YourView
    ...
    android:elevation="3dp"/>
— Ofek Ashery
แหล่งที่มา
การใช้ระดับความสูงต้องใช้อุปกรณ์เพื่อเรียกใช้ Lollipop
— Shane Rowatt
2

สร้างพื้นหลังที่วาดได้เช่นนี้เพื่อแสดงเงาโค้งมน

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#00CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#10CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#20d5d5d5" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="6dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#30cbcbcb" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#50bababa" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="@color/gray_100" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>
— gaurav iqlance
แหล่งที่มา
โปรดเพิ่มคำอธิบายสำหรับรหัสที่คุณให้มาด้วย
— Mangaldeep Pannu
วิธีแก้ปัญหา xml ที่ดีมากเท่านั้น
— Bruno Bieri
2

คำถามนี้อาจจะเก่า แต่สำหรับใครก็ตามในอนาคตที่ต้องการวิธีง่ายๆในการบรรลุเอฟเฟกต์เงาที่ซับซ้อนลองดูห้องสมุดของฉันที่นี่ https://github.com/BluRe-CN/ComplexView

การใช้ไลบรารีคุณสามารถเปลี่ยนสีเงาปรับแต่งขอบและอื่น ๆ อีกมากมาย นี่คือตัวอย่างเพื่อบรรลุสิ่งที่คุณต้องการ

<com.blure.complexview.ComplexView
        android:layout_width="400dp"
        android:layout_height="600dp"
        app:radius="10dp"
        app:shadow="true"
        app:shadowSpread="2">

        <com.blure.complexview.ComplexView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:color="#fdfcfc"
            app:radius="10dp" />
    </com.blure.complexview.ComplexView>

หากต้องการเปลี่ยนสีเงาให้ใช้ app: shadowColor = "your color code"

— BluRe.CN
แหล่งที่มา
1

ใช้รูปร่างนี้เป็นพื้นหลัง: 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@android:drawable/dialog_holo_light_frame"/>

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="1dp" />
            <solid android:color="@color/gray_200" />
        </shape>
    </item>

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