Android के लिए मटीरियल डिज़ाइन

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

मटीरियल डिज़ाइन, सभी प्लैटफ़ॉर्म और डिवाइसों पर विज़ुअल, मोशन, और इंटरैक्शन डिज़ाइन के लिए एक पूरी गाइड है. अपने Android ऐप्लिकेशन में मटीरियल डिज़ाइन का इस्तेमाल करने के लिए, मटीरियल डिज़ाइन के स्पेसिफ़िकेशन में बताए गए दिशा-निर्देशों का पालन करें. अगर आपका ऐप्लिकेशन Jetpack Compose का इस्तेमाल करता है, तो आप Compose Material 3 लाइब्रेरी का इस्तेमाल कर सकते हैं. अगर आपका ऐप्लिकेशन व्यू का इस्तेमाल करता है, तो आप Android Material Components लाइब्रेरी का इस्तेमाल कर सकते हैं.

Android, मटीरियल डिज़ाइन वाले ऐप्लिकेशन बनाने में आपकी मदद करने के लिए, ये सुविधाएं उपलब्ध कराता है:

  • अपने सभी यूज़र इंटरफ़ेस (यूआई) विजेट को स्टाइल करने के लिए, मटीरियल डिज़ाइन वाली ऐप्लिकेशन थीम
  • सूची और कार्ड जैसे जटिल व्यू के लिए विजेट
  • कस्टम शैडो और ऐनिमेशन के लिए एपीआई

मटीरियल थीम और विजेट

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

पहली इमेज. गहरे रंग वाली मटीरियल थीम.
दूसरी इमेज. हल्के रंग वाली मटीरियल थीम.

अगर Android Studio का इस्तेमाल करके, अपना Android प्रोजेक्ट बनाया जाता है, तो यह डिफ़ॉल्ट रूप से मटीरियल थीम लागू करता है. अपने प्रोजेक्ट की थीम को अपडेट करने का तरीका जानने के लिए, स्टाइल और थीम देखें.

अपने उपयोगकर्ताओं को जाना-पहचाना अनुभव देने के लिए, मटीरियल के सबसे आम यूएक्स पैटर्न का इस्तेमाल करें:

जब भी मुमकिन हो, पहले से तय मटीरियल आइकॉन का इस्तेमाल करें. उदाहरण के लिए, अपने नेविगेशन पैनल के "मेन्यू" बटन के लिए, स्टैंडर्ड "हैमबर्गर" आइकॉन का इस्तेमाल करें. उपलब्ध आइकॉन की सूची देखने के लिए, मटीरियल डिज़ाइन आइकॉन देखें. Android Studio के Vector Asset Studio की मदद से, SVG आइकॉन को मटीरियल आइकॉन लाइब्रेरी से इंपोर्ट भी किया जा सकता है.

एलिवेशन शैडो और कार्ड

Android में व्यू में X और Y प्रॉपर्टी के अलावा, Z प्रॉपर्टी भी होती है. यह प्रॉपर्टी, व्यू के एलिवेशन को दिखाती है. इससे यह तय होता है कि:

  • उसकी शैडो का साइज़: ज़्यादा Z वैल्यू वाले व्यू की शैडो बड़ी होती हैं.
  • ड्रॉइंग ऑर्डर: ज़्यादा Z वैल्यू वाले व्यू, अन्य व्यू के ऊपर दिखते हैं.
तीसरी इमेज. Z वैल्यू, एलिवेशन को दिखाती है.

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

अन्य व्यू में एलिवेशन जोड़ने के बारे में जानकारी पाने के लिए, शैडो बनाना और व्यू क्लिप करना देखें.

ऐनिमेशन

चौथी इमेज. टच के लिए वाइब्रेशन का ऐनिमेशन.

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

इन एपीआई की मदद से, ये काम किए जा सकते हैं:

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

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

ज़्यादा जानकारी के लिए, ऐनिमेशन के बारे में जानकारी देखें.

ड्रॉएबल

ड्रॉएबल की इन क्षमताओं की मदद से, मटीरियल डिज़ाइन वाले ऐप्लिकेशन लागू किए जा सकते हैं:

  • वेक्टर ड्रॉएबल को बिना क्वालिटी घटाए स्केल किया जा सकता है. साथ ही, ये ऐप्लिकेशन में मौजूद एक रंग के आइकॉन के लिए सबसे सही होते हैं. वेक्टर ड्रॉएबल के बारे में ज़्यादा जानें .
  • ड्रॉएबल टिंटिंग की मदद से, बिटमैप को अल्फ़ा मास्क के तौर पर तय किया जा सकता है. साथ ही, रनटाइम में उन्हें किसी रंग से टिंट किया जा सकता है. ड्रॉएबल में टिंट जोड़ने का तरीका देखें .
  • रंग में सुधार करने की सुविधा की मदद से, बिटमैप इमेज से मुख्य रंगों को अपने-आप निकाला जा सकता है. Palette API की मदद से रंग चुनने का तरीका देखें .