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

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

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

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

Takeaways

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

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

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

    চিত্র 2: সিস্টেম জেসচার ইনসেট। এই এলাকার অধীনে ট্যাপ লক্ষ্য স্থাপন এড়িয়ে চলুন

সিস্টেম বার পিছনে আপনার বিষয়বস্তু আঁকা

এজ-টু-এজ বৈশিষ্ট্যটি অ্যান্ড্রয়েডকে একটি নিমজ্জিত অভিজ্ঞতার জন্য সিস্টেম বারের নীচে UI আঁকতে দেয়, যা ব্যবহারকারীদের কাছ থেকে একটি সাধারণ অনুরোধ।

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

এজ-টু-এজ ব্যবহারের ক্ষেত্রে ডিজাইন করার সময় নিম্নলিখিত ধরণের ইনসেটগুলি সম্পর্কে সচেতন হন:

  • সিস্টেম বার ইনসেটগুলি UI-তে প্রযোজ্য যা উভয়ই ট্যাপযোগ্য এবং এটি সিস্টেম বার দ্বারা দৃশ্যত অস্পষ্ট করা উচিত নয়৷
  • সিস্টেম জেসচার ইনসেটগুলি সিস্টেম দ্বারা ব্যবহৃত অঙ্গভঙ্গি-নেভিগেশনাল এলাকায় প্রযোজ্য হয় যা আপনার অ্যাপের উপর অগ্রাধিকার নেয়।

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

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

চিত্র 3: শীর্ষ অ্যাপ বারের উপরে স্ট্যাটাস বার অঞ্চল হাইলাইট করা হয়েছে

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

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

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

চিত্র 5: স্বচ্ছ সিস্টেম বার সহ একটি এজ-টু-এজ অ্যাপ সবচেয়ে বেশি স্ক্রীন স্পেস ব্যবহার করে আপনার বিষয়বস্তুকে উজ্জ্বল করার জন্য আদর্শ।

এজ-টু-এজ অ্যান্ড্রয়েড 15 এ প্রয়োগ করা হয়েছে যাতে সিস্টেম বারগুলি ডিফল্টরূপে স্বচ্ছ বা স্বচ্ছ থাকে। অ্যান্ড্রয়েডের আগের সংস্করণগুলিতে, সিস্টেম বারগুলি অস্বচ্ছ করে রাখবেন না৷

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

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

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

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

enableEdgeToEdge() কল করে সমস্ত সংস্করণে স্ট্যাটাস বারটি স্বচ্ছ কিনা তা নিশ্চিত করুন। কনট্রাস্টের জন্য স্ট্যাটাস বার আইকনের রং আপডেট করা নিশ্চিত করুন। উদাহরণস্বরূপ, অন্ধকার আইকন তৈরি করতে:

WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

কাটআউট এবং স্ট্যাটাস বার প্রদর্শন করুন

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

ডিসপ্লে কাটআউটগুলিকে কীভাবে সমর্থন করবেন সে সম্পর্কে পড়ুন।

চিত্র 8: প্রদর্শন কাটআউটের উদাহরণ

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

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

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

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

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

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

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

অঙ্গভঙ্গি নেভিগেশন বাস্তবায়ন সম্পর্কে পড়ুন।

চিত্র 9: অঙ্গভঙ্গি হ্যান্ডেল নেভিগেশন বার

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

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

চিত্র 10: তিন বোতামের নেভিগেশন বার

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

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

চিত্র 11: দুই বোতামের নেভিগেশন বার

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

enableEdgeToEdge() কল করে সমস্ত সংস্করণে নেভিগেশন বারটি স্বচ্ছ বা স্বচ্ছ কিনা তা নিশ্চিত করুন৷

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

যদি আপনার অ্যাপের নিচের অ্যাপ বার থাকে, তাহলে Window.setNavigationBarContrastEnforced() কে false সেট করুন যাতে নিচের অ্যাপ বারটি থ্রি-বোতাম নেভিগেশনে ট্রান্সলুসেন্ট স্ক্রিম প্রয়োগ না করে সিস্টেমের নেভিগেশন বারের নিচে আঁকতে পারে।

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

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

    চিত্র 12: গতিশীল রঙ অভিযোজন
  • বোতাম মোড : সিস্টেমটি বোতাম নেভিগেশন বারের পিছনে একটি স্বচ্ছ স্ক্রিম প্রয়োগ করে, যা Window.setNavigationBarContrastEnforced() কে false সেট করে সরানো যেতে পারে।

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

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

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

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

ইমারসিভ মোড

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

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