इमेज और ग्राफ़िक

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

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

इमेज और ग्राफ़िक बनाते समय, इन बातों का ध्यान रखें:

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

Android के लिए ऐसेट एक्सपोर्ट करने का तरीका

• ऐसेट के नामों को छोटे अक्षरों में फ़ॉर्मैट करें.
• आसान ऐसेट को SVG के तौर पर एक्सपोर्ट करने के लिए सेट करें.
• फ़ोटो जैसी जटिल इमेज को WebP, PNG, JPG के तौर पर एक्सपोर्ट करने के लिए सेट करें.
• नीचे दी गई टेबल में दिखाए गए तरीके से, रिज़ॉल्यूशन को सही तरीके से स्केल करें.

स्क्रीन का साइज़	स्केल
mdpi	x1
hdpi	x1.5
xhdpi	x2
xxhdpi	x3
xxxhdpi	x4

इसके अलावा, Android Studio का इस्तेमाल करके SVG को वेक्टर ड्रॉएबल (VD) में बदला जा सकता है. ऐसेट को रिज़ॉल्यूशन के हिसाब से डायरेक्ट्री में व्यवस्थित करें, ताकि उन्हें हैंडऑफ़ किया जा सके. इसके लिए, यहां दी गई इमेज देखें. उदाहरण के लिए, फ़ोल्डर के नामों में स्क्रीन का साइज़ शामिल करें.

एसेट टाइप

Android में इन ऐसेट टाइप का इस्तेमाल किया जा सकता है.

वेक्टर

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

वेक्टर फ़ॉर्मैट

Android, इन वेक्टर इमेज फ़ॉर्मैट के साथ काम करता है: SVG और वेक्टर ड्रॉएबल.

वेक्टर ड्रॉएबल, एसवीजी की तरह दिखते हैं, लेकिन ये एक्सएमएल पर आधारित होते हैं. ये कई एट्रिब्यूट के साथ भी काम करते हैं, जैसे कि ग्रेडिएंट. कौनसी सुविधाएं काम करती हैं, इस बारे में ज़्यादा जानने के लिए, VectorDrawable देखें. Vector Asset Studio की मदद से, SVG को वेक्टर ड्रॉएबल में बदला जा सकता है.

इस्तेमाल के उदाहरण

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

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

रास्टर

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

रास्टर फ़ॉर्मैट

Android में, इन रास्टर इमेज फ़ॉर्मैट का इस्तेमाल किया जा सकता है: PNG, GIF, JPG, WebP.

इस्तेमाल के उदाहरण

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

साइज़ बदलना

ऐसेट बनाते समय, इन बातों का ध्यान रखें.

रिज़ॉल्यूशन बकेट

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

पैडिंग

आइकॉन और इसी तरह की छोटी ऐसेट में, इनट्रिंसिक (पहले से मौजूद) पैडिंग शामिल होनी चाहिए. इससे ऐसेट को टच टारगेट के लिए ज़रूरी जगह मिलती है और यह पक्का होता है कि उसका साइज़ एक जैसा हो.

फ़ाइलों के नाम

Android ऐसेट, छोटे अक्षरों में होती हैं और इनमें रिज़ॉल्यूशन का सफ़िक्स शामिल नहीं होता.

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

अन्य ऐप्लिकेशन ऐसेट

ऐप्लिकेशन के आइकॉन

लॉन्चर आइकॉन, होमस्क्रीन पर दिखते हैं. सिस्टम यूआई में मोनोक्रोम आइकॉन ढूंढें. इनमें मोनोक्रोम सूचनाएं, स्टेटस बार, और विजेट शामिल हैं.

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

स्प्लैश स्क्रीन

Android 12 से, आपका ऐप्लिकेशन ऐनिमेटेड स्प्लैश स्क्रीन दिखा सकता है. इसमें ऐप्लिकेशन का आइकॉन दिखता है. यह स्क्रीन तब दिखती है, जब आपका ऐप्लिकेशन खुल रहा होता है.

प्लेसमेंट

ध्यान दें कि स्क्रीन पर इमेज को कैसे स्केल और पोज़िशन किया जाना चाहिए. इमेज पर स्केलिंग सेट करने के लिए, फ़िट करें, काटें, FillHeight, FillWidth, FillBounds, Inside, और कोई नहीं विकल्प उपलब्ध हैं.

इमेज को किसी शेप में क्लिप करके, अतिरिक्त इफ़ेक्ट भी बनाए जा सकते हैं.

रिस्पॉन्सिव क्रॉपिंग

इमेज को रिस्पॉन्सिव तरीके से दिखाने के लिए, यह तय करें कि अलग-अलग ब्रेकपॉइंट रेंज पर इमेज कैसे काटी जाएगी. अलग-अलग ब्रेकपॉइंट रेंज पर इमेज को इस तरह काटा जा सकता है:

• एक तय अनुपात बनाए रखें.
• अलग-अलग रेशियो के हिसाब से अडजस्ट हो जाता है.
• इमेज की ऊंचाई को एक जैसा बनाए रखें.

एक ही रेशियो बनाए रखें

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

अलग-अलग रेशियो के हिसाब से अडजस्ट होना

अलग-अलग ब्रेकपॉइंट रेंज के हिसाब से, इमेज के रेशियो में बदलाव हो सकता है. उदाहरण के लिए, इमेज में दिए गए फ़िगर 9 में, ब्रेकपॉइंट के बीच इमेज का रेशियो 1:1 से बदलकर 16:9 हो जाता है.

इमेज की तय ऊंचाई

इमेज का साइज़, ब्रेकपॉइंट रेंज में और उसके अंदर, एक तय ऊंचाई और फ़्लूड चौड़ाई के हिसाब से अडजस्ट हो सकता है. इमेज की ऊंचाई तय होती है, जबकि ब्रेकपॉइंट के बीच चौड़ाई बदलती रहती है.

इफ़ेक्ट

Android में, इमेज के लिए पहले से मौजूद कई इफ़ेक्ट शामिल होते हैं. यहां कुछ सामान्य असर दिए गए हैं:

ग्रेडिएंट

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

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

धुंधला

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

ब्लेंड मोड

Android, इमेज में बदलाव करने के लिए, डिज़ाइन सॉफ़्टवेयर में मौजूद यूनियन या मल्टिप्लाई जैसे मिलते-जुलते बूलियन ऑपरेशन और ब्लेंड मोड का इस्तेमाल कर सकता है. ज़्यादा जानकारी के लिए, BlendMode देखें.

रंगत

ऐसेट को रंग देने के लिए, ब्लेंड मोड और फ़िल का इस्तेमाल करें. इसकी मदद से, एक ही ऐसेट का इस्तेमाल किया जा सकता है और उसमें अलग-अलग रंग जोड़े जा सकते हैं. इससे, बनाई गई ऐसेट की संख्या कम हो सकती है.

मोशन

मोशन फ़ाइलें अपलोड करने के बजाय, मोशन ग्राफ़िक बनाने के लिए ग्राफ़िक को प्रोग्राम के हिसाब से ऐनिमेट किया जा सकता है. इससे, ऐसेट के छोटे-छोटे संसाधन इस्तेमाल करने और ज़्यादा फ़्लेक्सिबिलिटी पाने में मदद मिल सकती है.

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