অ্যাপ আইকন তৈরি করা (Views)

Jetpack Compose ইমপ্লিমেন্টেশন

এই পৃষ্ঠায় অ্যাপ আইকন তৈরি করা ও ব্যবহার করার ব্যাপারে তথ্য আছে যা ভিউ-ভিত্তিক লেআউটের ক্ষেত্রে অনন্য। অ্যাপ আইকন তৈরি করার ব্যাপারে আরও বিস্তারিত তথ্যের জন্য, অ্যাপ আইকন তৈরি করুন দেখুন, যেখানে আমাদের সাজেস্ট করা UI ফ্রেমওয়ার্ক কভার করা হয়েছে।

অ্যাকশন বার বা ট্যাব আইকন তৈরি করুন

ভিউ-ভিত্তিক লেআউটের জন্য অ্যাকশন বার ও ট্যাব আইকন তৈরি করতে Image Asset Studio ব্যবহার করুন।

অ্যাকশন বার আইকন হল অ্যাকশন বারে রাখা গ্রাফিক্যাল এলিমেন্ট এবং এটি আলাদা আলাদা অ্যাকশন আইটেমকে দেখায়। আরও তথ্যের জন্য অ্যাকশন যোগ করা ও ম্যানেজ করা, অ্যাপ বার - মেটেরিয়াল ডিজাইন {:.external} এবং অ্যাকশন বার ডিজাইন দেখুন।

ট্যাব আইকন হল গ্রাফিক্যাল এলিমেন্ট যা মাল্টি-ট্যাব ইন্টারফেসে আলাদা আলাদা ট্যাবকে দেখাতে ব্যবহার করা হয়। প্রতিটি ট্যাব আইকনের দুটি অবস্থা আছে: বেছে নেওয়া হয়নি এবং বেছে নেওয়া হয়েছে। আরও তথ্যের জন্য ট্যাব সহ সোয়াইপ ভিউ তৈরি করা এবং ট্যাব - মেটেরিয়াল ডিজাইন দেখুন।

Image Asset Studio, res/drawable-<density>/ ডিরেক্টরিতে সঠিক লোকেশনে আইকনগুলি রাখে।

আপনি Android-এর পুরনো ভার্সন ব্যবহার করলেও, অ্যাকশন বার ও ট্যাব আইকনের জন্য মেটেরিয়াল ডিজাইন স্টাইল ব্যবহার করলে ভালো হয়। appcompat এবং অন্যান্য সহায়ক লাইব্রেরি ব্যবহার করে পুরনো প্ল্যাটফর্ম ভার্সনে আপনার মেটেরিয়াল ডিজাইন UI ডেলিভার করুন।

Image Asset Studio-এর বিকল্প হিসেবে, আপনি অ্যাকশন বার ও ট্যাব আইকন তৈরি করতে ভেক্টর অ্যাসেট স্টুডিও ব্যবহার করতে পারেন। ভেক্টর ড্রয়েবেল সাধারণ আইকনের জন্য উপযুক্ত এবং আপনার অ্যাপের সাইজ কমাতে পারে।

Image Asset Studio খোলার পরে, আপনি এইসব ধাপ অনুসরণ করে অ্যাকশন বার বা ট্যাব আইকন যোগ করতে পারবেন:

  1. আইকনের ধরন ফিল্ডে, অ্যাকশন বার ও ট্যাব আইকন বেছে নিন।
  2. অ্যাসেটের ধরন বেছে নিন এবং তারপরে নিচের ফিল্ডে অ্যাসেট নির্দিষ্ট করুন:

    • ক্লিপ আর্ট ফিল্ডে, বোতামে ক্লিক করুন।

      আইকন বেছে নিন ডায়ালগে, একটি মেটেরিয়াল আইকন বেছে নিন এবং তারপর ঠিক আছে বিকল্পে ক্লিক করুন।

    • পাথ ফিল্ডে, ছবির পাথ ও ফাইলের নাম উল্লেখ করুন। ডায়ালগ ব্যবহার করতে ...-এ ক্লিক করুন।

    • টেক্সট ফিল্ডে, টেক্সট স্ট্রিং টাইপ করুন এবং ফন্ট বেছে নিন।

    আইকনটি ডানদিকে সোর্স অ্যাসেট অংশে এবং উইজার্ডের নিচে প্রিভিউ অংশে দেখা যায়।

  3. ঐচ্ছিকভাবে নাম ও ডিসপ্লে বিকল্প পরিবর্তন করুন:

    • নাম - আপনি ডিফল্ট নাম ব্যবহার করতে না চাইলে, নতুন নাম টাইপ করুন। প্রোজেক্টে যদি সেই রিসোর্সের নাম আগে থেকেই থাকে, তাহলে উইজার্ডের নিচে একটি ত্রুটি দেখাবে এবং এটি ওভাররাইট করা হবে। নামে শুধু ছোট হাতের অক্ষর, আন্ডারস্কোর ও সংখ্যা থাকতে পারে।

    • ট্রিম - সোর্স অ্যাসেটে আইকন গ্রাফিক ও বর্ডারের মধ্যে মার্জিন অ্যাডজাস্ট করতে, হ্যাঁ বিকল্প বেছে নিন। এই অপারেশন অ্যাস্পেক্ট রেশিও বজায় রেখে ট্রান্সপারেন্ট স্পেস সরিয়ে দেয়। সোর্স অ্যাসেট অপরিবর্তিত রাখতে, না বিকল্প বেছে নিন।

    • প্যাডিং - আপনি যদি সোর্স অ্যাসেটের চারদিকের প্যাডিং অ্যাডজাস্ট করতে চান, তাহলে স্লাইডারটি সরান। -১০% থেকে ৫০%-এর মধ্যে কোনও ভ্যালু বেছে নিন। আপনি কাটছাঁট করুন বিকল্প বেছে নিলে, প্রথমে কাটছাঁট করা হবে।

    • থিম - HOLO_LIGHT অথবা HOLO_DARK বেছে নিন। অথবা, রঙ বেছে নিন ডায়ালগে কোনও রঙ নির্দিষ্ট করতে, কাস্টম বিকল্প বেছে নিন এবং তারপর কাস্টম রঙ ফিল্ডে ক্লিক করুন।

    Image Asset Studio একটি স্বচ্ছ বর্গক্ষেত্রের মধ্যে আইকন তৈরি করে, তাই কিনারায় কিছুটা প্যাডিং থাকে। প্যাডিং স্ট্যান্ডার্ড ড্রপ-শ্যাডো আইকন এফেক্টের জন্য পর্যাপ্ত জায়গা প্রদান করে।

  4. পরবর্তী বিকল্পে ক্লিক করুন।

  5. ঐচ্ছিকভাবে রিসোর্স ডিরেক্টরি পরিবর্তন করুন:

    • Res ডিরেক্টরি - আপনি যেখানে ইমেজ অ্যাসেট যোগ করতে চান সেই রিসোর্স সোর্স সেট বেছে নিন: src/main/res, src/debug/res, src/release/res অথবা ব্যবহারকারীর দ্বারা নির্ধারিত সোর্স সেট। প্রধান সোর্স সেট ডিবাগ ও রিলিজ সহ সব বিল্ড ভেরিয়েন্টের ক্ষেত্রে প্রযোজ্য। ডিবাগ ও রিলিজ সোর্স সেট মূল সোর্স সেটকে ওভাররাইড করে এবং বিল্ডের একটি ভার্সনে প্রয়োগ করা হয়। ডিবাগ সোর্স সেট শুধুমাত্র ডিবাগ করার জন্য। নতুন সোর্স সেট নির্ধারণ করতে, ফাইল > প্রোজেক্ট স্ট্রাকচার > অ্যাপ > বিল্ডের ধরন বিকল্প বেছে নিন। যেমন, আপনি একটি বিটা সোর্স সেট নির্ধারণ করতে পারেন এবং একটি আইকনের ভার্সন তৈরি করতে পারেন যার মধ্যে নিচের ডানদিকের কোণে "BETA" টেক্সট অন্তর্ভুক্ত থাকে। আরও তথ্যের জন্য, বিল্ড ভেরিয়েন্ট কনফিগার করুন দেখুন।

    আউটপুট ডিরেক্টরি অংশে ছবি এবং ফোল্ডারগুলি দেখায় যেখানে সেগুলি প্রোজেক্ট উইন্ডোর প্রোজেক্ট ফাইল ভিউ-এ দেখা যাবে।

  6. সম্পূর্ণ করুন বিকল্পে ক্লিক করুন।

    Image Asset Studio বিভিন্ন ঘনত্বের জন্য drawable ফোল্ডারে ছবি যোগ করে।

কোডে ছবির রিসোর্স উল্লেখ করা

আপনি সাধারণত আপনার কোডে জেনেরিক উপায়ে কোনও ইমেজ রিসোর্সকে রেফার করতে পারেন এবং আপনার অ্যাপ রান করলে, ডিভাইসের উপর নির্ভর করে সংশ্লিষ্ট ছবি অটোমেটিক দেখানো হয়:

  • বেশিরভাগ ক্ষেত্রে, আপনি XML কোডে @drawable অথবা Java কোডে Drawable হিসেবে ইমেজ রিসোর্স উল্লেখ করতে পারেন।

    যেমন, নিম্নলিখিত লেআউট XML কোডটি একটি ImageView-এ ড্রয়েবল দেখায়:

    <ImageView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:src="@drawable/myimage" />
    

    নিম্নলিখিত Java কোডটি Drawable হিসেবে ছবি ফিরিয়ে আনে:

    Kotlin

    val drawable = resources.getDrawable(R.drawable.myimage, theme)

    জাভা

    Resources res = getResources();
    Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

    getResources() পদ্ধতিটি Context ক্লাসে থাকে, যা UI অবজেক্টের ক্ষেত্রে প্রযোজ্য, যেমন অ্যাক্টিভিটি, ফ্র্যাগমেন্ট, লেআউট, ভিউ ইত্যাদি।

  • আপনার অ্যাপ যদি সাপোর্ট লাইব্রেরি ব্যবহার করে, তাহলে আপনি app:srcCompat স্টেটমেন্ট সহ XML কোডে একটি ইমেজ রিসোর্স উল্লেখ করতে পারেন। যেমন:

    <ImageView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:srcCompat="@drawable/myimage" />
    

আপনি শুধুমাত্র মূল থ্রেড থেকে ইমেজ রিসোর্স অ্যাক্সেস করতে পারবেন।

আপনার প্রোজেক্টের res/ ডিরেক্টরিতে ইমেজ রিসোর্স থাকলে, আপনি রিসোর্স আইডি ব্যবহার করে আপনার Java কোড বা XML লেআউট থেকে এটি রেফারেন্স করতে পারবেন। নিম্নলিখিত জাভা কোড drawable/myimage.png রিসোর্স ব্যবহার করার জন্য ImageView সেট করে:

Kotlin

findViewById<ImageView>(R.id.myimageview).apply {
    setImageResource(R.drawable.myimage)
}

জাভা

ImageView imageView = (ImageView) findViewById(R.id.myimageview);
imageView.setImageResource(R.drawable.myimage);

আরও তথ্যের জন্য আপনার অ্যাপ রিসোর্স অ্যাক্সেস করুন দেখুন।