टैब आइकॉन

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

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

फ़ाइनल आर्ट को पारदर्शी PNG फ़ाइल के तौर पर एक्सपोर्ट करना चाहिए. शामिल न करें बैकग्राउंड का रंग.

Adobe Photoshop में आइकॉन बनाने के लिए टेंप्लेट आइकॉन टेंप्लेट पैक.

चेतावनी: टैब आइकन की शैली पिछले वर्शन की तुलना में Android 2.0. पाने वाला Android के सभी वर्शन के लिए सहायता उपलब्ध कराते हैं, तो डेवलपर को:
1. Android 2.0 और उसके बाद के वर्शन के लिए टैब आइकन drawable-hdpi-v5, drawable-mdpi-v5, और drawable-ldpi-v5 डायरेक्ट्री.
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 2. पिछले वर्शन के लिए टैब आइकॉन को इसमें रखें drawable-hdpi, drawable-mdpi, और drawable-ldpi डायरेक्ट्री.
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है 3. android:targetSdkVersion को 5 या उससे ज़्यादा पर सेट करें. <uses-sdk> के लिए, ऐप्लिकेशन मेनिफ़ेस्ट में जाएं. इससे सिस्टम को पता चलेगा कि उसे नई टैब स्टाइल का इस्तेमाल करके टैब रेंडर करने चाहिए.

दो टैब स्टेट के लिए आइकॉन उपलब्ध कराना

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

उदाहरण के लिए, 'दोस्त' नाम के टैब वाले टैब विजेट के लिए और 'सहकर्मी', आप नीचे दी गई संरचना से मिलती-जुलती डायरेक्ट्री का इस्तेमाल कर सकते हैं:

res/...
    drawable/...
        ic_tab_friends.xml
        ic_tab_coworkers.xml
    drawable-ldpi/...
        ic_tab_friends_selected.png
        ic_tab_friends_unselected.png
        ic_tab_coworkers_selected.png
        ic_tab_coworkers_unselected.png
    drawable-mdpi/...
        ic_tab_friends_selected.png
        ic_tab_friends_unselected.png
        ic_tab_coworkers_selected.png
        ic_tab_coworkers_unselected.png
    drawable-hdpi/...
        ...
    drawable-ldpi-v5/...
        ...
    drawable-mdpi-v5/...
        ...
    drawable-hdpi-v5/...
        ...

ऊपर दी गई एक्सएमएल फ़ाइलों के कॉन्टेंट में, संबंधित दस्तावेज़ों का रेफ़रंस होना चाहिए ड्रॉएबल आइकॉन को चुना गया है और नहीं चुना गया है. उदाहरण के लिए, नीचे कोड दिया गया है ic_tab_friends.xml के लिए:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- selected state -->
    <item android:drawable="@drawable/ic_tab_friends_selected"
          android:state_selected="true"
          android:state_pressed="false" />
    <!-- unselected state (default) -->
    <item android:drawable="@drawable/ic_tab_friends_unselected" />
</selector>

Android 2.0 से Android 2.3 तक

इन दिशा-निर्देशों में, Android के लिए टैब आइकॉन डिज़ाइन करने का तरीका बताया गया है 2.0 से Android 2.3 (एपीआई लेवल 5 से 10) तक.

साइज़ और पोज़िशनिंग

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

पहली इमेज में, आइकॉन को अलग-अलग जगह पर रखने के अलग-अलग तरीके बताए गए हैं ऐसेट. आपको आइकॉन का साइज़ , ऐसेट के फ़ॉर्मैट में होता है.

आइकॉन का सुझाया गया साइज़ बताने के लिए, इमेज के हर उदाहरण को पहली इमेज में, गाइड के तीन अलग-अलग रेक्टैंगल दिखाए गए हैं:

  • लाल बॉक्स, पूरी ऐसेट को बाउंडिंग बॉक्स के तौर पर दिखाता है.
  • नीले रंग का बॉक्स, असल आइकॉन के लिए बाउंडिंग बॉक्स है. हम इसे इस्तेमाल करने का सुझाव देते हैं. आइकॉन बॉक्स का साइज़, पूरे ऐसेट बॉक्स से छोटा है इलाज के कई तरीके हैं.
  • नारंगी बॉक्स, असली आइकॉन के लिए सुझाया गया बाउंडिंग बॉक्स है, जब कॉन्टेंट स्क्वेयर हो. वर्गाकार आइकॉन का बॉक्स, अन्य बॉक्स के बॉक्स से छोटा होता है आइकॉन का इस्तेमाल करें.
  1. ज़्यादा डेंसिटी वाली (hdpi) स्क्रीन के लिए, टैब आइकॉन के डाइमेंशन:
    1. पूरी ऐसेट: 48 x 48 पिक्सल
    2. आइकॉन: 42 x 42 पिक्सल
  1. मध्यम स्तर की स्क्रीन (mdpi) वाली स्क्रीन के लिए टैब आइकॉन के डाइमेंशन:
    1. पूरी ऐसेट: 32 x 32 पिक्सल
    2. आइकॉन: 28 x 28 पिक्सल
  1. कम डेंसिटी वाली (ldpi) स्क्रीन के लिए, टैब आइकॉन के डाइमेंशन:
    1. पूरी ऐसेट: 24 x 24 पिक्सल
    2. आइकॉन: 22 x 22 पिक्सल

पहला डायग्राम. टैब आइकॉन का साइज़ और पोज़िशनिंग आइकॉन ऐसेट.

स्टाइल, रंग, और इफ़ेक्ट

टैब आइकॉन चपटे, मैट, और फ़ेस-ऑन के साथ दिख रहे हैं.

टैब आइकॉन में दो स्थितियां होनी चाहिए: चुना गया और नहीं चुना गया.

नहीं चुने गए टैब आइकॉन के लिए इफ़ेक्ट का व्यू.

दूसरी इमेज. चुने गए टैब आइकॉन के लिए स्टाइल और इफ़ेक्ट.

ध्यान दें: सभी पिक्सल डाइमेंशन मीडियम डेंसिटी के लिए होते हैं. इन्हें अन्य डेंसिटी के हिसाब से स्केल किया जाना चाहिए.

1.रंग भरें:#808080

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

तीसरी इमेज. चुने गए टैब आइकॉन के लिए स्टाइल और इफ़ेक्ट.

ध्यान दें: सभी पिक्सल डाइमेंशन मीडियम डेंसिटी के लिए होते हैं. इन्हें अन्य डेंसिटी के हिसाब से स्केल किया जाना चाहिए.

1.रंग भरें:#FFFFFF

2.अंदर का कॉन्टेंट:इनर कॉन्टेंट को बाहरी आकार से घटाया जाना चाहिए और इसमें पूरी तरह से पारदर्शी पिक्सल होने चाहिए.

3.बाहरी चमक:#000000, 25% ओपैसिटी
साइज़ 3 पिक्सल

क्या करें और क्या न करें

नीचे कुछ "क्या करें और न करें" दिए गए हैं, टैब आइकॉन बनाते समय इन उदाहरणों पर गौर करें आपका ऐप्लिकेशन.

आइकॉन के उदाहरण

यहां ज़्यादा डेंसिटी वाले स्टैंडर्ड टैब आइकॉन दिखाए गए हैं. इनका इस्तेमाल Android प्लैटफ़ॉर्म.

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

Android 1.6 और इससे पहले के वर्शन

इन दिशा-निर्देशों में, Android के लिए टैब आइकॉन डिज़ाइन करने का तरीका बताया गया है 1.6 (एपीआई लेवल 4) और इससे पहले के वर्शन.

संरचना

  • जो टैब नहीं चुने गए हैं उनमें फ़िल ग्रेडिएंट और इफ़ेक्ट एक जैसे हैं मेन्यू के आइकॉन पर क्लिक करके, लेकिन वह भी किसी बाहरी रोशनी के बिना.
  • चुने हुए टैब आइकॉन, बिना चुने हुए टैब आइकॉन की तरह दिखते हैं, लेकिन थोड़े हल्के में शैडो हो और उसके सामने के हिस्से का ग्रेडिएंट एक जैसा हो डायलॉग आइकॉन शामिल किए.
  • टैब आइकॉन में 1 पिक्सल का सेफ़फ़्रेम होता है, जो सिर्फ़ किनारे के लिए ओवरलैप होना चाहिए का एंटी-एलियास.
  • इस पेज पर बताए गए सभी डाइमेंशन, 32x32 पिक्सल आर्टबोर्ड साइज़ पर आधारित हैं. Photoshop टेंप्लेट के अंदर बाउंडिंग बॉक्स के आस-पास 1 पिक्सल पैडिंग (जगह) रखें.
का एक दृश्य
चुने गए टैब आइकॉन स्ट्रक्चर से चुने हुए का निशान हटाया गया है.

तीसरी इमेज. नहीं चुने गए टैब के लिए, सेफ़फ़्रेम और फ़िल ग्रेडिएंट आइकॉन. आइकॉन का साइज़ 32x32 है.

का एक दृश्य
चुने गए टैब आइकॉन का स्ट्रक्चर.

चौथी इमेज. टैब आइकॉन के लिए, सेफ़फ़्रेम और फ़िल ग्रेडिएंट राज्य का नाम. आइकॉन का साइज़ 32x32 है.

टैब नहीं चुने जाने का आइकॉन

लाइट, इफ़ेक्ट, और शैडो

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

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

पांचवी इमेज. नहीं चुने के लिए, लाइट, इफ़ेक्ट, और शैडो टैब आइकॉन.

1.आगे का हिस्सा:ग्रेडिएंट ओवरले | ऐंगल 90°
नीचे का रंग: r 223 | जी 223 | b 223
ऊपर का रंग: r 249 | जी 249 | b 249
नीचे दी गई रंग की जगह: 0%
सबसे ऊपर वाली रंग की जगह: 75%
2.इनर शैडो:ब्लैक | 10 % ओपैसिटी | 90° दूरी 2 पिक्सल | साइज़ 2 पिक्सल
3.इनर बेवेल:गहराई 1% | दिशा नीचे | साइज़ 0 पिक्सल | ऐंगल 90° | ऊंचाई 10°
सफेद 70% ओपैसिटी को हाइलाइट करें
शैडो काला 25% ओपैसिटी

सिलसिलेवार निर्देश

  1. Adobe Illustrator जैसे टूल का इस्तेमाल करके, बेसिक आकार बनाएं.
  2. आकृति को Adobe Photoshop जैसे टूल में इंपोर्ट करें और उसकी इमेज को फ़िट करने के लिए स्केल करें पारदर्शी बैकग्राउंड पर 32x32 पिक्सल.
  3. चुनी गई स्थिति वाले फ़िल्टर के लिए, इमेज 5 में दिखने वाले इफ़ेक्ट जोड़ें.
  4. 'पारदर्शिता' सुविधा के साथ आइकॉन को 32x32 फ़ॉर्मैट में PNG फ़ाइल के तौर पर एक्सपोर्ट करें.

चुने गए टैब का आइकॉन

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

का एक दृश्य
चुने गए टैब आइकॉन के लिए लाइट, इफ़ेक्ट, और शैडो.

छठी इमेज. चुने गए टैब के लिए लाइट, इफ़ेक्ट, और शैडो आइकॉन.

1.आगे का हिस्सा:रंग पटल से फ़िल ग्रेडिएंट का इस्तेमाल करें.
2.इनर शैडो:ब्लैक | 20% ओपैसिटी |
90° का ऐंगल | 2 पिक्सल | दूरी
साइज़ 2 पिक्सल
3.इनर बेवेल:गहराई 1% | दिशा नीचे | साइज़ 0 पिक्सल | ऐंगल 90° |
ऊंचाई 10°
सफे़द 70% अपारदर्शिता को हाइलाइट करें
शैडो काला 25% ओपैसिटी

रंग पटल

ग्रेडिएंट भरें
1:  r 163 | g 163 | b 163
2:  r 120 | g 120 | b 120
इसे न चुने गए टैब आइकॉन पर, रंग भरने के तौर पर इस्तेमाल किया जाता है.

सिलसिलेवार निर्देश

  1. Adobe Illustrator जैसे टूल का इस्तेमाल करके, बेसिक आकार बनाएं.
  2. शेप को Adobe Photoshop जैसे टूल में इंपोर्ट करें और उसे 32x32 में फ़िट करें पिक्सल आर्टबोर्ड है.
  3. चुनी गई स्थिति वाले फ़िल्टर के लिए, छठी इमेज में दिखने वाले इफ़ेक्ट जोड़ें.
  4. 'पारदर्शिता' सुविधा के साथ आइकॉन को 32x32 फ़ॉर्मैट में PNG फ़ाइल के तौर पर एक्सपोर्ट करें.