স্ট্যাটাস বার, ক্যাপশন বার এবং নেভিগেশন বার হলো সিস্টেম বার । এগুলোতে ব্যাটারির লেভেল, সময় এবং নোটিফিকেশন অ্যালার্টের মতো গুরুত্বপূর্ণ তথ্য প্রদর্শিত হয় এবং যেকোনো স্থান থেকে ডিভাইসের সাথে সরাসরি ইন্টারঅ্যাকশনের সুযোগ পাওয়া যায়।
লেআউট, ইনপুট পদ্ধতি বা ডিভাইসের অন্যান্য সক্ষমতা ডিজাইন করার সময়, সিস্টেম বারের উপস্থিতি ও গুরুত্ব সবসময় বিবেচনায় রাখুন।
মূল বিষয়গুলো
বিভিন্ন স্ক্রিন সাইজ এবং ফর্ম ফ্যাক্টরের জন্য আপনার লেআউটে সিস্টেম বার অন্তর্ভুক্ত করুন। UI সেফ জোন, সিস্টেম ইন্টারঅ্যাকশন, ইনপুট পদ্ধতি, ডিসপ্লে কাটআউট, স্ট্যাটাস বার, ক্যাপশন বার, নেভিগেশন বার এবং ডিভাইসের অন্যান্য সক্ষমতাগুলো বিবেচনায় রাখুন।
সিস্টেম স্ট্যাটাস এবং নেভিগেশন বারগুলোকে স্বচ্ছ বা অর্ধস্বচ্ছ রাখুন এবং এই বারগুলোর পেছনের কন্টেন্টকে প্রান্ত থেকে প্রান্ত পর্যন্ত বিস্তৃত করে আঁকুন।
সিস্টেম বারের হস্তক্ষেপ সঠিকভাবে সামলাতে এবং আপনার অ্যাডাপ্টিভ লেআউটে কন্টেন্ট যাতে ঢাকা না পড়ে, তা নিশ্চিত করতে
WindowInsetsব্যবহার করুন।ক্যানোনিকাল লেআউট ব্যবহার করুন, যা স্ক্রিনের জায়গা দক্ষতার সাথে ব্যবহার করে।
স্ট্যাটাস বার
স্ট্যাটাস বারে নোটিফিকেশন আইকন এবং সিস্টেম আইকন থাকে। ব্যবহারকারী স্ট্যাটাস বারটিকে নিচে টেনে নোটিফিকেশন শেড অ্যাক্সেস করেন। স্ট্যাটাস বারের স্টাইল স্বচ্ছ বা অর্ধস্বচ্ছ হতে পারে।
স্ট্যাটাস বার আইকন
প্রসঙ্গ, দিনের সময়, ব্যবহারকারীর সেট করা পছন্দ বা থিম এবং অন্যান্য প্যারামিটারের উপর নির্ভর করে স্ট্যাটাস বারের আইকনগুলো ভিন্নভাবে প্রদর্শিত হতে পারে। আরও তথ্যের জন্য, সিস্টেম বার আইকন দেখুন।
যখন কোনো নোটিফিকেশন আসে, তখন সাধারণত স্ট্যাটাস বারে একটি আইকন দেখা যায়। এটি ব্যবহারকারীকে জানায় যে নোটিফিকেশন ড্রয়ারে দেখার মতো কিছু আছে। এটি আপনার অ্যাপ আইকন অথবা চ্যানেলটির প্রতিনিধিত্বকারী প্রতীক হতে পারে। নোটিফিকেশন ডিজাইন দেখুন।
স্ট্যাটাস বারের স্টাইল সেট করুন
আপনার অ্যাপের কন্টেন্ট যেন পুরো স্ক্রিন জুড়ে থাকে, তা নিশ্চিত করতে স্ট্যাটাস বারটিকে স্বচ্ছ বা অর্ধস্বচ্ছ করুন। এরপর, আপনার সিস্টেম বারের আইকনগুলোর স্টাইল এমনভাবে সেট করুন যাতে আইকনগুলোর সঠিক কনট্রাস্ট থাকে।
অ্যান্ড্রয়েড ১৫-এ এজ-টু-এজ প্রযুক্তি চালু করা হয়েছে, যার ফলে স্ট্যাটাস বার ডিফল্টরূপে স্বচ্ছ থাকে। পূর্ববর্তী সংস্করণের সাথে সামঞ্জস্য রাখতে enableEdgeToEdge() ফাংশনটি কল করুন।
নিচের বাম দিকের ছবিতে, স্ট্যাটাস বারটি স্বচ্ছ এবং TopAppBar এর সবুজ ব্যাকগ্রাউন্ডটি স্ট্যাটাস বারের পিছনে আঁকা হয়েছে।
স্বচ্ছ স্ট্যাটাস বার আদর্শ, যখন স্ট্যাটাস বারের নিচে UI দেখা যায় না অথবা স্ট্যাটাস বারের নিচে কোনো ছবি আঁকা হয়। অর্ধস্বচ্ছ স্ট্যাটাস বার আদর্শ, যখন স্ট্যাটাস বারের নিচে UI স্ক্রল করে। গ্রেডিয়েন্ট সুরক্ষা সম্পর্কে আরও জানতে এজ-টু-এজ ডিজাইন দেখুন।
নেভিগেশন
অ্যান্ড্রয়েড ব্যবহারকারীদের ব্যাক, হোম এবং ওভারভিউ কন্ট্রোল ব্যবহার করে নেভিগেশন নিয়ন্ত্রণ করতে দেয়:
- Back পূর্ববর্তী দৃশ্যে ফিরে যায়।
- হোম আপনাকে অ্যাপ থেকে বের করে ডিভাইসের হোম স্ক্রিনে নিয়ে যায়।
- ওভারভিউতে সক্রিয় অ্যাপ এবং সম্প্রতি বাতিল না করা অ্যাপগুলো দেখানো হয়।
ব্যবহারকারীরা জেসচার নেভিগেশন এবং অ্যাডাপ্টিভ নেভিগেশন সহ বিভিন্ন নেভিগেশন কনফিগারেশন থেকে বেছে নিতে পারেন। সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য, একাধিক ধরণের নেভিগেশনের বিষয়টি বিবেচনা করুন।
অঙ্গভঙ্গি নেভিগেশন
জেসচার নেভিগেশনে ব্যাক, হোম এবং ওভারভিউ-এর জন্য কোনো বাটন ব্যবহার করা হয় না, বরং এটি ব্যবহারের সুবিধার জন্য একটিমাত্র জেসচার হ্যান্ডেল দেখায়। ব্যবহারকারীরা পিছনে যাওয়ার জন্য স্ক্রিনের বাম বা ডান প্রান্ত থেকে এবং হোমে যাওয়ার জন্য নিচ থেকে উপরে সোয়াইপ করে ইন্টারঅ্যাক্ট করেন। উপরে সোয়াইপ করে ধরে রাখলে ওভারভিউ খোলে।
মোবাইল এবং বড় স্ক্রিনের ডিজাইনের জন্য জেসচার নেভিগেশন একটি অধিক প্রসারণযোগ্য নেভিগেশন প্যাটার্ন। সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য, নিম্নলিখিত বিষয়গুলো অনুসরণ করে জেসচার নেভিগেশনের বিষয়টি বিবেচনা করুন:
- প্রান্ত থেকে প্রান্ত পর্যন্ত কন্টেন্ট সমর্থন করা।
- জেসচার নেভিগেশন ইনসেটের নিচে ইন্টারঅ্যাকশন বা টাচ টার্গেট যোগ করা থেকে বিরত থাকুন।
আরও তথ্যের জন্য, ‘জেসচার নেভিগেশনের জন্য সমর্থন যোগ করুন’ দেখুন।
অভিযোজিত নেভিগেশন
অ্যান্ড্রয়েডের আরেকটি প্রচলিত নেভিগেশন প্যাটার্ন হলো ডিসপ্লের উইন্ডো সাইজ ক্লাসের ওপর নির্ভর করে নেভিগেশন রেইল এবং নেভিগেশন বারের মধ্যে পরিবর্তন করা। জেটপ্যাক কম্পোজের অ্যাডাপ্টিভ নেভিগেশন কম্পোনেন্টগুলো একাধিক ফর্ম ফ্যাক্টর সামলাতে পারে এবং একই সাথে সিস্টেম বারগুলোকে নেভিগেশন কম্পোনেন্টের লেআউটে হস্তক্ষেপ করা থেকে বিরত রাখে।
অ্যাডাপ্টিভ লেআউটে, বিবেচনা করুন যে সিস্টেম বারগুলি বিভিন্ন প্রেক্ষাপটে, যেমন কম্প্যাক্ট বা এক্সপান্ডেড উইন্ডো সাইজ অথবা বিভিন্ন ফোল্ডেবল ভঙ্গিতে, কীভাবে ভিন্নভাবে আচরণ করতে পারে বা স্টাইল করা হতে পারে।
আরও তথ্যের জন্য, অ্যাডাপ্টিভ নেভিগেশন তৈরি করুন দেখুন।
নেভিগেশন আইকন
ব্যবহারকারীর সেট করা পছন্দ বা থিমের উপর নির্ভর করে নেভিগেশন আইকনগুলোও ভিন্নভাবে প্রদর্শিত হতে পারে। আরও তথ্যের জন্য, সিস্টেম বার আইকন দেখুন।
একটি নেভিগেশন শৈলী সেট করুন
অ্যান্ড্রয়েড জেসচার নেভিগেশন মোড এবং বাটন মোডগুলিতে ইউজার ইন্টারফেসের ভিজ্যুয়াল সুরক্ষা পরিচালনা করে। সিস্টেমটি ডায়নামিক কালার অ্যাডাপটেশন প্রয়োগ করে, যেখানে সিস্টেম বারের বিষয়বস্তু তার পেছনের কন্টেন্টের উপর ভিত্তি করে রঙ পরিবর্তন করে।
অঙ্গভঙ্গি নেভিগেশন মোড
অ্যান্ড্রয়েড ১৫ টার্গেট করার পর অথবা Activity enableEdgeToEdge কল করার পর, সিস্টেম একটি স্বচ্ছ জেসচার নেভিগেশন বার আঁকে এবং ডাইনামিক কালার অ্যাডাপটেশন প্রয়োগ করে। নিচের উদাহরণে, নেভিগেশন বারের হ্যান্ডেলটি হালকা রঙের কন্টেন্টের উপরে রাখলে গাঢ় রঙে পরিবর্তিত হয় এবং এর বিপরীতটিও ঘটে।
স্বচ্ছ জেসচার নেভিগেশন বার সর্বদা সুপারিশ করা হয়।
করুন
না
বাটন মোড
অ্যান্ড্রয়েড ১৫ টার্গেট করার পর অথবা Activity enableEdgeToEdge কল করার পর, সিস্টেম বাটন নেভিগেশন বারের পেছনে একটি স্বচ্ছ স্ক্রিম প্রয়োগ করে, যা আপনি Window.setNavigationBarContrastEnforced() কে false সেট করে সরিয়ে ফেলতে পারেন।
যখন একটি বটম অ্যাপ বার বা বটম অ্যাপ নেভিগেশন বার থাকে, অথবা যখন UI তিন-বাটন নেভিগেশন বারের নিচে স্ক্রল করে না, তখন স্বচ্ছ তিন-বাটন নেভিগেশন বার ব্যবহার করুন। একটি স্বচ্ছ নেভিগেশন বার পেতে, Window.setNavigationBarContrastEnforced() কে false সেট করুন এবং বটম অ্যাপ বারগুলোকে সিস্টেম নেভিগেশন বারের নিচে আঁকার জন্য প্যাড করুন, যেমনটি চিত্র ৭, ৮, এবং ৯-এ দেখা যাচ্ছে। আরও তথ্যের জন্য সিস্টেম বার সুরক্ষা দেখুন।
কন্টেন্ট স্ক্রল করার জন্য একটি স্বচ্ছ তিন-বোতামযুক্ত নেভিগেশন বার ব্যবহার করুন। স্বচ্ছ নেভিগেশন বারের বিবেচ্য বিষয়গুলো সম্পর্কে আরও জানতে, ‘এজ-টু-এজ ডিজাইন’ দেখুন।
কিবোর্ড এবং নেভিগেশন
প্রতিটি নেভিগেশন টাইপ অন-স্ক্রিন কীবোর্ডের সাথে যথাযথভাবে সাড়া দেয়, যাতে ব্যবহারকারী কীবোর্ডটি বাতিল করা বা এর ধরন পরিবর্তন করার মতো কাজগুলো করতে পারেন। স্ক্রিনের নিচ থেকে কীবোর্ডের উপরে-নিচে স্লাইড করার সাথে অ্যাপের ট্রানজিশনকে সিঙ্ক্রোনাইজ করে একটি মসৃণ রূপান্তর নিশ্চিত করতে, WindowInsetsAnimationCompat ব্যবহার করুন।
লেআউটগুলি
অ্যাডাপ্টিভ লেআউট উপলব্ধ ডিসপ্লে স্পেসকে সর্বোত্তমভাবে ব্যবহার করে। এগুলি কন্টেন্টকে দ্বিতীয় বা তৃতীয় প্যানে সরিয়ে অ্যাপের UI-কে সাজিয়ে তোলে।
অ্যাডাপ্টিভ লেআউট ডিজাইন করার সময়, সিস্টেম বারগুলো আপনার কন্টেন্টের সাথে কীভাবে কাজ করে তা বিবেচনা করুন। বড় স্ক্রিন, ফোল্ডেবল ডিভাইস এবং মাল্টি-উইন্ডো ও ডেস্কটপ উইন্ডোয়িং মোডে থাকা অ্যাপ উইন্ডোগুলোর মতো ডিসপ্লেতে সিস্টেম বারের কারণে আপনার UI যাতে ঢাকা না পড়ে, তা নিশ্চিত করতে WindowInsets ব্যবহার করুন।
যখন আপনার অ্যাপটি প্রান্ত থেকে প্রান্ত পর্যন্ত প্রদর্শিত হয়, তখন যাচাই করুন যে কন্টেন্ট এবং কন্ট্রোলগুলো সিস্টেম UI দ্বারা আবৃত হচ্ছে না। উদাহরণস্বরূপ, যদি নেভিগেশন বার কোনো বাটনকে ঢেকে ফেলে, তাহলে ব্যবহারকারী হয়তো বাটনটিতে ক্লিক করতে পারবেন না।
আরও তথ্যের জন্য, ক্যানোনিকাল লেআউটগুলি দেখুন।
ডিসপ্লে কাটআউট
ডিসপ্লে কাটআউট হলো কিছু ডিভাইসের এমন একটি অংশ যা সামনের সেন্সরগুলোর জন্য জায়গা করে দিতে ডিসপ্লের উপরিভাগের মধ্যে প্রসারিত থাকে। প্রস্তুতকারকের উপর নির্ভর করে ডিসপ্লে কাটআউট ভিন্ন হতে পারে। ডিসপ্লে কাটআউটগুলো কন্টেন্ট, ওরিয়েন্টেশন এবং এজ-টু-এজ-এর সাথে কীভাবে কাজ করবে, তা বিবেচনা করুন।
ইমারসিভ মোড
যখন আপনার একটি ফুল-স্ক্রিন অভিজ্ঞতার প্রয়োজন হয়, যেমন ব্যবহারকারী যখন কোনো সিনেমা দেখছেন, তখন আপনি সিস্টেম বারগুলি লুকাতে পারেন। ব্যবহারকারীকে তখনও ট্যাপ করে সিস্টেম বারগুলি পুনরায় প্রকাশ করতে এবং সিস্টেম কন্ট্রোলগুলি নেভিগেট বা ব্যবহার করতে সক্ষম হতে হবে। আরও তথ্যের জন্য, ইমারসিভ কন্টেন্ট এবং ইমারসিভ মোডের জন্য সিস্টেম বারগুলি লুকান দেখুন।