शैडो और क्लिप व्यू बनाएं

Compose को आज़माएं

Jetpack Compose, Android के लिए यूज़र इंटरफ़ेस (यूआई) का सुझाया गया टूलकिट है. Compose में थीमिंग के साथ काम करने का तरीका जानें.

Modifier.shadow() →

मटीरियल डिज़ाइन में, यूज़र इंटरफ़ेस (यूआई) के एलिमेंट के लिए एलिवेशन की सुविधा दी गई है. एलिवेशन की मदद से, उपयोगकर्ताओं को हर एलिमेंट की अहमियत के बारे में पता चलता है. साथ ही, वे मौजूदा टास्क पर अपना ध्यान फ़ोकस कर पाते हैं.

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

एलिवेटेड व्यू की शैडो, उसके पैरंट से बनती हैं. ये शैडो, व्यू क्लिपिंग के स्टैंडर्ड के हिसाब से बनती हैं. साथ ही, डिफ़ॉल्ट रूप से इन्हें पैरंट से क्लिप किया जाता है.

एलिवेशन, ऐनिमेशन बनाने में भी काम आता है. इनमें, विजेट किसी कार्रवाई के दौरान, कुछ समय के लिए व्यू प्लेन से ऊपर उठते हैं.

ज़्यादा जानकारी के लिए, मटीरियल डिज़ाइन में एलिवेशन देखें.

अपने व्यू को एलिवेशन असाइन करना

किसी व्यू की Z वैल्यू के दो कॉम्पोनेंट होते हैं:

• एलिवेशन: स्टैटिक कॉम्पोनेंट
• ट्रांसलेशन: ऐनिमेशन के लिए इस्तेमाल किया जाने वाला डाइनैमिक कॉम्पोनेंट

Z = elevation + translationZ

Z वैल्यू को डीपी (डेंसिटी-इंडिपेंडेंट पिक्सल) में मापा जाता है.

किसी व्यू का डिफ़ॉल्ट (रेस्टिंग) एलिवेशन सेट करने के लिए, XML लेआउट में android:elevation एट्रिब्यूट का इस्तेमाल करें. किसी गतिविधि के कोड में किसी व्यू का एलिवेशन सेट करने के लिए, View.setElevation() तरीके का इस्तेमाल करें.

किसी व्यू का ट्रांसलेशन सेट करने के लिए, View.setTranslationZ() तरीके का इस्तेमाल करें.

ViewPropertyAnimator.z() और ViewPropertyAnimator.translationZ() तरीकों से, व्यू के एलिवेशन को ऐनिमेट किया जा सकता है. ज़्यादा जानकारी के लिए, का एपीआई रेफ़रंस ViewPropertyAnimator और प्रॉपर्टी ऐनिमेशन के लिए डेवलपर गाइड देखें.

इन ऐनिमेशन को डिक्लेरेटिव तरीके से बताने के लिए, StateListAnimator का इस्तेमाल भी किया जा सकता है. यह खास तौर पर उन मामलों में काम आता है जहां स्टेट में बदलाव होने पर ऐनिमेशन ट्रिगर होते हैं. जैसे, जब उपयोगकर्ता किसी बटन पर टैप करता है. ज़्यादा जानकारी के लिए, StateListAnimator का इस्तेमाल करके व्यू की स्टेट में होने वाले बदलावों को ऐनिमेट करना लेख पढ़ें.

व्यू की शैडो और आउटलाइन को पसंद के मुताबिक बनाना

किसी व्यू के बैकग्राउंड ड्रॉएबल की बाउंड्री से, उसकी शैडो का डिफ़ॉल्ट आकार तय होता है. आउटलाइन, ग्राफ़िक्स ऑब्जेक्ट के बाहरी आकार को दिखाती हैं. साथ ही, ये टच फ़ीडबैक के लिए रिपल एरिया तय करती हैं.

यह व्यू देखें, जिसे बैकग्राउंड ड्रॉएबल के साथ तय किया गया है:

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

बैकग्राउंड ड्रॉएबल को गोल कोनों वाले आयत के तौर पर तय किया गया है:

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

व्यू की शैडो के कोने गोल हैं, क्योंकि बैकग्राउंड ड्रॉएबल, व्यू की आउटलाइन तय करता है. कस्टम आउटलाइन देने से, व्यू की शैडो का डिफ़ॉल्ट आकार बदल जाता है.

अपने कोड में किसी व्यू के लिए कस्टम आउटलाइन तय करने के लिए, यह तरीका अपनाएं:

1. क्लास को बढ़ाएं.ViewOutlineProvider
2. getOutline() तरीके को बदलें.
3. View.setOutlineProvider() तरीके से, अपने व्यू को नया आउटलाइन प्रोवाइडर असाइन करें.

Outline क्लास में मौजूद तरीकों का इस्तेमाल करके, गोल कोनों वाली अंडाकार और आयताकार आउटलाइन बनाई जा सकती हैं. व्यू के लिए डिफ़ॉल्ट आउटलाइन प्रोवाइडर, व्यू के बैकग्राउंड से आउटलाइन हासिल करता है. किसी व्यू को शैडो बनाने से रोकने के लिए, उसके आउटलाइन प्रोवाइडर को null पर सेट करें.

व्यू क्लिप करना

व्यू क्लिप करने से, किसी व्यू का आकार बदला जा सकता है. अन्य डिज़ाइन एलिमेंट के साथ एक जैसा आकार बनाए रखने के लिए या उपयोगकर्ता के इनपुट के हिसाब से किसी व्यू का आकार बदलने के लिए, व्यू क्लिप किए जा सकते हैं. View.setClipToOutline() तरीके का इस्तेमाल करके, किसी व्यू को उसके आउटलाइन एरिया में क्लिप किया जा सकता है. Outline.canClip() तरीके से यह तय होता है कि सिर्फ़ आयत, सर्कल, और गोल कोनों वाले आयत की आउटलाइन को क्लिप किया जा सकता है.

किसी ड्रॉएबल के आकार में व्यू को क्लिप करने के लिए, ड्रॉएबल को व्यू के बैकग्राउंड के तौर पर सेट करें. जैसा कि ऊपर दिए गए उदाहरण में दिखाया गया है. इसके बाद, View.setClipToOutline() तरीके को कॉल करें.

व्यू क्लिप करना एक मुश्किल प्रोसेस है. इसलिए, किसी व्यू को क्लिप करने के लिए इस्तेमाल किए जाने वाले आकार को ऐनिमेट न करें. यह इफ़ेक्ट पाने के लिए, रीवील ऐनिमेशन का इस्तेमाल करें.