Jetpack Compose implementation
এই পৃষ্ঠায় অ্যাপ আইকন তৈরি ও ব্যবহার সম্পর্কিত তথ্য রয়েছে, যা শুধুমাত্র ভিউ-ভিত্তিক লেআউটের জন্য প্রযোজ্য। অ্যাপ আইকন তৈরি সম্পর্কে আরও বিস্তারিত তথ্যের জন্য, ‘অ্যাপ আইকন তৈরি করুন’ দেখুন, যেখানে আমাদের প্রস্তাবিত UI ফ্রেমওয়ার্ক সম্পর্কে আলোচনা করা হয়েছে।
একটি অ্যাকশন বার বা ট্যাব আইকন তৈরি করুন
ভিউ-ভিত্তিক লেআউটের জন্য অ্যাকশন বার এবং ট্যাব আইকন তৈরি করতে ইমেজ অ্যাসেট স্টুডিও ব্যবহার করুন।
অ্যাকশন বার আইকন হলো অ্যাকশন বারে অবস্থিত গ্রাফিক্যাল উপাদান যা স্বতন্ত্র অ্যাকশন আইটেমগুলোকে উপস্থাপন করে। আরও তথ্যের জন্য ‘অ্যাকশন যোগ করা ও পরিচালনা করা’ , ‘অ্যাপ বার - ম্যাটেরিয়াল ডিজাইন ’, এবং ‘অ্যাকশন বার ডিজাইন’ দেখুন।
ট্যাব আইকন হলো এমন গ্রাফিক্যাল উপাদান যা একটি মাল্টি-ট্যাব ইন্টারফেসে স্বতন্ত্র ট্যাবগুলোকে উপস্থাপন করতে ব্যবহৃত হয়। প্রতিটি ট্যাব আইকনের দুটি অবস্থা থাকে: অনির্বাচিত এবং নির্বাচিত। আরও তথ্যের জন্য "ট্যাব এবং ট্যাব সহ সোয়াইপ ভিউ তৈরি করা - ম্যাটেরিয়াল ডিজাইন" দেখুন।
ইমেজ অ্যাসেট স্টুডিও আইকনগুলোকে res/drawable-<density>/ ডিরেক্টরিগুলোর সঠিক স্থানে রাখে।
পুরোনো অ্যান্ড্রয়েড সংস্করণ সমর্থন করলেও, আমরা আপনাকে অ্যাকশন বার এবং ট্যাব আইকনগুলির জন্য ম্যাটেরিয়াল ডিজাইন স্টাইল ব্যবহার করার পরামর্শ দিই। পুরোনো প্ল্যাটফর্ম সংস্করণগুলিতে আপনার ম্যাটেরিয়াল ডিজাইন UI পৌঁছে দিতে appcompat এবং অন্যান্য সহায়ক লাইব্রেরি ব্যবহার করুন।
ইমেজ অ্যাসেট স্টুডিও-র বিকল্প হিসেবে, আপনি অ্যাকশন বার এবং ট্যাব আইকন তৈরি করতে ভেক্টর অ্যাসেট স্টুডিও ব্যবহার করতে পারেন। ভেক্টর ড্রয়েবলগুলো সাধারণ আইকনের জন্য উপযুক্ত এবং এগুলো আপনার অ্যাপের আকার কমাতে পারে।
ইমেজ অ্যাসেট স্টুডিও খোলার পর, আপনি এই ধাপগুলো অনুসরণ করে একটি অ্যাকশন বার বা ট্যাব আইকন যোগ করতে পারেন:
- আইকন টাইপ ফিল্ডে অ্যাকশন বার এবং ট্যাব আইকন নির্বাচন করুন।
একটি অ্যাসেট টাইপ নির্বাচন করুন, এবং তারপর নিচের ফিল্ডে অ্যাসেটটি নির্দিষ্ট করুন:
ক্লিপ আর্ট ফিল্ডে বাটনটিতে ক্লিক করুন।
আইকন নির্বাচন ডায়ালগ বক্সে একটি ম্যাটেরিয়াল আইকন নির্বাচন করুন এবং তারপর ওকে (OK) ক্লিক করুন।
Path ফিল্ডে ছবিটির পাথ এবং ফাইলের নাম উল্লেখ করুন। একটি ডায়ালগ বক্স ব্যবহার করতে ... এ ক্লিক করুন।
টেক্সট ফিল্ডে একটি টেক্সট স্ট্রিং টাইপ করুন এবং একটি ফন্ট নির্বাচন করুন।
আইকনটি ডানদিকের সোর্স অ্যাসেট অংশে এবং উইজার্ডের নিচের প্রিভিউ অংশে দেখা যায়।
ঐচ্ছিকভাবে নাম এবং প্রদর্শনের বিকল্পগুলি পরিবর্তন করুন:
নাম - আপনি যদি ডিফল্ট নামটি ব্যবহার করতে না চান, তাহলে একটি নতুন নাম টাইপ করুন। যদি উইজার্ডের নীচে একটি ত্রুটির মাধ্যমে নির্দেশিত হয় যে সেই রিসোর্স নামটি প্রজেক্টে আগে থেকেই বিদ্যমান, তবে এটি ওভাররাইট হয়ে যাবে। নামে শুধুমাত্র ছোট হাতের অক্ষর, আন্ডারস্কোর এবং সংখ্যা থাকতে পারে।
ট্রিম - সোর্স অ্যাসেটে আইকন গ্রাফিক এবং বর্ডারের মধ্যে মার্জিন সামঞ্জস্য করতে, 'হ্যাঁ' নির্বাচন করুন। এই অপারেশনটি অ্যাস্পেক্ট রেশিও বজায় রেখে স্বচ্ছ স্থান অপসারণ করে। সোর্স অ্যাসেট অপরিবর্তিত রাখতে, 'না' নির্বাচন করুন।
প্যাডিং - আপনি যদি সোর্স অ্যাসেটের চারপাশের প্যাডিং সামঞ্জস্য করতে চান, তাহলে স্লাইডারটি সরান। -১০% এবং ৫০% এর মধ্যে একটি মান নির্বাচন করুন। আপনি যদি ট্রিমও নির্বাচন করেন, তাহলে ট্রিমিং প্রথমে হবে।
থিম - HOLO_LIGHT অথবা HOLO_DARK নির্বাচন করুন। অথবা, 'সিলেক্ট কালার' ডায়ালগে একটি রঙ নির্দিষ্ট করতে, CUSTOM নির্বাচন করুন এবং তারপরে 'কাস্টম কালার' ফিল্ডে ক্লিক করুন।
ইমেজ অ্যাসেট স্টুডিও আইকনটিকে একটি স্বচ্ছ বর্গক্ষেত্রের মধ্যে তৈরি করে, ফলে এর কিনারাগুলোতে কিছুটা প্যাডিং থাকে। এই প্যাডিংটি স্ট্যান্ডার্ড ড্রপ-শ্যাডো আইকন ইফেক্টের জন্য পর্যাপ্ত জায়গা প্রদান করে।
পরবর্তী ধাপে যান।
ঐচ্ছিকভাবে রিসোর্স ডিরেক্টরি পরিবর্তন করুন:
- রিসোর্স ডিরেক্টরি - যে রিসোর্স সোর্স সেটে আপনি ইমেজ অ্যাসেটটি যোগ করতে চান, সেটি নির্বাচন করুন: src/main/res , src/debug/res , src/release/res , অথবা একটি ব্যবহারকারী-সংজ্ঞায়িত সোর্স সেট। মূল সোর্স সেটটি ডিবাগ এবং রিলিজ সহ সমস্ত বিল্ড ভ্যারিয়েন্টের জন্য প্রযোজ্য। ডিবাগ এবং রিলিজ সোর্স সেটগুলো মূল সোর্স সেটকে ওভাররাইড করে এবং একটি বিল্ডের একটি সংস্করণে প্রযোজ্য হয়। ডিবাগ সোর্স সেটটি শুধুমাত্র ডিবাগিংয়ের জন্য। একটি নতুন সোর্স সেট সংজ্ঞায়িত করতে, ফাইল > প্রজেক্ট স্ট্রাকচার > অ্যাপ > বিল্ড টাইপস নির্বাচন করুন। উদাহরণস্বরূপ, আপনি একটি বিটা সোর্স সেট সংজ্ঞায়িত করতে পারেন এবং আইকনের এমন একটি সংস্করণ তৈরি করতে পারেন যার নিচের ডান কোণায় "BETA" লেখাটি থাকবে। আরও তথ্যের জন্য, বিল্ড ভ্যারিয়েন্ট কনফিগার করুন দেখুন।
আউটপুট ডিরেক্টরি অংশে ছবিগুলো এবং সেই ফোল্ডারগুলো দেখানো হয়, যেখানে সেগুলো প্রজেক্ট উইন্ডোর প্রজেক্ট ফাইলস ভিউতে প্রদর্শিত হবে।
শেষ করুন- এ ক্লিক করুন।
ইমেজ অ্যাসেট স্টুডিও বিভিন্ন ডেনসিটির জন্য ছবিগুলোকে ড্রয়েবল ফোল্ডারগুলোতে যুক্ত করে।
কোডে একটি ইমেজ রিসোর্স উল্লেখ করুন
আপনি সাধারণত আপনার কোডে একটি ইমেজ রিসোর্সকে সাধারণভাবে উল্লেখ করতে পারেন, এবং যখন আপনার অ্যাপটি চলে, তখন ডিভাইসের উপর নির্ভর করে সংশ্লিষ্ট ছবিটি স্বয়ংক্রিয়ভাবে প্রদর্শিত হয়:
বেশিরভাগ ক্ষেত্রে, আপনি XML কোডে
@drawableঅথবা জাভা কোডেDrawableহিসেবে ইমেজ রিসোর্সকে উল্লেখ করতে পারেন।উদাহরণস্বরূপ, নিম্নলিখিত লেআউট XML কোডটি একটি
ImageViewতে ড্রয়েবলটি প্রদর্শন করে:<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/myimage" />নিম্নলিখিত জাভা কোডটি ছবিটিকে একটি
Drawableহিসেবে পুনরুদ্ধার করে:কোটলিন
val drawable = resources.getDrawable(R.drawable.myimage, theme)
জাভা
Resources res = getResources(); Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());
getResources()মেথডটিContextক্লাসে অবস্থিত, যা অ্যাক্টিভিটি, ফ্র্যাগমেন্ট, লেআউট, ভিউ ইত্যাদির মতো UI অবজেক্টের ক্ষেত্রে প্রযোজ্য।আপনার অ্যাপ যদি সাপোর্ট লাইব্রেরি ব্যবহার করে, তাহলে আপনি XML কোডে
app:srcCompatস্টেটমেন্ট ব্যবহার করে একটি ইমেজ রিসোর্স উল্লেখ করতে পারেন। উদাহরণস্বরূপ:<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" app:srcCompat="@drawable/myimage" />
আপনি শুধুমাত্র প্রধান থ্রেড থেকেই ইমেজ রিসোর্স অ্যাক্সেস করতে পারবেন।
আপনার প্রজেক্টের res/ ডিরেক্টরিতে একটি ইমেজ রিসোর্স তৈরি হয়ে গেলে, আপনি এর রিসোর্স আইডি ব্যবহার করে আপনার জাভা কোড বা এক্সএমএল লেআউট থেকে সেটিকে রেফারেন্স করতে পারেন। নিচের জাভা কোডটি একটি ImageView drawable/myimage.png রিসোর্সটি ব্যবহার করার জন্য সেট করে:
কোটলিন
findViewById<ImageView>(R.id.myimageview).apply { setImageResource(R.drawable.myimage) }
জাভা
ImageView imageView = (ImageView) findViewById(R.id.myimageview); imageView.setImageResource(R.drawable.myimage);
আরও তথ্যের জন্য আপনার অ্যাপ রিসোর্স অ্যাক্সেস দেখুন।