एंड्रॉइड पर कस्टम आकार में छाया जोड़ें

130

क्या एंड्रॉइड में कस्टम आकार में ड्रॉप छाया जोड़ना संभव है? प्रलेखन देखने के बाद, मुझे केवल एक पाठ छाया लागू करने का एक तरीका दिखाई देता है।

मैंने बिना किसी भाग्य के यह कोशिश की है:

<?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>
— चिराग पटेल
स्रोत
5
आपने कहां कॉन्फ़िगर किया है <!-- Bottom 2dp Shadow -->मुझे 2आपके कोड में कोई दिखाई नहीं देता ... ???
— चोलत्स्की
74

यह मेरा इसे करने का तरीका है:

छाया के साथ Android मूल बटन

एक बटन के लिए कोड bate:

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

आशा है कि यह आपकी मदद कर सकता है .. सौभाग्य

— जोहो माछे
स्रोत
47

यह एक ड्रॉप शैडो का मेरा संस्करण है। मैं आकार के चारों ओर एक धुंधली छाया के लिए जा रहा था और जोकिम लुंडबोर्ग द्वारा इस उत्तर का उपयोग मेरे शुरुआती बिंदु के रूप में किया गया था। मैंने जो परिवर्तन किया है वह सभी छाया वस्तुओं में कोनों को जोड़ने और प्रत्येक बाद की छाया वस्तु के लिए कोने की त्रिज्या बढ़ाने के लिए है। तो यहाँ है :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
स्रोत
वर्किंग फाइन ..
— थैंक्स
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>
— जोकिम लुंडबोर्ग
स्रोत
8

पुराना प्रश्न, लेकिन सामग्री डिजाइन के साथ उपलब्ध ऊंचाई, अब किसी भी दृश्य को एक छाया प्रदान करता है।

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

डॉक्स को https://developer.android.com/training/material/shadows-clipping.html पर देखें

— wainy
स्रोत
क्या होगा अगर आपको कई यूआई विजेट मिले हैं जो बाहरी आकार के चारों ओर एक छाया के साथ जुड़े हुए दिखना चाहिए? मैंने ऊपर वाले को जोड़ने की कोशिश की लेकिन भीतर वाला फिर बाहरी वाले के पीछे छिप गया। इसलिए मैंने दोनों को जोड़ने की कोशिश की, लेकिन फिर ऐसा लगा कि भीतर वाले व्यक्ति के ऊपर एक छाया की तरह एक इंका पिरामिड है।
— माइकल ओस्फोस्की
मैं एक झुलसाना का उपयोग करके फ्यूज़िंग के साथ काम समाप्त हो गया ImageButtonएक के बजाय ImageViewप्लस Button' because it allows a ImageButton` दोनों एक के लिए अनुमति देता है android:backgroundऔर एक android:src। इसलिए मैं android:elevationसिर्फ एक बार निर्दिष्ट करने में सक्षम था और "इंका पिरामिड प्रभाव" से बचने के लिए मैंने अपनी आखिरी टिप्पणी में वर्णित किया।
— माइकल ओसोफ्स्की
8

मैं ब्रूस के समाधान के लिए एक छोटे से सुधार का सुझाव दूंगा जो एक दूसरे के ऊपर एक ही आकार को ओवरड्राइविंग को रोकने और केवल ठोस के बजाय स्ट्रोक का उपयोग करने के लिए है। यह इस तरह दिखेगा:

<?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 (कुछ भी नहीं) के लिए सेट करें

— फ्रेंकोइस डर्मू
स्रोत
7

यदि आपको कैनवस एपीआई के साथ कुछ कस्टम ड्राइंग करने में कोई आपत्ति नहीं है, तो ड्रॉप शैडोज़ के बारे में इस उत्तर को देखें । यहां एक अनुवर्ती प्रश्न है जो मूल में एक समस्या को ठीक करता है।

— जोश
स्रोत
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

मुझे लगता है कि यह ड्रॉप शैडो वैल्यू ज्यादातर मामलों के लिए अच्छा है:

<solid android:color="#20000000" />
— user1238561
स्रोत
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>

छाया रंग बदलने के लिए, एप्लिकेशन का उपयोग करें: shadowColor = "आपका रंग कोड"।

— BluRe.CN
स्रोत
1

बचाव के लिए 9 पैच, विशेष रूप से इस भयानक उपकरण के साथ अच्छी छाया आसानी से प्राप्त की जा सकती है -

एंड्रॉइड 9-पैच छाया जनरेटर

पुनश्च: यदि परियोजना संकलन करने में सक्षम नहीं होगी, तो आपको एंड्रॉइड स्टूडियो एडिटर में काली रेखाओं को थोड़ा स्थानांतरित करने की आवश्यकता होगी

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

आशा है कि यह कुछ मदद करेगा

— सईद अर्यानमनेश
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.