Android সিস্টেম বার

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

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

ছবি ১. সিস্টেম বারের পিছনে ছবি।

টেকঅ্যাওয়ে

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

  • সিস্টেম স্ট্যাটাস ও নেভিগেশন বার স্বচ্ছ বা আংশিক স্বচ্ছ রাখুন এবং এজ-টু-এজ ভিউ পেতে এইসব বারের পিছনে কন্টেন্ট ড্র করুন।

  • সিস্টেম বার ইন্ট্রুশন সঠিকভাবে ম্যানেজ করতে WindowInsets ব্যবহার করুন এবং নিশ্চিত করুন আপনার কন্টেন্ট যেন অ্যাডাপ্টিভ লেআউটে অস্পষ্ট না হয়ে যায়।

  • ক্যানোনিকাল লেআউট ব্যবহার করুন, যা স্ক্রিনের স্পেস দক্ষতার সাথে ব্যবহার করে।

স্ট্যাটাস বার

স্ট্যাটাস বারে বিজ্ঞপ্তির আইকন ও সিস্টেম আইকন থাকে। ব্যবহারকারী স্ট্যাটাস বার নিচের দিকে টেনে বিজ্ঞপ্তি শেড অ্যাক্সেস করেন। স্ট্যাটাস বার স্টাইল ট্রান্সপারেন্ট বা ট্রান্সলুসেন্ট হতে পারে।

ছবি ২. অ্যাপের উপরের বারের উপরে স্ট্যাটাস বার অঞ্চল হাইলাইট করা হয়েছে।

স্ট্যাটাস বার আইকন

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

ছবি ৩. লাইট ও ডার্ক থিমে স্ট্যাটাস বার আইকন।

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

ছবি ৪. স্ট্যাটাস বারে বিজ্ঞপ্তির আইকন।

স্ট্যাটাস বারের স্টাইল সেট করা

আপনার অ্যাপের কন্টেন্ট যাতে পুরো স্ক্রিন জুড়ে দেখা যায় তা নিশ্চিত করতে স্ট্যাটাস বার স্বচ্ছ বা আংশিক স্বচ্ছ করুন। তারপর, আপনার সিস্টেম বার আইকনের স্টাইল সেট করুন যাতে আইকনগুলির সঠিক কন্ট্রাস্ট থাকে।

Android 15-এ এজ-টু-এজ এনফোর্স করা হয়, যার ফলে স্ট্যাটাস বার ডিফল্ট হিসেবে স্বচ্ছ হয়ে যায়। পুরনো ভার্সনের সাথে মানানসই করার জন্য enableEdgeToEdge() কল করুন।

নিচের বাঁদিকের ছবিতে, স্ট্যাটাস বারটি স্বচ্ছ এবং TopAppBar-এর সবুজ ব্যাকগ্রাউন্ড স্ট্যাটাস বারের পিছনে দেখা যাচ্ছে।

ছবি ৫. আপনার কন্টেন্ট আরও ভালো করতে এজ-টু-এজ করুন। সিস্টেম বার অস্বচ্ছ রাখবেন না।

UI যখন স্ট্যাটাস বারের নিচে দেখা যায় না অথবা স্ট্যাটাস বারের নিচে কোনও ছবি থাকে, তখন স্বচ্ছ স্ট্যাটাস বার আদর্শ। স্ট্যাটাস বারের নিচে UI স্ক্রল করার সময় স্বচ্ছ স্ট্যাটাস বার আদর্শ। গ্রেডিয়েন্ট সুরক্ষা সম্পর্কে আরও জানতে এজ-টু-এজ ডিজাইন দেখুন।

ছবি ৬. সিস্টেম স্ট্যাটাস বারের পিছনে দুটি প্যানে বিস্তৃত ডুয়াল টোন গ্রেডিয়েন্ট সুরক্ষা সহ একটি এজ-টু-এজ অ্যাপ।

Android ব্যবহারকারীদের 'ফিরে যান', 'হোম' ও 'এক নজরে' কন্ট্রোল ব্যবহার করে নেভিগেশন কন্ট্রোল করতে দেয়:

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

ব্যবহারকারীরা জেসচার নেভিগেশন ও অ্যাডাপ্টিভ নেভিগেশন সহ বিভিন্ন নেভিগেশন কনফিগারেশন থেকে বেছে নিতে পারেন। ব্যবহারকারীকে সেরা অভিজ্ঞতা প্রদান করতে, একাধিক ধরনের নেভিগেশন বিবেচনা করুন।

জেসচার নেভিগেশন

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

জেসচার নেভিগেশন হল মোবাইল ও আরও বড় স্ক্রিন জুড়ে ডিজাইন করার জন্য আরও স্কেলেবল নেভিগেশন প্যাটার্ন। ব্যবহারকারীকে সবচেয়ে ভালো অভিজ্ঞতা প্রদান করতে, নিম্নলিখিত কাজগুলি করে জেসচার নেভিগেশন ব্যবহার করুন:

  • এজ-টু-এজ কন্টেন্ট সাপোর্ট করে।
  • জেসচার নেভিগেশন ইনসেটের অধীনে ইন্টার‍্যাকশন বা টাচ টার্গেট যোগ করা এড়িয়ে চলুন।

আরও তথ্যের জন্য, জেসচার নেভিগেশনের জন্য সহায়তা যোগ করুন দেখুন।

ছবি ৭. জেসচার হ্যান্ডেল নেভিগেশন বার।

অ্যাডাপ্টিভ নেভিগেশন

Android-এ আরেকটি সাধারণ নেভিগেশন প্যাটার্ন হল ডিসপ্লের উইন্ডো সাইজ ক্লাসের উপর নির্ভর করে নেভিগেশন রেল এবং নেভিগেশন বারের মধ্যে পরিবর্তন করা। Jetpack Compose-এ অ্যাডাপ্টিভ নেভিগেশন কম্পোনেন্ট একাধিক ফর্ম ফ্যাক্টর ম্যানেজ করে এবং একই সাথে সিস্টেম বারকে নেভিগেশন কম্পোনেন্টের লেআউটে হস্তক্ষেপ করা থেকে বিরত রাখে।

অ্যাডাপ্টিভ লেআউটে, সিস্টেম বার কীভাবে কাজ করতে পারে বা বিভিন্ন প্রসঙ্গে আলাদাভাবে স্টাইল করা যেতে পারে তা বিবেচনা করুন, যেমন কমপ্যাক্ট বা প্রসারিত উইন্ডো সাইজ বা বিভিন্ন ফোল্ডেবল ভঙ্গি।

আরও তথ্যের জন্য, অ্যাডাপ্টিভ নেভিগেশন তৈরি করুন দেখুন।

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

নেভিগেশন স্টাইল সেট করুন

জেসচার নেভিগেশন মোড ও বোতাম মোডে Android ইউজার ইন্টারফেসের ভিজ্যুয়াল সুরক্ষা ম্যানেজ করে। সিস্টেম ডায়নামিক কালার অ্যাডাপ্টেশন প্রয়োগ করে, যার মাধ্যমে সিস্টেম বারের কন্টেন্ট তার পিছনে থাকা কন্টেন্টের উপর ভিত্তি করে রঙ পরিবর্তন করে।

জেসচার নেভিগেশন মোড

Android 15 টার্গেট করার পরে বা Activity-এ enableEdgeToEdge কল করার পরে, সিস্টেম একটি স্বচ্ছ জেসচার নেভিগেশন বার আঁকে এবং ডায়নামিক কালার অ্যাডাপ্টেশন প্রয়োগ করে। নিচের উদাহরণে, নেভিগেশন বারের হ্যান্ডেলটি হালকা রঙের কন্টেন্টের উপরে থাকলে ডার্ক রঙে পরিবর্তিত হয় এবং এর উল্টোটাও হয়।

ছবি ৮. ডায়নামিক কালার অ্যাডাপ্টেশন।

ট্রান্সপারেন্ট জেসচার নেভিগেশন বার সবসময় সাজেস্ট করা হয়।

জেসচার নেভিগেশন বার স্বচ্ছ রাখুন।
জেসচার নেভিগেশন বারে ব্যাকগ্রাউন্ড যোগ করুন।

বোতামের মোড

Android 15 টার্গেট করার পরে বা Activity-এ enableEdgeToEdge কল করার পরে, সিস্টেম বোতাম নেভিগেশন বারের পিছনে একটি ট্রান্সলুসেন্ট স্ক্রিম প্রয়োগ করে, যা আপনি Window.setNavigationBarContrastEnforced()-কে false-এ সেট করে সরাতে পারবেন।

ছবি ৯. ট্রান্সপারেন্ট স্ক্রিম সহ ডায়নামিক কালার অ্যাডাপ্টেশন।

অ্যাপের নিচে বার বা অ্যাপের নিচে নেভিগেশন বার থাকলে অথবা UI তিন-বোতাম নেভিগেশন বারের নিচে স্ক্রল না করলে, স্বচ্ছ তিন-বোতাম নেভিগেশন বার ব্যবহার করুন। স্বচ্ছ নেভিগেশন বার পেতে, Window.setNavigationBarContrastEnforced()-কে false হিসেবে সেট করুন এবং সিস্টেম নেভিগেশন বারের নিচে ড্র করার জন্য নিচের অ্যাপ বার প্যাড করুন, যেমনটি ছবি ৭, ৮ ও ৯-এ দেখানো হয়েছে। আরও তথ্যের জন্য সিস্টেম বার সুরক্ষা দেখুন।

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

কীবোর্ড ও নেভিগেশন

ছবি ১০. নেভিগেশন বার সহ স্ক্রিনের কীবোর্ড।

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

লেআউট

অ্যাডাপ্টিভ লেআউট উপলভ্য ডিসপ্লে স্পেস অপ্টিমাইজ করে। তারা সেকেন্ডারি বা টারশিয়ারি প্যানে কন্টেন্ট সরিয়ে অ্যাপ UI সাজায়।

অ্যাডাপ্টিভ লেআউট ডিজাইন করার সময়, সিস্টেম বার কীভাবে আপনার কন্টেন্টের সাথে ইন্টার‍্যাক্ট করে তা বিবেচনা করুন। WindowInsets ব্যবহার করে নিশ্চিত করুন যে আপনার UI সিস্টেম বারের মাধ্যমে অস্পষ্ট হয়ে যায়নি যেমন বড় স্ক্রিন, ফোল্ডেবল এবং মাল্টি-উইন্ডো ও ডেস্কটপ উইন্ডোইং মোডে অ্যাপ উইন্ডো।

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

আরও তথ্যের জন্য, ক্যানোনিকাল লেআউট দেখুন।

ডিসপ্লে কাট-আউট

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

ছবি ১১. ডিসপ্লে কাট-আউটের উদাহরণ।

ইমারসিভ মোড

ছবি ১২. ইমারসিভ মোড ল্যান্ডস্কেপ-ওরিয়েন্টেড মোবাইল ডিভাইসে ফুল-স্ক্রিন অভিজ্ঞতা দেখায়।

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