অ্যান্ড্রয়েড সিস্টেম বার

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

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

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

টেকওয়েস

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

  • সিস্টেমের অবস্থা এবং নেভিগেশন বারগুলিকে স্বচ্ছ বা স্বচ্ছ রাখুন এবং এজ-টু-এজ করার জন্য এই বারগুলির পিছনে কন্টেন্ট আঁকুন।

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

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

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

স্ট্যাটাস বারে নোটিফিকেশন আইকন এবং সিস্টেম আইকন থাকে। ব্যবহারকারী নোটিফিকেশন শেড অ্যাক্সেস করার জন্য স্ট্যাটাস বারটি টেনে তার সাথে ইন্টারঅ্যাক্ট করে। স্ট্যাটাস বারের স্টাইলগুলি স্বচ্ছ বা স্বচ্ছ হতে পারে।

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

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

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

চিত্র ৩। হালকা এবং অন্ধকার থিমে স্ট্যাটাস বার আইকন।

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

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

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

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

অ্যান্ড্রয়েড ১৫-তে এজ-টু-এজ প্রয়োগ করা হয়েছে যাতে স্ট্যাটাস বারটি ডিফল্টভাবে স্বচ্ছ থাকে। ব্যাকওয়ার্ড সামঞ্জস্যের জন্য enableEdgeToEdge() কল করুন।

নিচের বাম দিকের ছবিতে, স্ট্যাটাস বারটি স্বচ্ছ এবং TopAppBar এর সবুজ পটভূমি স্ট্যাটাস বারের পিছনে আঁকা।

চিত্র ৫। আপনার কন্টেন্ট উন্নত করতে একের পর এক কাজ করুন। অস্বচ্ছ সিস্টেম বার রাখবেন না।

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

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

অ্যান্ড্রয়েড ব্যবহারকারীদের ব্যাক, হোম এবং ওভারভিউ নিয়ন্ত্রণ ব্যবহার করে নেভিগেশন নিয়ন্ত্রণ করতে দেয়:

  • পূর্ববর্তী দৃশ্যে ফিরে আসে।
  • অ্যাপ থেকে হোম স্ক্রিনে স্থানান্তরিত হয়।
  • ওভারভিউতে সক্রিয় অ্যাপ এবং সাম্প্রতিক বাতিল করা অ্যাপগুলি দেখানো হয়।

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

অঙ্গভঙ্গি নেভিগেশন

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

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

  • প্রান্ত থেকে প্রান্তের কন্টেন্ট সমর্থন করে।
  • অঙ্গভঙ্গি নেভিগেশন ইনসেটের অধীনে ইন্টারঅ্যাকশন বা স্পর্শ লক্ষ্য যোগ করা এড়িয়ে চলুন।

আরও তথ্যের জন্য, অঙ্গভঙ্গি নেভিগেশনের জন্য সমর্থন যোগ করুন দেখুন।

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

অভিযোজিত নেভিগেশন

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

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

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

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

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

অ্যান্ড্রয়েড জেসচার নেভিগেশন মোড এবং বোতাম মোডে ইউজার ইন্টারফেসের ভিজ্যুয়াল সুরক্ষা পরিচালনা করে। সিস্টেমটি গতিশীল রঙ অভিযোজন প্রয়োগ করে, যেখানে সিস্টেম বারের বিষয়বস্তু তাদের পিছনের বিষয়বস্তুর উপর ভিত্তি করে রঙ পরিবর্তন করে।

অঙ্গভঙ্গি নেভিগেশন মোড

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

চিত্র ৮। গতিশীল রঙের অভিযোজন।

স্বচ্ছ অঙ্গভঙ্গি নেভিগেশন বারগুলি সর্বদা সুপারিশ করা হয়।

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

বোতাম মোড

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

চিত্র ৯। স্বচ্ছ স্ক্রিম সহ গতিশীল রঙের অভিযোজন।

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

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

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

চিত্র ১০। নেভিগেশন বার সহ অন-স্ক্রিন কীবোর্ড।

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

লেআউট

অভিযোজিত লেআউটগুলি উপলব্ধ প্রদর্শন স্থানকে অপ্টিমাইজ করে। তারা কন্টেন্টকে সেকেন্ডারি বা টারশিয়ারি প্যানে স্থানান্তর করে অ্যাপ UI সংগঠিত করে।

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

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

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

কাটআউটগুলি প্রদর্শন করুন

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

চিত্র ১১। ডিসপ্লে কাটআউটের উদাহরণ।

ইমারসিভ মোড

চিত্র ১২। একটি ল্যান্ডস্কেপ-ভিত্তিক মোবাইল ডিভাইসে পূর্ণ-স্ক্রিন অভিজ্ঞতা দেখানো ইমারসিভ মোড।

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