অ্যাপ উইজেট ওভারভিউ

কম্পোজ পদ্ধতিটি চেষ্টা করুন
অ্যান্ড্রয়েডের জন্য Jetpack Compose হলো প্রস্তাবিত UI টুলকিট। Compose-স্টাইলের API ব্যবহার করে কীভাবে উইজেট তৈরি করতে হয় তা শিখুন।

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

এই ডকুমেন্টেশনে আপনি যে বিভিন্ন ধরণের উইজেট তৈরি করতে পারেন এবং অনুসরণীয় ডিজাইন নীতিগুলো সম্পর্কে আলোচনা করা হয়েছে। রিমোট ভিউ এপিআই (Remote View APIs) এবং এক্সএমএল লেআউট (XML layouts) ব্যবহার করে একটি অ্যাপ উইজেট তৈরি করতে, ‘একটি বেসিক উইজেট তৈরি করুন’ (Create a basic widget) দেখুন। কোটলিন (Kotlin) এবং কম্পোজ (Compose) স্টাইলের এপিআই (APIs) ব্যবহার করে একটি উইজেট তৈরি করতে, ‘জেটপ্যাক গ্ল্যান্স’ (Jetpack Glance ) দেখুন।

উইজেটের প্রকারভেদ

আপনার উইজেট পরিকল্পনা করার সময়, আপনি কী ধরনের উইজেট তৈরি করতে চান তা নিয়ে ভাবুন। উইজেটগুলো সাধারণত নিম্নলিখিত বিভাগগুলোর মধ্যে কোনো একটির অন্তর্ভুক্ত হয়:

তথ্য উইজেট

আবহাওয়ার একটি উদাহরণ উইজেট যেখানে টোকিওর আকাশ প্রধানত মেঘলা, তাপমাত্রা ১৪ ডিগ্রি এবং বিকাল ৪টা থেকে সন্ধ্যা ৭টা পর্যন্ত সম্ভাব্য তাপমাত্রা দেখানো হচ্ছে।
চিত্র ১. একটি আবহাওয়া অ্যাপের তথ্য উইজেট।

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

সংগ্রহ উইজেট

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

কালেকশন উইজেটগুলো সাধারণত নিম্নলিখিত ব্যবহারের ক্ষেত্রগুলোর ওপর আলোকপাত করে:

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

নিয়ন্ত্রণ উইজেট

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

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

একটি কন্ট্রোল উইজেটের সাথে ইন্টারঅ্যাক্ট করলে অ্যাপে এর সাথে সম্পর্কিত একটি ডিটেইল ভিউ খুলে যেতে পারে। এটি নির্ভর করে কন্ট্রোল উইজেটটির ফাংশন কোনো ডেটা আউটপুট করে কি না, যেমনটা সার্চ উইজেটের ক্ষেত্রে হয়ে থাকে।

হাইব্রিড উইজেট

একটি সাধারণ মিউজিক অ্যাপ যেখানে 'থাম্বস ডাউন', ব্যাক, প্লে/পজ, ফরওয়ার্ড এবং 'থাম্বস আপ'-এর জন্য বাটন রয়েছে। শিল্পী এবং ট্র্যাক যথাক্রমে 'শিল্পী' এবং 'উদাহরণ সঙ্গীত' হিসাবে তালিকাভুক্ত করা হয়েছে।
চিত্র ৫. একটি মিউজিক অ্যাপ উইজেটের উদাহরণ।

যদিও কিছু উইজেট পূর্ববর্তী বিভাগগুলিতে উল্লিখিত প্রকারগুলির—তথ্য, সংগ্রহ বা নিয়ন্ত্রণ—কোনো একটির প্রতিনিধিত্ব করে, অনেক উইজেটই হলো হাইব্রিড, যা বিভিন্ন প্রকারের উপাদানগুলিকে একত্রিত করে। উদাহরণস্বরূপ, একটি মিউজিক প্লেয়ার উইজেট মূলত একটি নিয়ন্ত্রণ উইজেট, কিন্তু এটি একটি তথ্য উইজেটের মতো ব্যবহারকারীকে দেখায় যে বর্তমানে কোন ট্র্যাকটি বাজছে।

আপনার উইজেট পরিকল্পনা করার সময়, মূল প্রকারগুলোর মধ্যে একটিকে কেন্দ্র করে ডিজাইন করুন এবং প্রয়োজন অনুযায়ী অন্যান্য প্রকারের উপাদান যোগ করুন।

গুগল অ্যাসিস্ট্যান্টের সাথে উইজেট সংযুক্ত করুন

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

উইজেটের সীমাবদ্ধতা

যদিও উইজেটকে 'মিনি অ্যাপ' হিসেবে বোঝা যেতে পারে, আপনার উইজেট ডিজাইন করার আগে এর কিছু সীমাবদ্ধতা সম্পর্কে জানা জরুরি।

অঙ্গভঙ্গি

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

উইজেটগুলির জন্য শুধুমাত্র টাচ এবং ভার্টিকাল সোয়াইপ জেসচার উপলব্ধ রয়েছে।

উপাদান

উইজেটের জন্য উপলব্ধ জেসচারের সীমাবদ্ধতার কারণে, কিছু UI বিল্ডিং ব্লক যা সীমিত জেসচারের উপর নির্ভর করে, তা উইজেটের জন্য উপলব্ধ নয়। সমর্থিত বিল্ডিং ব্লকের সম্পূর্ণ তালিকা এবং লেআউটের সীমাবদ্ধতা সম্পর্কে আরও তথ্যের জন্য, উইজেট লেআউট তৈরি করুন এবং নমনীয় উইজেট লেআউট সরবরাহ করুন দেখুন।

নকশা নির্দেশিকা

হোম স্ক্রিনে একটি আকর্ষণীয়, নমনীয় এবং সামঞ্জস্যপূর্ণ উইজেট অভিজ্ঞতা তৈরি করতে এই ডিজাইন নির্দেশিকাগুলো অনুসরণ করুন।

উইজেটের বিষয়বস্তু

আপনার অ্যাপে উপলব্ধ নতুন ও আকর্ষণীয় বিষয়বস্তুর "বিজ্ঞাপন" দেওয়ার মাধ্যমে ব্যবহারকারীকে অ্যাপের প্রতি আকৃষ্ট করার এটি একটি দারুণ উপায়।

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

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

উইজেটে নেভিগেশন লিঙ্কের জন্য উপযুক্ত বিকল্পগুলো হলো:

  • জেনারেটিভ ফাংশন: এগুলো হলো সেইসব ফাংশন যা ব্যবহারকারীকে কোনো অ্যাপের জন্য নতুন কন্টেন্ট তৈরি করতে দেয়, যেমন একটি নতুন ডকুমেন্ট বা নতুন মেসেজ তৈরি করা।

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

উইজেটের আকার পরিবর্তন

স্ট্যান্ডার্ড গুগল ক্লক উইজেট
চিত্র ৬. আদর্শ গুগল ঘড়ি উইজেট।

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

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

ব্যবহারকারীদের উইজেটের আকার পরিবর্তন করতে দেওয়ার গুরুত্বপূর্ণ সুবিধা রয়েছে:

  • তারা প্রতিটি উইজেটে কী পরিমাণ তথ্য দেখতে চান, তা সূক্ষ্মভাবে নির্ধারণ করতে পারেন।
  • তারা তাদের হোম প্যানেলে উইজেট ও শর্টকাটগুলোর বিন্যাসকে আরও ভালোভাবে প্রভাবিত করতে পারেন।

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

তথ্য উইজেটগুলোর জন্য আরও সুনির্দিষ্ট পরিকল্পনার প্রয়োজন হয়, কারণ এগুলো স্ক্রল করা যায় না এবং সমস্ত বিষয়বস্তুকে একটি নির্দিষ্ট আকারের মধ্যে আঁটাতে হয়। ব্যবহারকারী রিসাইজ অপারেশনের মাধ্যমে যে আকার নির্ধারণ করে দেন, সেই অনুযায়ী আপনাকে অবশ্যই আপনার উইজেটের বিষয়বস্তু এবং লেআউটকে গতিশীলভাবে সামঞ্জস্য করতে হবে।

পরবর্তী উদাহরণে, ব্যবহারকারী একটি আবহাওয়া উইজেটকে তিনটি ধাপে আকার পরিবর্তন করতে পারেন, এবং উইজেটটি বড় হওয়ার সাথে সাথে বর্তমান অবস্থানের আবহাওয়া সম্পর্কে আরও বিশদ তথ্য উন্মোচিত হয়।

ক্ষুদ্রতম ৩x২-গ্রিড আকারের একটি আবহাওয়ার উইজেটের উদাহরণ, যেখানে তালিকাভুক্ত আছে স্থানের নাম (টোকিও), তাপমাত্রা (১৪°), এবং আংশিক মেঘলা আবহাওয়া নির্দেশক প্রতীক।
চিত্র ৭। ৩x২ গ্রিডের 'ছোট' আকারের একটি আবহাওয়া উইজেটের উদাহরণ।


একটি ৫x২ 'মাঝারি' আকারের আবহাওয়ার উইজেটের উদাহরণ, যাতে অন্তর্ভুক্ত রয়েছে:  ৩x২-গ্রিড আকারের সমস্ত UI, সাথে 'বেশিরভাগ মেঘলা' লেবেল এবং বিকাল ৪টা থেকে সন্ধ্যা ৭টা পর্যন্ত তাপমাত্রার পূর্বাভাস।
চিত্র ৮। একটি ৫x২-গ্রিডের 'মাঝারি' আকারের আবহাওয়া উইজেটের উদাহরণ।


একটি ৫x৪ 'বড়' আকারের আবহাওয়ার উইজেটের উদাহরণ, যাতে ৩x২- এবং ৫x২-গ্রিড আকারের সমস্ত UI অন্তর্ভুক্ত রয়েছে, সাথে মঙ্গলবার থেকে শুক্রবার পর্যন্ত আবহাওয়ার পূর্বাভাসও আছে।
চিত্র ৯। ৫x৪-গ্রিডের 'বৃহৎ' আকারের একটি আবহাওয়া উইজেটের উদাহরণ।

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

বিন্যাস বিবেচনা

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

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

ব্যবহারকারীদের দ্বারা উইজেট কনফিগারেশন

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

উইজেট ডিজাইন চেকলিস্ট

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

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

এই ডকুমেন্টেশনে আপনি যে বিভিন্ন ধরণের উইজেট তৈরি করতে পারেন এবং অনুসরণীয় ডিজাইন নীতিগুলো সম্পর্কে আলোচনা করা হয়েছে। রিমোট ভিউ এপিআই (Remote View APIs) এবং এক্সএমএল লেআউট (XML layouts) ব্যবহার করে একটি অ্যাপ উইজেট তৈরি করতে, ‘একটি বেসিক উইজেট তৈরি করুন’ (Create a basic widget) দেখুন। কোটলিন (Kotlin) এবং কম্পোজ (Compose) স্টাইলের এপিআই (APIs) ব্যবহার করে একটি উইজেট তৈরি করতে, ‘জেটপ্যাক গ্ল্যান্স’ (Jetpack Glance ) দেখুন।

উইজেটের প্রকারভেদ

আপনার উইজেট পরিকল্পনা করার সময়, আপনি কী ধরনের উইজেট তৈরি করতে চান তা নিয়ে ভাবুন। উইজেটগুলো সাধারণত নিম্নলিখিত বিভাগগুলোর মধ্যে কোনো একটির অন্তর্ভুক্ত হয়:

তথ্য উইজেট

আবহাওয়ার একটি উদাহরণ উইজেট যেখানে টোকিওর আকাশ প্রধানত মেঘলা, তাপমাত্রা ১৪ ডিগ্রি এবং বিকাল ৪টা থেকে সন্ধ্যা ৭টা পর্যন্ত সম্ভাব্য তাপমাত্রা দেখানো হচ্ছে।
চিত্র ১. একটি আবহাওয়া অ্যাপের তথ্য উইজেট।

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

সংগ্রহ উইজেট

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

কালেকশন উইজেটগুলো সাধারণত নিম্নলিখিত ব্যবহারের ক্ষেত্রগুলোর ওপর আলোকপাত করে:

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

নিয়ন্ত্রণ উইজেট

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

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

একটি কন্ট্রোল উইজেটের সাথে ইন্টারঅ্যাক্ট করলে অ্যাপে এর সাথে সম্পর্কিত একটি ডিটেইল ভিউ খুলে যেতে পারে। এটি নির্ভর করে কন্ট্রোল উইজেটটির ফাংশন কোনো ডেটা আউটপুট করে কি না, যেমনটা সার্চ উইজেটের ক্ষেত্রে হয়ে থাকে।

হাইব্রিড উইজেট

একটি সাধারণ মিউজিক অ্যাপ যেখানে 'থাম্বস ডাউন', ব্যাক, প্লে/পজ, ফরওয়ার্ড এবং 'থাম্বস আপ'-এর জন্য বাটন রয়েছে। শিল্পী এবং ট্র্যাক যথাক্রমে 'শিল্পী' এবং 'উদাহরণ সঙ্গীত' হিসাবে তালিকাভুক্ত করা হয়েছে।
চিত্র ৫. একটি মিউজিক অ্যাপ উইজেটের উদাহরণ।

যদিও কিছু উইজেট পূর্ববর্তী বিভাগগুলিতে উল্লিখিত প্রকারগুলির—তথ্য, সংগ্রহ বা নিয়ন্ত্রণ—কোনো একটির প্রতিনিধিত্ব করে, অনেক উইজেটই হলো হাইব্রিড, যা বিভিন্ন প্রকারের উপাদানগুলিকে একত্রিত করে। উদাহরণস্বরূপ, একটি মিউজিক প্লেয়ার উইজেট মূলত একটি নিয়ন্ত্রণ উইজেট, কিন্তু এটি একটি তথ্য উইজেটের মতো ব্যবহারকারীকে দেখায় যে বর্তমানে কোন ট্র্যাকটি বাজছে।

আপনার উইজেট পরিকল্পনা করার সময়, মূল প্রকারগুলোর মধ্যে একটিকে কেন্দ্র করে ডিজাইন করুন এবং প্রয়োজন অনুযায়ী অন্যান্য প্রকারের উপাদান যোগ করুন।

গুগল অ্যাসিস্ট্যান্টের সাথে উইজেট সংযুক্ত করুন

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

উইজেটের সীমাবদ্ধতা

যদিও উইজেটকে 'মিনি অ্যাপ' হিসেবে বোঝা যেতে পারে, আপনার উইজেট ডিজাইন করার আগে এর কিছু সীমাবদ্ধতা সম্পর্কে জানা জরুরি।

অঙ্গভঙ্গি

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

উইজেটগুলির জন্য শুধুমাত্র টাচ এবং ভার্টিকাল সোয়াইপ জেসচার উপলব্ধ রয়েছে।

উপাদান

উইজেটের জন্য উপলব্ধ জেসচারের সীমাবদ্ধতার কারণে, কিছু UI বিল্ডিং ব্লক যা সীমিত জেসচারের উপর নির্ভর করে, তা উইজেটের জন্য উপলব্ধ নয়। সমর্থিত বিল্ডিং ব্লকের সম্পূর্ণ তালিকা এবং লেআউটের সীমাবদ্ধতা সম্পর্কে আরও তথ্যের জন্য, উইজেট লেআউট তৈরি করুন এবং নমনীয় উইজেট লেআউট সরবরাহ করুন দেখুন।

নকশা নির্দেশিকা

হোম স্ক্রিনে একটি আকর্ষণীয়, নমনীয় এবং সামঞ্জস্যপূর্ণ উইজেট অভিজ্ঞতা তৈরি করতে এই ডিজাইন নির্দেশিকাগুলো অনুসরণ করুন।

উইজেটের বিষয়বস্তু

আপনার অ্যাপে উপলব্ধ নতুন ও আকর্ষণীয় বিষয়বস্তুর "বিজ্ঞাপন" দেওয়ার মাধ্যমে ব্যবহারকারীকে অ্যাপের প্রতি আকৃষ্ট করার এটি একটি দারুণ উপায়।

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

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

উইজেটে নেভিগেশন লিঙ্কের জন্য উপযুক্ত বিকল্পগুলো হলো:

  • জেনারেটিভ ফাংশন: এগুলো হলো সেইসব ফাংশন যা ব্যবহারকারীকে কোনো অ্যাপের জন্য নতুন কন্টেন্ট তৈরি করতে দেয়, যেমন একটি নতুন ডকুমেন্ট বা নতুন মেসেজ তৈরি করা।

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

উইজেটের আকার পরিবর্তন

স্ট্যান্ডার্ড গুগল ক্লক উইজেট
চিত্র ৬. আদর্শ গুগল ঘড়ি উইজেট।

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

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

ব্যবহারকারীদের উইজেটের আকার পরিবর্তন করতে দেওয়ার গুরুত্বপূর্ণ সুবিধা রয়েছে:

  • তারা প্রতিটি উইজেটে কী পরিমাণ তথ্য দেখতে চান, তা সূক্ষ্মভাবে নির্ধারণ করতে পারেন।
  • তারা তাদের হোম প্যানেলে উইজেট ও শর্টকাটগুলোর বিন্যাসকে আরও ভালোভাবে প্রভাবিত করতে পারেন।

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

তথ্য উইজেটগুলোর জন্য আরও সুনির্দিষ্ট পরিকল্পনার প্রয়োজন হয়, কারণ এগুলো স্ক্রল করা যায় না এবং সমস্ত বিষয়বস্তুকে একটি নির্দিষ্ট আকারের মধ্যে আঁটাতে হয়। ব্যবহারকারী রিসাইজ অপারেশনের মাধ্যমে যে আকার নির্ধারণ করে দেন, সেই অনুযায়ী আপনাকে অবশ্যই আপনার উইজেটের বিষয়বস্তু এবং লেআউটকে গতিশীলভাবে সামঞ্জস্য করতে হবে।

পরবর্তী উদাহরণে, ব্যবহারকারী একটি আবহাওয়া উইজেটকে তিনটি ধাপে আকার পরিবর্তন করতে পারেন, এবং উইজেটটি বড় হওয়ার সাথে সাথে বর্তমান অবস্থানের আবহাওয়া সম্পর্কে আরও বিশদ তথ্য উন্মোচিত হয়।

ক্ষুদ্রতম ৩x২-গ্রিড আকারের একটি আবহাওয়ার উইজেটের উদাহরণ, যেখানে তালিকাভুক্ত আছে স্থানের নাম (টোকিও), তাপমাত্রা (১৪°), এবং আংশিক মেঘলা আবহাওয়া নির্দেশক প্রতীক।
চিত্র ৭। ৩x২ গ্রিডের 'ছোট' আকারের একটি আবহাওয়া উইজেটের উদাহরণ।


একটি ৫x২ 'মাঝারি' আকারের আবহাওয়ার উইজেটের উদাহরণ, যাতে অন্তর্ভুক্ত রয়েছে:  ৩x২-গ্রিড আকারের সমস্ত UI, সাথে 'বেশিরভাগ মেঘলা' লেবেল এবং বিকাল ৪টা থেকে সন্ধ্যা ৭টা পর্যন্ত তাপমাত্রার পূর্বাভাস।
চিত্র ৮। একটি ৫x২-গ্রিডের 'মাঝারি' আকারের আবহাওয়া উইজেটের উদাহরণ।


একটি ৫x৪ 'বড়' আকারের আবহাওয়ার উইজেটের উদাহরণ, যাতে ৩x২- এবং ৫x২-গ্রিড আকারের সমস্ত UI অন্তর্ভুক্ত রয়েছে, সাথে মঙ্গলবার থেকে শুক্রবার পর্যন্ত আবহাওয়ার পূর্বাভাসও আছে।
চিত্র ৯। ৫x৪-গ্রিডের 'বৃহৎ' আকারের একটি আবহাওয়া উইজেটের উদাহরণ।

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

বিন্যাস বিবেচনা

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

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

ব্যবহারকারীদের দ্বারা উইজেট কনফিগারেশন

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

উইজেট ডিজাইন চেকলিস্ট

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

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

এই ডকুমেন্টেশনে আপনি যে বিভিন্ন ধরণের উইজেট তৈরি করতে পারেন এবং অনুসরণীয় ডিজাইন নীতিগুলো সম্পর্কে আলোচনা করা হয়েছে। রিমোট ভিউ এপিআই (Remote View APIs) এবং এক্সএমএল লেআউট (XML layouts) ব্যবহার করে একটি অ্যাপ উইজেট তৈরি করতে, ‘একটি বেসিক উইজেট তৈরি করুন’ (Create a basic widget) দেখুন। কোটলিন (Kotlin) এবং কম্পোজ (Compose) স্টাইলের এপিআই (APIs) ব্যবহার করে একটি উইজেট তৈরি করতে, ‘জেটপ্যাক গ্ল্যান্স’ (Jetpack Glance ) দেখুন।

উইজেটের প্রকারভেদ

আপনার উইজেট পরিকল্পনা করার সময়, আপনি কী ধরনের উইজেট তৈরি করতে চান তা নিয়ে ভাবুন। উইজেটগুলো সাধারণত নিম্নলিখিত বিভাগগুলোর মধ্যে কোনো একটির অন্তর্ভুক্ত হয়:

তথ্য উইজেট

আবহাওয়ার একটি উদাহরণ উইজেট যেখানে টোকিওর আকাশ প্রধানত মেঘলা, তাপমাত্রা ১৪ ডিগ্রি এবং বিকাল ৪টা থেকে সন্ধ্যা ৭টা পর্যন্ত সম্ভাব্য তাপমাত্রা দেখানো হচ্ছে।
চিত্র ১. একটি আবহাওয়া অ্যাপের তথ্য উইজেট।

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

সংগ্রহ উইজেট

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

কালেকশন উইজেটগুলো সাধারণত নিম্নলিখিত ব্যবহারের ক্ষেত্রগুলোর ওপর আলোকপাত করে:

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

নিয়ন্ত্রণ উইজেট

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

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

একটি কন্ট্রোল উইজেটের সাথে ইন্টারঅ্যাক্ট করলে অ্যাপে এর সাথে সম্পর্কিত একটি ডিটেইল ভিউ খুলে যেতে পারে। এটি নির্ভর করে কন্ট্রোল উইজেটটির ফাংশন কোনো ডেটা আউটপুট করে কি না, যেমনটা সার্চ উইজেটের ক্ষেত্রে হয়ে থাকে।

হাইব্রিড উইজেট

একটি সাধারণ মিউজিক অ্যাপ যেখানে 'থাম্বস ডাউন', ব্যাক, প্লে/পজ, ফরওয়ার্ড এবং 'থাম্বস আপ'-এর জন্য বাটন রয়েছে। শিল্পী এবং ট্র্যাক যথাক্রমে 'শিল্পী' এবং 'উদাহরণ সঙ্গীত' হিসাবে তালিকাভুক্ত করা হয়েছে।
চিত্র ৫. একটি মিউজিক অ্যাপ উইজেটের উদাহরণ।

যদিও কিছু উইজেট পূর্ববর্তী বিভাগগুলিতে উল্লিখিত প্রকারগুলির—তথ্য, সংগ্রহ বা নিয়ন্ত্রণ—কোনো একটির প্রতিনিধিত্ব করে, অনেক উইজেটই হলো হাইব্রিড, যা বিভিন্ন প্রকারের উপাদানগুলিকে একত্রিত করে। উদাহরণস্বরূপ, একটি মিউজিক প্লেয়ার উইজেট মূলত একটি নিয়ন্ত্রণ উইজেট, কিন্তু এটি একটি তথ্য উইজেটের মতো ব্যবহারকারীকে দেখায় যে বর্তমানে কোন ট্র্যাকটি বাজছে।

আপনার উইজেট পরিকল্পনা করার সময়, মূল প্রকারগুলোর মধ্যে একটিকে কেন্দ্র করে ডিজাইন করুন এবং প্রয়োজন অনুযায়ী অন্যান্য প্রকারের উপাদান যোগ করুন।

গুগল অ্যাসিস্ট্যান্টের সাথে উইজেট সংযুক্ত করুন

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

উইজেটের সীমাবদ্ধতা

যদিও উইজেটকে 'মিনি অ্যাপ' হিসেবে বোঝা যেতে পারে, আপনার উইজেট ডিজাইন করার আগে এর কিছু সীমাবদ্ধতা সম্পর্কে জানা জরুরি।

অঙ্গভঙ্গি

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

উইজেটগুলির জন্য শুধুমাত্র টাচ এবং ভার্টিকাল সোয়াইপ জেসচার উপলব্ধ রয়েছে।

উপাদান

উইজেটের জন্য উপলব্ধ জেসচারের সীমাবদ্ধতার কারণে, কিছু UI বিল্ডিং ব্লক যা সীমিত জেসচারের উপর নির্ভর করে, তা উইজেটের জন্য উপলব্ধ নয়। সমর্থিত বিল্ডিং ব্লকের সম্পূর্ণ তালিকা এবং লেআউটের সীমাবদ্ধতা সম্পর্কে আরও তথ্যের জন্য, উইজেট লেআউট তৈরি করুন এবং নমনীয় উইজেট লেআউট সরবরাহ করুন দেখুন।

নকশা নির্দেশিকা

হোম স্ক্রিনে একটি আকর্ষণীয়, নমনীয় এবং সামঞ্জস্যপূর্ণ উইজেট অভিজ্ঞতা তৈরি করতে এই ডিজাইন নির্দেশিকাগুলো অনুসরণ করুন।

উইজেটের বিষয়বস্তু

আপনার অ্যাপে উপলব্ধ নতুন ও আকর্ষণীয় বিষয়বস্তুর "বিজ্ঞাপন" দেওয়ার মাধ্যমে ব্যবহারকারীকে অ্যাপের প্রতি আকৃষ্ট করার এটি একটি দারুণ উপায়।

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

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

উইজেটে নেভিগেশন লিঙ্কের জন্য উপযুক্ত বিকল্পগুলো হলো:

  • জেনারেটিভ ফাংশন: এগুলো হলো সেইসব ফাংশন যা ব্যবহারকারীকে কোনো অ্যাপের জন্য নতুন কন্টেন্ট তৈরি করতে দেয়, যেমন একটি নতুন ডকুমেন্ট বা নতুন মেসেজ তৈরি করা।

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

উইজেটের আকার পরিবর্তন

স্ট্যান্ডার্ড গুগল ক্লক উইজেট
চিত্র ৬. আদর্শ গুগল ঘড়ি উইজেট।

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

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

ব্যবহারকারীদের উইজেটের আকার পরিবর্তন করতে দেওয়ার গুরুত্বপূর্ণ সুবিধা রয়েছে:

  • তারা প্রতিটি উইজেটে কী পরিমাণ তথ্য দেখতে চান, তা সূক্ষ্মভাবে নির্ধারণ করতে পারেন।
  • তারা তাদের হোম প্যানেলে উইজেট ও শর্টকাটগুলোর বিন্যাসকে আরও ভালোভাবে প্রভাবিত করতে পারেন।

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

তথ্য উইজেটগুলোর জন্য আরও সুনির্দিষ্ট পরিকল্পনার প্রয়োজন হয়, কারণ এগুলো স্ক্রল করা যায় না এবং সমস্ত বিষয়বস্তুকে একটি নির্দিষ্ট আকারের মধ্যে আঁটাতে হয়। ব্যবহারকারী রিসাইজ অপারেশনের মাধ্যমে যে আকার নির্ধারণ করে দেন, সেই অনুযায়ী আপনাকে অবশ্যই আপনার উইজেটের বিষয়বস্তু এবং লেআউটকে গতিশীলভাবে সামঞ্জস্য করতে হবে।

পরবর্তী উদাহরণে, ব্যবহারকারী একটি আবহাওয়া উইজেটকে তিনটি ধাপে আকার পরিবর্তন করতে পারেন, এবং উইজেটটি বড় হওয়ার সাথে সাথে বর্তমান অবস্থানের আবহাওয়া সম্পর্কে আরও বিশদ তথ্য উন্মোচিত হয়।

Example weather widget in the smallest 3x2-grid size, and listing the
            location name (Tokyo), temperature (14°), and symbol indicating
            partially cloudy weather
Figure 7. Example weather widget in a 3x2-grid 'small' size.


Example weather widget in a 5x2 'medium' size, including all of the
            UI from the 3x2-grid size plus the label 'mostly cloudy' and
            forecast temperatures from 4pm through 7pm
Figure 8. Example weather widget in a 5x2-grid 'medium' size.


Example weather widget in a 5x4 'large' size, including all of the UI
            from the 3x2- and 5x2-grid sizes plus a forecast of the weather
            from Tuesday through Friday
Figure 9. Example weather widget in the 5x4-grid 'large' size.

For each widget size, determine how much of your app's information is displayed. For smaller sizes, concentrate on essential information, and then add contextual information as the widget grows horizontally and vertically.

Layout considerations

It's tempting to lay out your widgets according to the dimensions of the placement grid of a device that you develop with. This can be a useful initial approximation, but keep the following points in mind:

  • Planning your widget resizing strategy across "size buckets" rather than variable grid dimensions gives you the most reliable results.
  • The number, size, and spacing of cells can vary widely from device to device. Hence, it is very important that your widget is flexible and can accommodate more or less space than anticipated.
  • As the user resizes a widget, the system responds with a dp size range in which your widget can redraw itself.
  • Starting in Android 12, you can provide more refined size attributes and more flexible layouts. This includes:

Widget configuration by users

Sometimes, the user needs to set up the widget before it can become useful. Think of an email widget where the user needs to select the mail folder before the inbox can be displayed or a static photo widget where the user has to assign a picture from the gallery to be displayed. Android widgets display their configuration choices right after the user drops the widget onto a home screen.

Widget design checklist

  • Focus on small portions of glanceable information on your widget. Expand on the information in your app.
  • Choose the right widget type for your purpose.
  • Plan how the content for your widget adapts to different sizes.
  • Make your widget layout independent of orientation and device by making sure the layout can stretch and contract.
  • Consider whether your widget needs any additional configuration.