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

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

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

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

Takeaways

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

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

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

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

চিত্র 2. শীর্ষ অ্যাপ বারের উপরে হাইলাইট করা স্ট্যাটাস বার অঞ্চল।

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

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

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

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

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

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

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

এজ-টু-এজ অ্যান্ড্রয়েড 15-এ প্রয়োগ করা হয়েছে যা স্ট্যাটাস বারকে ডিফল্টরূপে স্বচ্ছ করে তোলে। পশ্চাদগামী সামঞ্জস্যের জন্য enableEdgeToEdge() কল করুন।

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

চিত্র 5. আপনার বিষয়বস্তু উন্নত করতে প্রান্ত থেকে প্রান্ত যান। অস্বচ্ছ সিস্টেম বার নেই.

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

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

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

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

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

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

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

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

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

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

চিত্র 7. অঙ্গভঙ্গি হ্যান্ডেল নেভিগেশন বার।

তিন বোতাম নেভিগেশন

থ্রি-বোতাম নেভিগেশন ব্যাক, হোম এবং ওভারভিউ এর জন্য তিনটি বোতাম প্রদান করে।

চিত্র 8. তিন বোতাম নেভিগেশন বার।

অন্যান্য নেভিগেশন বারের বৈচিত্র

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

চিত্র 9. দুই বোতামের নেভিগেশন বার।

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

একটি নেভিগেশন বার শৈলী সেট করুন

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

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

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

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

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

অঙ্গভঙ্গি নেভিগেশন বার স্বচ্ছ রাখুন।
অঙ্গভঙ্গি নেভিগেশন বারে একটি পটভূমি যোগ করুন।

বোতাম মোড

অ্যানড্রয়েড 15 টার্গেট করার পরে বা Activity enableEdgeToEdge কল করার পরে, সিস্টেমটি বোতাম নেভিগেশন বারের পিছনে একটি স্বচ্ছ স্ক্রিম প্রয়োগ করে, যা আপনি Window.setNavigationBarContrastEnforced() কে মিথ্যা সেট করে অপসারণ করতে পারেন৷

চিত্র 11. একটি স্বচ্ছ স্ক্রিম সহ গতিশীল রঙ অভিযোজন।

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

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

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

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

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

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

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

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

ইমারসিভ মোড

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

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