ট্যাব আইকন

ট্যাব আইকনগুলি একটি মাল্টি-ট্যাব ইন্টারফেসে পৃথক ট্যাবগুলিকে উপস্থাপন করতে ব্যবহৃত গ্রাফিকাল উপাদান। প্রতিটি ট্যাব আইকনের দুটি অবস্থা আছে: অনির্বাচিত এবং নির্বাচিত।

ঘনত্ব-নির্দিষ্ট আইকন সেট প্রদানে বর্ণিত হিসাবে, আপনার নিম্ন-, মাঝারি- এবং উচ্চ-ঘনত্বের পর্দার জন্য পৃথক আইকন সেট তৈরি করা উচিত। এটি নিশ্চিত করে যে আপনার আইকনগুলি আপনার অ্যাপ্লিকেশন ইনস্টল করা যেতে পারে এমন ডিভাইসগুলির পরিসরে সঠিকভাবে প্রদর্শিত হবে৷ আইকনগুলির একাধিক সেটের সাথে কীভাবে কাজ করবেন সে সম্পর্কে পরামর্শের জন্য ডিজাইনারদের জন্য টিপস দেখুন।

চূড়ান্ত শিল্প একটি স্বচ্ছ PNG ফাইল হিসাবে রপ্তানি করা আবশ্যক. একটি পটভূমির রঙ অন্তর্ভুক্ত করবেন না ।

অ্যাডোব ফটোশপে আইকন তৈরির টেমপ্লেটগুলি আইকন টেমপ্লেট প্যাকে উপলব্ধ।

সতর্কতা: ট্যাব আইকনগুলির শৈলী আগের সংস্করণগুলির তুলনায় অ্যান্ড্রয়েড 2.0-এ ব্যাপকভাবে পরিবর্তিত হয়েছে৷ সমস্ত Android সংস্করণের জন্য সমর্থন প্রদান করতে , বিকাশকারীদের উচিত:
1. drawable-hdpi-v5 , drawable-mdpi-v5 , এবং drawable-ldpi-v5 ডিরেক্টরিতে Android 2.0 এবং উচ্চতরের জন্য ট্যাব আইকনগুলি রাখুন৷
2. drawable-hdpi , drawable-mdpi এবং drawable-ldpi ডিরেক্টরিতে পূর্ববর্তী সংস্করণগুলির জন্য ট্যাব আইকন রাখুন।
3. অ্যাপ্লিকেশান ম্যানিফেস্টে <uses-sdk> -এ android:targetSdkVersion 5 বা উচ্চতর সেট করুন। এটি সিস্টেমকে জানাবে যে এটি নতুন ট্যাব শৈলী ব্যবহার করে ট্যাব রেন্ডার করবে।

দুটি ট্যাব রাজ্যের জন্য আইকন প্রদান করা

ট্যাব আইকনের দুটি অবস্থা থাকা উচিত: অনির্বাচিত এবং নির্বাচিত। একাধিক রাজ্যের সাথে আইকন প্রদান করতে, বিকাশকারীদের অবশ্যই প্রতিটি আইকনের জন্য অঙ্কনযোগ্য একটি রাজ্য তালিকা তৈরি করতে হবে, যা একটি XML ফাইল যা বিভিন্ন UI রাজ্যের জন্য কোন চিত্রটি ব্যবহার করবে তা তালিকাভুক্ত করে৷

উদাহরণস্বরূপ, 'বন্ধু' এবং 'সহকর্মী' নামের ট্যাব সহ একটি ট্যাব উইজেটের জন্য, আপনি নীচের মতো একটি ডিরেক্টরি কাঠামো ব্যবহার করতে পারেন:

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/...
        ...

উপরে তালিকাভুক্ত XML ফাইলের বিষয়বস্তু সংশ্লিষ্ট নির্বাচিত এবং অনির্বাচিত আইকন অঙ্কনযোগ্য উল্লেখ করা উচিত। উদাহরণস্বরূপ, নীচে 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 (API স্তর 5 থেকে 10) এর জন্য ট্যাব আইকনগুলি ডিজাইন করতে হয়৷

আকার এবং অবস্থান

ট্যাব আইকনগুলিকে সাধারণ আকার এবং ফর্মগুলি ব্যবহার করা উচিত এবং সেগুলিকে অবশ্যই স্কেল করা এবং চূড়ান্ত সম্পদের ভিতরে স্থাপন করা উচিত৷

চিত্র 1 সম্পদের ভিতরে আইকন অবস্থান করার বিভিন্ন উপায় চিত্রিত করে। আপনার আইকনগুলিকে সম্পদের প্রকৃত সীমার থেকে ছোট করা উচিত৷

আইকনের জন্য প্রস্তাবিত আকার নির্দেশ করার জন্য, চিত্র 1-এর প্রতিটি উদাহরণে তিনটি ভিন্ন গাইড আয়তক্ষেত্র রয়েছে:

• লাল বাক্স হল সম্পূর্ণ সম্পদের জন্য বাউন্ডিং বক্স।
• নীল বক্সটি প্রকৃত আইকনের জন্য প্রস্তাবিত বাউন্ডিং বক্স। বিশেষ আইকন চিকিত্সার জন্য অনুমতি দেওয়ার জন্য আইকন বক্সটি সম্পূর্ণ সম্পদ বাক্সের চেয়ে ছোট আকারের।
• কমলা বাক্স হল প্রকৃত আইকনের জন্য প্রস্তাবিত বাউন্ডিং বক্স যখন বিষয়বস্তু বর্গাকার হয়। বর্গাকার আইকনগুলির বাক্সটি অন্যান্য আইকনের তুলনায় ছোট হয় যাতে দুটি প্রকারের মধ্যে একটি সামঞ্জস্যপূর্ণ চাক্ষুষ ওজন স্থাপন করা যায়।

উচ্চ-ঘনত্ব ( hdpi ) স্ক্রিনের জন্য ট্যাব আইকনের মাত্রা: সম্পূর্ণ সম্পদ: 48 x 48 px আইকন: 42 x 42 px
মাঝারি-ঘনত্ব ( mdpi ) স্ক্রীনের জন্য ট্যাব আইকনের মাত্রা: সম্পূর্ণ সম্পদ: 32 x 32 px আইকন: 28 x 28 px
কম ঘনত্ব ( ldpi ) স্ক্রিনের জন্য ট্যাব আইকনের মাত্রা: সম্পূর্ণ সম্পদ: 24 x 24 px আইকন: 22 x 22 px
	চিত্র 1. ট্যাব আইকন সাইজিং এবং আইকন সম্পদের সীমানার মধ্যে অবস্থান।

শৈলী, রং, এবং প্রভাব

ট্যাব আইকনগুলি ফ্ল্যাট, ম্যাট এবং ছবিযুক্ত ফেস-অন।

ট্যাব আইকনগুলির দুটি অবস্থা থাকা উচিত: নির্বাচিত এবং অনির্বাচিত৷

চিত্র 2. অনির্বাচিত ট্যাব আইকনগুলির জন্য স্টাইল এবং প্রভাব৷ দ্রষ্টব্য: সমস্ত পিক্সেল মাত্রা মাঝারি ঘনত্বের জন্য এবং অন্যান্য ঘনত্বের জন্য যথাযথভাবে মাপ করা উচিত। 1. রঙ পূরণ করুন: #808080 2. অভ্যন্তরীণ বিষয়বস্তু: ভিতরের বিষয়বস্তু বাইরের আকৃতি থেকে বিয়োগ করা উচিত এবং সম্পূর্ণরূপে স্বচ্ছ পিক্সেল গঠিত।

চিত্র 3. নির্বাচিত ট্যাব আইকনগুলির জন্য শৈলী এবং প্রভাব। দ্রষ্টব্য: সমস্ত পিক্সেল মাত্রা মাঝারি ঘনত্বের জন্য এবং অন্যান্য ঘনত্বের জন্য যথাযথভাবে মাপ করা উচিত। 1. রঙ পূরণ করুন: #FFFFFF 2. অভ্যন্তরীণ বিষয়বস্তু: ভিতরের বিষয়বস্তু বাইরের আকৃতি থেকে বিয়োগ করা উচিত এবং সম্পূর্ণরূপে স্বচ্ছ পিক্সেল গঠিত। 3. বাইরের আভা: #000000 , 25% অস্বচ্ছতা আকার 3px

করণীয় এবং করণীয়

আপনার অ্যাপ্লিকেশনের জন্য ট্যাব আইকন তৈরি করার সময় বিবেচনা করার জন্য নীচে কিছু "করুন এবং করবেন না" উদাহরণ রয়েছে৷

উদাহরণ আইকন

Android প্ল্যাটফর্মে ব্যবহৃত স্ট্যান্ডার্ড হাই-ডেনসিটি ট্যাব আইকনগুলি নীচে দেখানো হয়েছে৷

সতর্কতা: যেহেতু এই সংস্থানগুলি প্ল্যাটফর্ম সংস্করণগুলির মধ্যে পরিবর্তিত হতে পারে, আপনার সিস্টেমের সংস্থানগুলির অনুলিপি উল্লেখ করা উচিত নয়৷ আপনি যদি কোনও আইকন বা অন্যান্য অভ্যন্তরীণ অঙ্কনযোগ্য সংস্থানগুলি ব্যবহার করতে চান তবে আপনার সেই আইকনগুলির একটি স্থানীয় অনুলিপি বা অঙ্কনযোগ্য আপনার অ্যাপ্লিকেশন সংস্থানগুলিতে সংরক্ষণ করা উচিত, তারপর আপনার অ্যাপ্লিকেশন কোড থেকে স্থানীয় অনুলিপিটি উল্লেখ করুন৷ এইভাবে, আপনি আপনার আইকনগুলির উপস্থিতির উপর নিয়ন্ত্রণ বজায় রাখতে পারেন, এমনকি যদি সিস্টেমের অনুলিপি পরিবর্তন হয়। মনে রাখবেন যে নীচের গ্রিডটি সম্পূর্ণ হওয়ার উদ্দেশ্যে নয়।

অ্যান্ড্রয়েড 1.6 এবং তার আগের

নিম্নলিখিত নির্দেশিকাগুলি বর্ণনা করে যে কীভাবে Android 1.6 (API স্তর 4) এবং তার আগের জন্য ট্যাব আইকনগুলি ডিজাইন করতে হয়৷

গঠন

• অনির্বাচিত ট্যাব আইকনগুলির মেনু আইকনগুলির মতো একই ফিল গ্রেডিয়েন্ট এবং প্রভাব রয়েছে, তবে কোনও বাইরের আভা ছাড়াই৷
• নির্বাচিত ট্যাব আইকনগুলি অনির্বাচিত ট্যাব আইকনগুলির মতো দেখতে, তবে একটি ক্ষীণ অভ্যন্তরীণ ছায়া সহ, এবং ডায়ালগ আইকনগুলির মতো একই সামনের অংশের গ্রেডিয়েন্ট রয়েছে৷
• ট্যাব আইকনগুলির একটি 1 px নিরাপদ ফ্রেম রয়েছে যা শুধুমাত্র একটি বৃত্তাকার আকৃতির অ্যান্টি-অ্যালিয়াসের প্রান্তের জন্য ওভারল্যাপ করা উচিত৷
• এই পৃষ্ঠায় নির্দিষ্ট করা সমস্ত মাত্রা একটি 32x32 px আর্টবোর্ড আকারের উপর ভিত্তি করে। ফটোশপ টেমপ্লেটের ভিতরে বাউন্ডিং বক্সের চারপাশে 1 পিক্স প্যাডিং রাখুন।

	চিত্র 3. অনির্বাচিত ট্যাব আইকনগুলির জন্য নিরাপদ ফ্রেম এবং গ্রেডিয়েন্ট পূরণ করুন৷ আইকনের আকার 32x32।
	চিত্র 4. নির্বাচিত অবস্থায় ট্যাব আইকনগুলির জন্য নিরাপদ ফ্রেম এবং ফিল গ্রেডিয়েন্ট। আইকনের আকার 32x32।

অনির্বাচিত ট্যাব আইকন

আলো, প্রভাব, এবং ছায়া

অনির্বাচিত ট্যাব আইকনগুলি দেখতে ঠিক নির্বাচিত ট্যাব আইকনগুলির মতো, তবে একটি ক্ষীণ ভিতরের ছায়া সহ, এবং ডায়ালগ আইকনগুলির মতো একই সামনের অংশের গ্রেডিয়েন্ট।

চিত্র 5. অনির্বাচিত ট্যাব আইকনগুলির জন্য আলো, প্রভাব এবং ছায়া। 1. সামনের অংশ: গ্রেডিয়েন্ট ওভারলে | কোণ 90° নীচের রঙ: r 223 | g 223 | b 223 উপরের রঙ: r 249 | g 249 | খ 249 নীচের রঙের অবস্থান: 0% শীর্ষ রঙের অবস্থান: 75% 2. অভ্যন্তরীণ ছায়া: কালো | 10% অস্বচ্ছতা | কোণ 90° দূরত্ব 2px | আকার 2px 3. অভ্যন্তরীণ বেভেল: গভীরতা 1% | দিক নিচে | আকার 0px | কোণ 90° | উচ্চতা 10° সাদা 70% অস্বচ্ছতা হাইলাইট করুন ছায়া কালো 25% অস্বচ্ছতা

নির্বাচিত ট্যাব আইকন

নির্বাচিত ট্যাব আইকনগুলির মেনু আইকনের মতো একই ফিল গ্রেডিয়েন্ট এবং প্রভাব রয়েছে, তবে কোনও বাইরের আভা ছাড়াই৷

চিত্র 6. নির্বাচিত ট্যাব আইকনগুলির জন্য আলো, প্রভাব এবং ছায়া। 1. সামনের অংশ: কালার প্যালেট থেকে ফিল গ্রেডিয়েন্ট ব্যবহার করুন। 2. অভ্যন্তরীণ ছায়া: কালো | 20% অস্বচ্ছতা | কোণ 90° | দূরত্ব 2px | আকার 2px 3. অভ্যন্তরীণ বেভেল: গভীরতা 1% | দিক নিচে | আকার 0px | কোণ 90° | উচ্চতা 10° সাদা 70% অস্বচ্ছতা হাইলাইট করুন ছায়া কালো 25% অস্বচ্ছতা

রঙ প্যালেট গ্রেডিয়েন্ট পূরণ করুন 1: r 163 | g 163 | b 163 2: আর 120 | g 120 | b 120 অনির্বাচিত ট্যাব আইকনগুলিতে রঙ পূরণ হিসাবে ব্যবহৃত হয়।

ধাপে ধাপে Adobe Illustrator এর মত একটি টুল ব্যবহার করে মৌলিক আকৃতি তৈরি করুন। একটি স্বচ্ছ ব্যাকগ্রাউন্ড সহ একটি 32x32 px আর্টবোর্ডের সাথে মানানসই করতে Adobe Photoshop এবং স্কেল-এর মতো একটি টুলে আকারটি আমদানি করুন৷ নির্বাচিত স্টেট ফিল্টারের জন্য চিত্র 6-এ দেখা প্রভাব যুক্ত করুন। স্বচ্ছতা সক্ষম সহ একটি PNG ফাইল হিসাবে 32x32 এ আইকনটি রপ্তানি করুন৷