कॉन्टेंट का कॉम्पोज़िशन और स्ट्रक्चर

अपने कॉन्टेंट के लिए, स्ट्रक्चर और कंटेनमेंट के तरीकों का इस्तेमाल करके, फ़्लो और रिदम को बेहतर बनाएं. सबसे पहले लेआउट कंटेनर डिज़ाइन करें. इसके बाद, कॉन्टेंट जोड़ें.

1. बेसिक स्ट्रक्चर: कॉन्टेंट को गाइड करने के लिए लेआउट ग्रिड

एक जैसा स्ट्रक्चर बनाने के लिए, अपने लेआउट में मार्जिन और कॉलम जोड़ें.

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

इस चरण में, यह भी पक्का किया जा सकता है कि सेफ़ ज़ोन या इनसेट सही जगह पर हैं. सिस्टम बार इंसर्ट की मदद से, ज़रूरी कार्रवाइयों को सिस्टम बार के नीचे आने से रोका जा सकता है. आपको सिस्टम बार के पीछे अपना कॉन्टेंट बनाना चाहिए.

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

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

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

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

लेआउट ग्रिड, साइज़ और फ़ॉर्म फ़ैक्टर के हिसाब से अडैप्ट होनी चाहिए.

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

इसके अलावा, जानकारी वाली स्क्रीन को व्यवस्थित रखने के लिए, क्रम के हिसाब से लेआउट ग्रिड का इस्तेमाल करें.

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

पेजर और फ़्लो लेआउट जैसे लेआउट कंटेनर के बारे में ज़्यादा जानें.

मैनुस्क्रिप्ट और मेसनरी, लेआउट ग्रिड के अन्य टाइप हैं.

चुनी गई लेआउट ग्रिड, अडैप्टिव लेआउट के लिए कॉन्टेंट को ग्रुप करने के लिए, पैन के कंटेनमेंट कॉन्सेप्ट का भी इस्तेमाल कर सकती है. उदाहरण के लिए, यहां इस्तेमाल किया गया उदाहरण, जानकारी वाली स्क्रीन का है. यह एक ऐसा पैन है जिसे सूची-जानकारी वाले लेआउट में दिखाया जा सकता है.

2. कॉन्टेंट को शामिल करने की सुविधा लागू करना

एलिमेंट को विज़ुअल तौर पर ग्रुप करने के लिए, कंटेनमेंट का इस्तेमाल करें.

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

Android, बिल्डिंग ब्लॉक के तौर पर लाइनों, कॉलम, और बॉक्स का इस्तेमाल करता है. इसलिए, इसी तरह से कंटेनमेंट को डिज़ाइन किया जा सकता है. एक जैसे आइटम को एक साथ ग्रुप करें. इसके लिए, आइटम के बीच में खाली जगह छोड़ें या उन्हें अलग-अलग हिस्सों में बांटें, ताकि आपको कॉन्टेंट समझने में आसानी हो.

इंप्लिसिट कंटेनमेंट में, कॉन्टेंट को विज़ुअल तौर पर ग्रुप करने के लिए व्हाइटस्पेस का इस्तेमाल किया जाता है, ताकि कंटेनर की सीमाएं बनाई जा सकें. वहीं, एक्सप्लिसिट कंटेनमेंट में, कॉन्टेंट को एक साथ ग्रुप करने के लिए डिवाइडर लाइन और कार्ड जैसे ऑब्जेक्ट का इस्तेमाल किया जाता है.

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

3. कॉन्टेंट की पोज़िशन

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

देखें कि आपका कॉन्टेंट एक डाइमेंशन वाला है या दो डाइमेंशन वाला. उदाहरण के लिए, कॉन्टेंट को हॉरिज़ॉन्टल, वर्टिकल या दोनों दिशाओं में दिखाया जा सकता है.

नीचे दिए गए डायग्राम में दिखाया गया है कि पुष्टि करने के लिए, दो डाइमेंशन वाले ग्रिड लेआउट का इस्तेमाल किया जा सकता है.

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

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

लेज़ी रो और लेज़ी कॉलम की मदद से, स्क्रोल करने वाली लाइनों या कॉलम में कॉन्टेंट दिखाया जा सकता है.

अलाइनमेंट

ऑटो लेआउट फ़्लो और अलाइनमेंट की तरह ही, यूआई एलिमेंट के अरेंजमेंट और अलाइनमेंट के बारे में बताया जा सकता है.

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

4. कॉन्टेंट को स्केल और क्रॉप करना

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

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

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

उदाहरण के लिए, फ़ुल-विड्थ वाली हीरो इमेज, लैंडस्केप ओरिएंटेशन में फ़ोन की पूरी स्क्रीन पर दिखती है.

अगर कॉन्टेंट का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) बनाए रखना ज़रूरी है, जैसे कि सिर्फ़ वर्टिकल वीडियो, तो आसपेक्ट रेशियो को सीमित करें और खाली जगह को बैलेंस करें.

पिन किया गया कॉन्टेंट

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

मैसेजिंग और पुष्टि करने जैसे टेक्स्ट इनपुट के लिए, इनपुट को कीबोर्ड से अटैच किया जाता है और सिर्फ़ इस पर फ़ोकस किया जाता है.

लेआउट में मौजूद कॉम्पोनेंट

Material 3 कॉम्पोनेंट, इंटरैक्शन और कॉन्टेंट के लिए अपने कॉन्फ़िगरेशन और स्थितियां उपलब्ध कराते हैं.

Compose, मटीरियल कॉम्पोनेंट को सामान्य स्क्रीन पैटर्न में जोड़ने के लिए, सुविधाजनक लेआउट उपलब्ध कराता है. Scaffold जैसे कंपोज़ेबल, अलग-अलग कॉम्पोनेंट और स्क्रीन एलिमेंट के लिए स्लॉट उपलब्ध कराते हैं. मटेरियल कॉम्पोनेंट और लेआउट के बारे में ज़्यादा पढ़ें.