เพิ่มเงาให้กับรูปร่างที่กำหนดเองบน Android

130

เป็นไปได้ไหมที่จะเพิ่มเงาลงในรูปร่างที่กำหนดเองใน Android หลังจากดูเอกสารแล้วฉันเห็นเพียงวิธีใช้เงาข้อความเท่านั้น

ฉันได้ลองโดยไม่มีโชค:

<?xml version="1.0" encoding="UTF-8"?> 
   <shape xmlns:android="http://schemas.android.com/apk/res/android" 
   android:shape="rectangle"> 
     <solid android:color="#90ffffff"/>
       <corners android:radius="12dp" />
     <item name="android:shadowColor">#000000</item> 
     <item name="android:shadowRadius">5</item> 
     <item name="android:shadowDy">3</item> 
   </shape>
android  android-layout 
— mdunkle
แหล่งที่มา

คำตอบ:

165

หลังจากการค้นหามากมายในที่สุดฉันก็ได้สิ่งนี้

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

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

<!-- Bottom 2dp Shadow -->
<item>
    <shape  android:shape="rectangle">

        <solid android:color="#d8d8d8" />
        <corners android:radius="7dp" />

    </shape>
</item>

<!-- White Top color -->
<item android:bottom="3px">

    <shape  android:shape="rectangle">

    <solid android:color="#FFFFFF" />
    <corners android:radius="7dp" />


    </shape>

</item>


</layer-list>
— Chirag Patel
แหล่งที่มา
5
คุณกำหนดค่าที่ไหน<!-- Bottom 2dp Shadow -->ฉันไม่เห็น2รหัสของคุณ ... ???
— Choletski
74

นี่คือวิธีที่ฉันทำ:

ปุ่ม Android เนทีฟพร้อมเงา

รหัสร้องสำหรับปุ่มเดียว STATE:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- "background shadow" -->
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#000000" />

            <corners android:radius="15dp" />
        </shape>
    </item>
    <!-- background color -->
    <item
        android:bottom="3px"
        android:left="3px"
        android:right="3px"
        android:top="3px">
        <shape android:shape="rectangle" >
            <solid android:color="#cc2b2b" />


            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- over left shadow -->
    <item>
        <shape android:shape="rectangle" >
            <gradient
                android:angle="180"
                android:centerColor="#00FF0000"
                android:centerX="0.9"
                android:endColor="#99000000"
                android:startColor="#00FF0000" />

            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- over right shadow -->
    <item>
        <shape android:shape="rectangle" >
            <gradient
                android:angle="360"
                android:centerColor="#00FF0000"
                android:centerX="0.9"
                android:endColor="#99000000"
                android:startColor="#00FF0000" />

            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- over top shadow -->
    <item>
        <shape android:shape="rectangle" >
            <gradient
                android:angle="-90"
                android:centerColor="#00FF0000"
                android:centerY="0.9"
                android:endColor="#00FF0000"
                android:startColor="#99000000"
                android:type="linear" />

            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- over bottom shadow -->
    <item>
        <shape android:shape="rectangle" >
            <gradient
                android:angle="90"
                android:centerColor="#00FF0000"
                android:centerY="0.9"
                android:endColor="#00FF0000"
                android:startColor="#99000000"
                android:type="linear" />

            <corners android:radius="8dp" />
        </shape>
    </item>
</layer-list>

จากนั้นคุณควรมีตัวเลือกที่มีปุ่มเวอร์ชันต่างๆเช่น:

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

    <item android:drawable="@drawable/ic_button_red_pressed" android:state_pressed="true"/> <!-- pressed -->
    <item android:drawable="@drawable/ic_button_red_selected" android:state_focused="true"/> <!-- focused -->
    <item android:drawable="@drawable/ic_button_red_selected" android:state_selected="true"/> <!-- selected -->
    <item android:drawable="@drawable/ic_button_red_default"/> <!-- default -->

</selector>

หวังว่านี่จะช่วยให้คุณ.. โชคดี

— João Machete
แหล่งที่มา
47

นี่คือเงาตกรุ่นของฉัน ฉันกำลังมองหาเงาหมอกรอบ ๆ รูปร่างและใช้คำตอบนี้ของJoakim Lundborgเป็นจุดเริ่มต้นของฉัน สิ่งที่ฉันเปลี่ยนคือเพิ่มมุมให้กับไอเท็มเงาทั้งหมดและเพิ่มรัศมีของมุมสำหรับไอเท็มเงาแต่ละชิ้นที่ตามมา ดังนั้นนี่คือxml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#02000000" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#05000000" />
            <corners android:radius="7dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#10000000" />
            <corners android:radius="6dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#15000000" />
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#20000000" />
            <corners android:radius="4dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#25000000" />
            <corners android:radius="3dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#30000000" />
            <corners android:radius="3dp" />
        </shape>
    </item>

    <!-- Background -->
    <item>
    <shape>
            <solid android:color="#0099CC" />
        <corners android:radius="3dp" />
    </shape>
   </item>
</layer-list>
— BruceHill
แหล่งที่มา
ทำงานได้ดี .. ขอบคุณ (y)
— Faldu Jaldeep
31

สิ่งต่อไปนี้ใช้ได้ผลสำหรับฉัน: เพียงบันทึกเป็น custom_shape.xml

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

    <!-- "shadow" -->
    <item>
        <shape android:shape="rectangle" >
           <solid android:color="#000000"/>
           <corners android:radius="12dp" />
        </shape>
    </item>


    <item android:bottom="3px">
        <shape android:shape="rectangle"> 
            <solid android:color="#90ffffff"/>
            <corners android:radius="12dp" />
         </shape>
    </item>

</layer-list>
— Siklab.ph
แหล่งที่มา
28

ฉันคิดว่าวิธีนี้ให้ผลลัพธ์ที่ดีมาก:

<!-- Drop Shadow Stack -->
<item>
    <shape>
        <padding
                android:top="1dp"
                android:right="1dp"
                android:bottom="1dp"
                android:left="1dp"/>
        <solid android:color="#00CCCCCC"/>
    </shape>
</item>
<item>
    <shape>
        <padding
                android:top="1dp"
                android:right="1dp"
                android:bottom="1dp"
                android:left="1dp"/>
        <solid android:color="#10CCCCCC"/>
    </shape>
</item>
<item>
    <shape>
        <padding
                android:top="1dp"
                android:right="1dp"
                android:bottom="1dp"
                android:left="1dp"/>
        <solid android:color="#20CCCCCC"/>
    </shape>
</item>
<item>
    <shape>
        <padding
                android:top="1dp"
                android:right="1dp"
                android:bottom="1dp"
                android:left="1dp"/>
        <solid android:color="#30CCCCCC"/>
    </shape>
</item>
<item>
    <shape>
        <padding
                android:top="1dp"
                android:right="1dp"
                android:bottom="1dp"
                android:left="1dp"/>
        <solid android:color="#50CCCCCC"/>
    </shape>
</item>

<item>

    <shape android:shape="rectangle">
        <stroke android:color="#CCC" android:width="1dp"/>
        <solid android:color="#FFF" />
        <corners android:radius="2dp" />

    </shape>

</item>
— Joakim Lundborg
แหล่งที่มา
8

คำถามเก่า แต่ระดับความสูงที่มีอยู่ในดีไซน์ Material จะให้เงาแก่ทุกมุมมอง

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

ดูเอกสารได้ที่https://developer.android.com/training/material/shadows-clipping.html

— wainy
แหล่งที่มา
จะเกิดอะไรขึ้นถ้าคุณมีวิดเจ็ต UI หลายตัวซึ่งควรจะปรากฏขึ้นพร้อมกับเงาเดียวรอบ ๆ รูปร่างภายนอกสุด? ฉันพยายามเพิ่มระดับความสูงไปที่ด้านนอก แต่ด้านในซ่อนอยู่ด้านหลังด้านนอก ฉันจึงลองเพิ่มระดับความสูงให้กับทั้งสอง แต่ดูเหมือนว่าด้านในจะมีเงาอยู่ด้านบนของด้านนอกเหมือนปิรามิดอินคา
— Michael Osofsky
ฉันสิ้นสุดการจัดการกับการหลอมละลายโดยใช้ไหม้ImageButtonแทนที่จะเป็นImageViewบวกButton' because it allows a ImageButton` ช่วยให้ทั้งสองและandroid:background android:srcดังนั้นฉันจึงสามารถระบุandroid:elevationเพียงครั้งเดียวและหลีกเลี่ยง "ผลปิรามิดอินคา" ที่ฉันอธิบายไว้ในความคิดเห็นล่าสุดของฉัน
— Michael Osofsky
8

ฉันขอแนะนำการปรับปรุงเล็กน้อยสำหรับวิธีแก้ปัญหาของ Bruce ซึ่งก็คือการป้องกันไม่ให้มีการวาดรูปทรงเดียวกันทับกันมากเกินไปและใช้เส้นขีดแทนของแข็ง จะมีลักษณะดังนี้:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#02000000" android:width="1dp"  />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#05000000" android:width="1dp" />
            <corners android:radius="7dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#10000000" android:width="1dp" />
            <corners android:radius="6dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#15000000" android:width="1dp" />
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#20000000" android:width="1dp" />
            <corners android:radius="4dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#25000000" android:width="1dp" />
            <corners android:radius="3dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#30000000" android:width="1dp" />
            <corners android:radius="3dp" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="#FFF" />
            <corners android:radius="3dp" />
        </shape>
    </item>
</layer-list>

ภาพหน้าจอของการแสดงเงา สุดท้ายนี้ผมอยากจะชี้ให้เห็นสำหรับคนที่ต้องการเงาในทิศทางที่เฉพาะเจาะจงสิ่งที่คุณต้องทำคือตั้งค่าด้านบนล่างซ้ายหรือขวาเป็น 0dp (สำหรับเส้นทึบ) หรือ -1dp (ไม่ต้องทำอะไรเลย)

— ฟรองซัวส์เดอร์มู
แหล่งที่มา
2

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

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

        <solid android:color="@android:color/white" >
        </solid>

        <stroke
            android:width="1dp"
            android:color="@color/LightGrey" >
        </stroke>

        <padding
            android:bottom="5dp"
            android:left="2dp"
            android:right="2dp"
            android:top="5dp" >
        </padding>

        <corners
            android:bottomLeftRadius="20dp"
            android:bottomRightRadius="20dp"
            android:radius="12dp"
            android:topLeftRadius="20dp"
            android:topRightRadius="20dp" />

        <gradient
            android:angle="90"
            android:centerColor="@android:color/white"
            android:centerY="0.2"
            android:endColor="#99e0e0e0"
            android:startColor="@android:color/white"
            android:type="linear" />

    </shape>
— NBApps
แหล่งที่มา
1

คำถามนี้อาจจะเก่า แต่สำหรับใครก็ตามในอนาคตที่ต้องการวิธีง่ายๆในการบรรลุเอฟเฟกต์เงาที่ซับซ้อนลองดูห้องสมุดของฉันที่นี่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

9 แพทช์เพื่อช่วยเหลือเงาที่สวยงามสามารถทำได้อย่างง่ายดายโดยเฉพาะอย่างยิ่งกับเครื่องมือที่ยอดเยี่ยมนี้ -

โปรแกรมสร้างเงา Android 9 แพทช์

PS: หากโปรเจ็กต์ไม่สามารถคอมไพล์ได้คุณจะต้องย้ายเส้นสีดำในโปรแกรมแก้ไขสตูดิโอของ Android เล็กน้อย

— Penzzz
แหล่งที่มา
0

หากคุณต้องการเงาเส้นตรง (เช่นที่ด้านล่างของแถบเครื่องมือ) คุณยังสามารถใช้ xml ไล่ระดับสี:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="linear"
        android:angle="-90"
        android:startColor="#19000000" <!-- black transparent -->
        android:endColor="#00000000" /> <!-- full transparent -->
</shape>

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

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