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

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

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

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

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

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

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

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

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

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

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

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

ऊंचाई की परछाई और कार्ड

X और Y प्रॉपर्टी के अलावा, Android के व्यू में एक Z प्रॉपर्टी होती है. यह प्रॉपर्टी किसी व्यू की ऊंचाई दिखाती है, जिससे नीचे दी गई चीज़ें तय होती हैं:

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

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

अन्य दृश्यों में ऊंचाई जोड़ने के बारे में जानकारी के लिए, देखें फ़ोटो के गहरे हिस्सों को हल्का करना और क्लिप व्यू तय करना.

ऐनिमेशन

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

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

इन एपीआई की मदद से:

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

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

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

ड्रॉएबल

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

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