Android दृश्य छाया

Question

मैंने चारों ओर खोज की, और मुझे ऐसा करने का उचित तरीका नहीं मिला। मैं अपने विचारों पर निम्नलिखित छाया प्रभाव डालना चाहता हूं:

सच कहूं, तो मुझे नहीं पता कि यह दूसरा प्रभाव छाया प्रभाव को लागू करने के द्वारा किया जाता है। कोई विचार?

Comments

आपका मतलब इससे है? stackoverflow.com/questions/4406524/… (उच्चतम मत की जाँच करें, चिह्नित उत्तर नहीं)

— ल्यूक Vo

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

— शैड्स जोड़ना

इसी तरह के सवाल - stackoverflow.com/q/52954743/9640177 - वेक्टर drawable में छाया जोड़ना

— mayank1513

Answer 1

मुझे पता है कि इस सवाल का जवाब पहले ही दिया जा चुका है, लेकिन मैं चाहता हूं कि आप यह जान लें कि मैं उस 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-पैच ड्रा करें

संपादित करें २

सीमाओं को ओवरलैप करने के लिए विचारों को रोकने के लिए 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'

Comments

धन्यवाद, वास्तव में, यह बहुत समान दिखता है। मुझे एंड्रॉइड के लिए "Google कार्ड लेआउट" भी मिला, और वे बहुत अच्छे हैं!

— लॉन्गवल्कर

बहुत बढ़िया। भविष्य के दर्शकों के लिए बस एक FYI करें, यह अंदर है /<sdk-path>/extras/android/support।

— theblang

क्या एक का उपयोग कर के बारे मेंcardView

— एलेक्स Chengalan

Answer 2

मैं एंड्रॉइड स्टूडियो 0.8.6 का उपयोग कर रहा हूं और मुझे नहीं मिला:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

इसलिए मैंने इसके बजाय यह पाया:

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

और यह इस तरह दिखता है:

Comments

लेकिन हम इसके साथ कोने त्रिज्या नहीं जोड़ सकते हैं ?!

— Fay007

Answer 3

की पृष्ठभूमि डाल रहा है @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>

कहने के तहत इसे ड्रा करने योग्य फ़ोल्डर में सहेजें shadow.xml

इसे देखने के लिए असाइन करने के लिए, xml लेआउट फ़ाइल में इसकी पृष्ठभूमि सेट करें

android:background="@drawable/shadow"

Comments

क्या आपने जाँच की कि क्या यह काम करता है? दूसरा <आइटम> कुछ भी नहीं करता है। मैं इसे पारदर्शी या गोल कोनों में नहीं बदल सकता।

— जीशान

मैंने जो कुछ भी आजमाया है, उसमें यही काम आता है, धन्यवाद।

— श्याम सुंदर

शानदार समाधान

— user1974368

Answer 4

निम्नलिखित कोड के साथ Res / drawable फ़ोल्डर में card_background.xml बनाएं:

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

Comments

यह वास्तव में एक छाया नहीं है - क्योंकि यह फीका नहीं पड़ता है। यह दो तरफ की सीमा जैसा है।

— प्रतिबंध-जियोइंजीनियरिंग

इसकी छाया नहीं

— ShadeToD

Answer 5

CardView आपको Android 5+ में असली छाया देता है और इसमें एक समर्थन पुस्तकालय है। बस इसके साथ अपने विचार लपेटें और आपका काम हो गया।

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

इसके लिए अगली निर्भरता की आवश्यकता होती है।

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

Comments

यह एकमात्र सही उत्तर है, क्योंकि केवल CardViewकम्प्रेसर मोड में अलग-अलग ऊंचाई के लिए अलग-अलग छाया स्तर भी होते हैं।

— जरीट मिलार्ड

मैं MaterialCardView की सिफारिश करता हूं क्योंकि यह स्पष्ट है और इसमें अधिक क्षमताएं हैं।

— एच। फरीद

Answer 6

एक छाया प्रभाव को प्राप्त करने के लिए उन्नयन संपत्ति का उपयोग करें:

<View ...
    android:elevation="2dp"/>

यह केवल पिछले v21 का उपयोग किया जाना है, इस लिंक को देखें: http://developer.android.com/training/material/shadows-clipping.html

Answer 7

यह देर हो सकती है लेकिन उन लोगों के लिए जो अभी भी इसका जवाब तलाश रहे हैं, मुझे गिट हब पर एक परियोजना मिली और यह एकमात्र ऐसा है जो वास्तव में मेरी आवश्यकताओं के अनुरूप है। android-materialshadowninepatch

बस इस लाइन को अपने build.gradle निर्भरता पर जोड़ें

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

खुश होती है। निर्माता के लिए अंगूठे! happycodings

Comments

अरे @ralphgabb, क्या यह अभी भी आपके लिए अच्छा है या आपके पास प्री लॉलीपॉप डिवाइस के लिए बेहतर समाधान है?

— स्वप्निल

@Swapnil सुनिश्चित नहीं है कि AndroidX अब इसका समर्थन करता है, मैं अब प्री-मार्शमैलो उपकरणों का समर्थन नहीं कर रहा हूं।

— राल्फगैब

Answer 8

मुझे पता है कि यह मूर्खतापूर्ण हैकिंग है,
लेकिन अगर आप 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 से ऊपर (वास्तविक ऊंचाई प्रतिपादन)

• एक महत्वपूर्ण अंतर यह है कि यह दृश्य से आंतरिक स्थान पर कब्जा कर लेगा ताकि आपका वास्तविक सामग्री क्षेत्र > = लॉलीपॉप उपकरणों से छोटा हो सके ।

Answer 9

यदि आपको ठीक से लागू होने के लिए छाया की आवश्यकता है तो आपको निम्नलिखित कार्य करने होंगे।

इस दृश्य पर विचार करें, जिसे एक पृष्ठभूमि के साथ परिभाषित किया गया है:

<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

Answer 10

छाया प्रभाव के लिए उन्नयन संपत्ति का उपयोग करें:

<YourView
    ...
    android:elevation="3dp"/>

Comments

एलिवेशन का उपयोग करने के लिए डिवाइस को लॉलीपॉप चलाने की आवश्यकता होती है।

— शेन रोवेट

Answer 11

गोल छाया दिखाने के लिए इस तरह बैकग्राउंड ड्रॉबल बनाएं।

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

Comments

कृपया उस कोड के लिए विवरण जोड़ें जो आपने प्रदान किया है।

— मंगलदीप पन्नू

बहुत अच्छा xml केवल समाधान

— ब्रूनो बीरी

Answer 12

यह प्रश्न पुराना हो सकता है, लेकिन भविष्य में किसी के लिए भी जो जटिल छाया प्रभावों को प्राप्त करने के लिए एक सरल तरीका चाहता है, मेरी लाइब्रेरी की जाँच करें यहाँ 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 = "आपका रंग कोड"।

Answer 13

पृष्ठभूमि के रूप में इस आकृति का उपयोग करें:

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