अपने कॉन्टेंट के लिए, स्ट्रक्चर और कंटेनमेंट के तरीकों का इस्तेमाल करके, एक फ़्लेक्सिबल फ़्लो और रिदम बनाएं.
1. बुनियादी स्ट्रक्चर
एक जैसा स्ट्रक्चर बनाने के लिए, अपने लेआउट में मार्जिन और कॉलम जोड़ें.
मार्जिन से, स्क्रीन और कॉन्टेंट के बाएं और दाएं किनारों पर जगह मिलती है. कॉम्पैक्ट साइज़ के लिए मार्जिन की स्टैंडर्ड वैल्यू 16 डीपी है. हालांकि, बड़ी स्क्रीन के हिसाब से मार्जिन में बदलाव होना चाहिए. आपके ऐप्लिकेशन का मुख्य कॉन्टेंट और ऐक्शन, इन मार्जिन के अंदर होने चाहिए और इनके साथ अलाइन होने चाहिए.
इस चरण में, यह भी पक्का किया जा सकता है कि सेफ़ ज़ोन या इनसेट सही जगह पर हैं. सिस्टम बार इनसेट की मदद से, ज़रूरी कार्रवाइयों को सिस्टम बार के नीचे आने से रोका जा सकता है. ज़्यादा जानकारी के लिए, सिस्टम बार के पीछे अपना कॉन्टेंट बनाएं लेख पढ़ें.
एक जैसा अलाइनमेंट बनाए रखने के लिए, फ़्लेक्सिबल ग्रिड स्ट्रक्चर बनाने के लिए कॉलम का इस्तेमाल करें. साथ ही, बॉडी एरिया में कॉन्टेंट को बांटकर लेआउट को वर्टिकल डेफ़िनिशन दें. कॉन्टेंट को स्क्रीन के उन हिस्सों में रखा जाता है जिनमें कॉलम होते हैं. इन कॉलम की मदद से, लेआउट को स्ट्रक्चर दिया जाता है. साथ ही, एलिमेंट को व्यवस्थित करने के लिए सुविधाजनक स्ट्रक्चर मिलता है.
कॉन्टेंट को नीचे मौजूद ग्रिड के साथ अलाइन करने के लिए, कॉलम ग्रिड का इस्तेमाल करें. हालांकि, इससे साइज़ में बदलाव करने की सुविधा बनी रहती है. कॉलम ग्रिड में अलग-अलग फ़ॉर्म फ़ैक्टर को शामिल किया जा सकता है. इसके लिए, कॉलम के साइज़ और कॉलम की संख्या को स्क्रीन के साइज़ के हिसाब से बदला जाता है. साथ ही, कॉन्टेंट को भी स्केल किया जाता है. कॉलम ग्रिड को बहुत ज़्यादा बारीक न बनाएं. बेसलाइन ग्रिड का इस्तेमाल इसलिए किया जाता है, ताकि स्पेसिंग यूनिट एक जैसी हों.
साथ में पंक्तियों की ग्रिड बनाते समय सावधानी बरतें, क्योंकि इससे अलग-अलग ओरिएंटेशन और फ़ॉर्म फ़ैक्टर में हॉरिज़ॉन्टल कॉन्टेंट को स्केल करने पर पाबंदी लग सकती है. आम तौर पर, पैडिंग के नियम तय करने से, ज़रूरी विज़ुअल कंसिस्टेंसी मिलती है.
लेआउट स्ट्रक्चर में कॉपी जोड़ना शुरू करें. मार्जिन, कॉन्टेंट को स्क्रीन के किनारों से सुरक्षित रखते हैं. कॉलम की मदद से, स्पेस और अलाइनमेंट का एक जैसा स्ट्रक्चर मिलता है.
2. कॉन्टेंट को शामिल करने की सुविधा लागू करना
एलिमेंट को विज़ुअली ग्रुप करने के लिए, कंटेनमेंट का इस्तेमाल करें.
कंटेनमेंट का मतलब, विज़ुअल ग्रुपिंग बनाने के लिए, खाली जगह और दिखने वाले एलिमेंट का एक साथ इस्तेमाल करना है. कंटेनर एक ऐसी शेप होती है जो किसी बंद जगह को दिखाती है. एक लेआउट में, मिलते-जुलते कॉन्टेंट या फ़ंक्शन वाले एलिमेंट को एक साथ ग्रुप किया जा सकता है. साथ ही, उन्हें ओपन स्पेस, टाइपोग्राफ़ी, और डिवाइडर का इस्तेमाल करके अन्य एलिमेंट से अलग किया जा सकता है.
मिलते-जुलते आइटम को एक साथ ग्रुप किया जा सकता है. इसके लिए, उनके बीच में खाली जगह छोड़ें या उन्हें अलग-अलग सेक्शन में दिखाएं, ताकि उपयोगकर्ता को कॉन्टेंट समझने में आसानी हो.
इंप्लिसिट कंटेनमेंट में, कॉन्टेंट को विज़ुअली ग्रुप करने के लिए खाली जगह का इस्तेमाल किया जाता है, ताकि कंटेनर की सीमाएं बनाई जा सकें. वहीं, एक्सप्लिसिट कंटेनमेंट में, कॉन्टेंट को एक साथ ग्रुप करने के लिए डिवाइडर लाइन और कार्ड जैसे ऑब्जेक्ट का इस्तेमाल किया जाता है.
इस इमेज में, हेडर और प्राइमरी कॉपी को शामिल करने के लिए, इंप्लिसिट कंटेनमेंट का इस्तेमाल करने का उदाहरण दिखाया गया है. कॉलम ग्रिड का इस्तेमाल, अलाइन करने और ग्रुप बनाने के लिए किया जाता है. हाइलाइट, कार्ड में साफ़ तौर पर शामिल होती हैं. ज़्यादा विज़ुअल सेपरेशन के लिए, आइकॉनोग्राफ़ी और टाइप हैरारकी का इस्तेमाल करना.
3. कॉन्टेंट की पोज़िशन
Android में, कॉन्टेंट एलिमेंट को उनके कंटेनर में मैनेज करने के कई तरीके हैं. इनसे उन्हें सही जगह पर रखने में मदद मिलती है. इनमें ग्रेविटी, स्पेसिंग, और स्केलिंग शामिल हैं.
ग्रैविटी, किसी ऑब्जेक्ट को बड़े कंटेनर में रखने का एक स्टैंडर्ड है. इसका इस्तेमाल खास मामलों में किया जाता है. इस इमेज में, ऑब्जेक्ट को अलग-अलग जगहों पर रखने के उदाहरण दिखाए गए हैं. जैसे, ऑब्जेक्ट को शुरुआत में और बीच में रखना (1), ऊपर और बीच में हॉरिज़ॉन्टल तौर पर रखना (2), नीचे बाईं ओर रखना (3), और आखिर में और दाईं ओर रखना (1).
4. बड़े पैमाने पर कॉन्टेंट तैयार करना
डाइनैमिक कॉन्टेंट, डिवाइस के ओरिएंटेशन, और स्क्रीन के साइज़ के हिसाब से इमेज को अडजस्ट करने के लिए, इमेज को स्केल करना ज़रूरी है. एलिमेंट को फ़िक्स्ड रखा जा सकता है या उनका साइज़ बदला जा सकता है.
यह ध्यान रखना ज़रूरी है कि इमेज को उसके कंटेनर में किस तरह से दिखाया गया है. साथ ही, यह भी ध्यान रखना ज़रूरी है कि इमेज को स्केल और पोज़िशन कैसे किया गया है. इससे यह पक्का किया जा सकता है कि इमेज, डिवाइस के कॉन्टेक्स्ट के बावजूद आपकी पसंद के मुताबिक दिखे. ऐसा न करने पर, इमेज का मुख्य हिस्सा कट सकता है, इमेज लेआउट के हिसाब से बहुत छोटी या बड़ी हो सकती हैं या अन्य अवांछित इफ़ेक्ट दिख सकते हैं.
जिस कॉन्टेंट में नोटेशन नहीं जोड़ा गया है वह आपकी उम्मीद या पसंद के मुताबिक नहीं दिख सकता.
पिन किया गया कॉन्टेंट
कई एलिमेंट में इंटरैक्शन, स्क्रोलिंग, और स्लॉट या स्कैफ़ोल्ड के साथ पोज़िशनिंग की सुविधा पहले से मौजूद होती है. कुछ एलिमेंट में बदलाव किया जा सकता है, ताकि वे स्क्रोल करने पर अपनी जगह पर बने रहें. जैसे, फ़्लोटिंग ऐक्शन बटन (एफ़एबी), जिनमें ज़रूरी कार्रवाइयां होती हैं.
अलाइनमेंट
AlignmentLine का इस्तेमाल करके, अलाइनमेंट की कस्टम लाइनें बनाएं. पैरंट लेआउट इनका इस्तेमाल करके, अपने चाइल्ड व्यू को अलाइन और पोज़िशन कर सकते हैं.
यह करें
यह न करें
कॉम्पोनेंट का लेआउट
Material 3 कॉम्पोनेंट, इंटरैक्शन और कॉन्टेंट के लिए अपने कॉन्फ़िगरेशन और स्थितियां उपलब्ध कराते हैं.
Compose, Material Components को सामान्य स्क्रीन पैटर्न में जोड़ने के लिए आसान लेआउट उपलब्ध कराता है. Scaffold जैसे कंपोज़ेबल, अलग-अलग कॉम्पोनेंट और स्क्रीन एलिमेंट के लिए स्लॉट उपलब्ध कराते हैं. Material कॉम्पोनेंट और लेआउट के बारे में ज़्यादा जानें.