অ্যাপ বার

অ্যাপ বার হল কন্টেনার যা ব্যবহারকারীকে মূল ফিচার ও নেভিগেশন আইটেম অ্যাক্সেস করতে দেয়। অ্যাপ বার দুই ধরনের হয়, টপ অ্যাপ বার ও বটম অ্যাপ বার। সেগুলির চেহারা ও উদ্দেশ্য নিচে দেওয়া হল:

ধরন

কেমন দেখাবে

উদ্দেশ্য

স্ক্রিনের উপরের দিকে থাকা অ্যাপ বার

স্ক্রিনের উপরের দিকে।

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

নিচের অ্যাপ বার

স্ক্রিনের নিচের দিকে।

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

উপরে ও নিচে অ্যাপ বারের উদাহরণ।
ছবি ১. একটি উপরের অ্যাপ বার (বাঁদিকে) এবং একটি নিচের অ্যাপ বার (ডানদিকে)।

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

স্ক্রিনের উপরের দিকে থাকা অ্যাপ বার

নিচের সারণীতে চার ধরনের টপ অ্যাপ বার সম্পর্কে বলা হয়েছে:

ধরন

উদাহরণ

ছোট: এমন স্ক্রিনের জন্য যেগুলিতে খুব বেশি নেভিগেশন বা অ্যাকশনের প্রয়োজন হয় না।

ছোট টপ অ্যাপ বার

সেন্টার অ্যালাইন করা: যেসব স্ক্রিনে একটিই প্রাথমিক অ্যাকশন থাকে।

মাঝখানে অ্যালাইন করা উপরের অ্যাপ বার

মাঝারি: যেসব স্ক্রিনে মাঝারি পরিমাণে নেভিগেশন ও অ্যাকশন প্রয়োজন।

মাঝারি টপ অ্যাপ বার

বড়: যেসব স্ক্রিনে অনেক নেভিগেশন ও অ্যাকশন প্রয়োজন।

বড় টপ অ্যাপ বার

API সারফেস

চারটি আলাদা আলাদা টপ অ্যাপ বার ইমপ্লিমেন্ট করার জন্য বিভিন্ন কম্পোজ করার উপযুক্ত আইটেমগুলি প্রায় একই রকম। এগুলি বেশ কিছু গুরুত্বপূর্ণ প্যারামিটার শেয়ার করে:

  • title: অ্যাপ বার জুড়ে যে টেক্সট দেখা যায়।
  • navigationIcon: নেভিগেশনের জন্য প্রাথমিক আইকন। অ্যাপ বারের বাঁদিকে দেখা যায়।
  • actions: ব্যবহারকারীকে মূল অ্যাকশনে অ্যাক্সেস প্রদান করে এমন আইকন। এগুলি অ্যাপ বারের ডানদিকে দেখানো হয়।
  • scrollBehavior: স্ক্যাফোল্ডের ইন্টার্নাল কন্টেন্ট স্ক্রল করার সময় টপ অ্যাপ বার কীভাবে প্রতিক্রিয়া জানাবে তা নির্ধারণ করে।
  • colors: অ্যাপ বার কীভাবে দেখা যাবে তা নির্ধারণ করে।

স্ক্রল করার আচরণ

ব্যবহারকারী প্রদত্ত স্ক্যাফোল্ডের ভেতরের কন্টেন্ট স্ক্রল করলে অ্যাপ বার কীভাবে প্রতিক্রিয়া জানাবে তা আপনি নিয়ন্ত্রণ করতে পারবেন। এটি করতে, TopAppBarScrollBehavior-এর একটি ইনস্ট্যান্স তৈরি করুন এবং scrollBehavior প্যারামিটারের জন্য আপনার টপ অ্যাপ বারে এটি পাস করুন।

TopAppBarScrollBehavior তিন ধরনের হয়। এগুলি হল:

  • enterAlwaysScrollBehavior: ব্যবহারকারী যখন স্ক্যাফোল্ডের ভেতরের কন্টেন্ট উপরে টানেন, তখন সবচেয়ে উপরের অ্যাপ বারটি ছোট হয়ে যায়। ব্যবহারকারী ভেতরের কন্টেন্ট নিচের দিকে টানতে শুরু করলে অ্যাপ বার বড় হতে থাকে।
  • exitUntilCollapsedScrollBehavior: enterAlwaysScrollBehavior-এর মতো, তবে অ্যাপ বারটি তখনই প্রসারিত হয় যখন ব্যবহারকারী কন্টেন্টটি সম্পূর্ণভাবে নিচের দিকে টানেন।
  • pinnedScrollBehavior: অ্যাপ বারটি একই জায়গায় থাকে এবং স্ক্রল করলে সেটি সরে যায় না।

নিচে দেওয়া উদাহরণে এইসব বিকল্পের মধ্যে কয়েকটি প্রয়োগ করা হয়েছে।

উদাহরণ

নিচের বিভাগে চার ধরনের টপ অ্যাপ বারের প্রয়োগ সম্পর্কে বলা হয়েছে। এর মধ্যে স্ক্রল করার আচরণ কীভাবে নিয়ন্ত্রণ করবেন তার বিভিন্ন উদাহরণও রয়েছে।

ছোট

ছোট টপ অ্যাপ বার তৈরি করতে, TopAppBar কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করুন। নিচে দেখানো উদাহরণে একটি সাধারণ টপ অ্যাপ বার প্রয়োগ করা হয়েছে যাতে শুধুমাত্র শীর্ষক রয়েছে।

নিচের উদাহরণে TopAppBar-এর জন্য কোনও ভ্যালু scrollBehavior দেওয়া হয়নি এবং সেই জন্য এটি ভিতরের কন্টেন্ট স্ক্রল করার ব্যাপারে কোনও প্রতিক্রিয়া জানায় না।

@Composable
fun SmallTopAppBarExample() {
    Scaffold(
        topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Small Top App Bar")
                }
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}

এই প্রয়োগটি নিম্নলিখিতভাবে দেখা যায়:

ছোট টপ অ্যাপ বারের উদাহরণ।
ছবি ২. ছোট টপ অ্যাপ বার।

মাঝখানে সারিবদ্ধ করা

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

এই উদাহরণে enterAlwaysScrollBehavior() ব্যবহার করে scrollBehavior-এর জন্য ভ্যালু পাওয়া যায়। এই কারণে, ব্যবহারকারী যখন স্ক্যাফোল্ডের ভিতরের কন্টেন্ট স্ক্রল করেন তখন বারটি ছোট হয়ে যায়।

@Composable
fun CenterAlignedTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Centered Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior,
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}

এই প্রয়োগটি নিম্নলিখিতভাবে দেখা যায়:

সেন্টার-অ্যালাইন করা টপ অ্যাপ বারের উদাহরণ।
ছবি ৩. সেন্টার-অ্যালাইন করা টপ অ্যাপ বার।

মাঝারি

মাঝারি টপ অ্যাপ বার, যেকোনও অতিরিক্ত আইকনের নিচে শীর্ষককে প্লেস করে। একটি তৈরি করতে, MediumTopAppBar কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করুন।

আগের স্নিপেটের মতো, এই উদাহরণে scrollBehavior-এর জন্য পাস করা ভ্যালু পেতে enterAlwaysScrollBehavior() ব্যবহার করা হয়েছে।

@Composable
fun MediumTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            MediumTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Medium Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}

এই প্রয়োগটি নিম্নলিখিতভাবে দেখা যায়, যেখানে enterAlwaysScrollBehavior() থেকে স্ক্রল বিহেভিয়ার কীভাবে দেখা যায় তা ডেমোনস্ট্রেট করা হয়েছে:

ছবি ৪. মাঝারি সাইজের টপ অ্যাপ বার যা ব্যবহারকারী উপরের দিকে স্ক্রল করলে ছোট হয়ে যায় এবং নিচের দিকে স্ক্রল করলে বড় হয়ে যায়।

বড়

বড় টপ অ্যাপ বারটি মাঝারি সাইজের মতোই, তবে শীর্ষক ও আইকনের মধ্যে প্যাডিং বেশি থাকে এবং এটি সামগ্রিকভাবে স্ক্রিনে আরও বেশি জায়গা নেয়। একটি তৈরি করতে, LargeTopAppBar কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করুন।

আগের স্নিপেটের মতো, এই উদাহরণে exitUntilCollapsedScrollBehavior() ব্যবহার করে সেই ভ্যালু পাওয়া হয়েছে যা scrollBehavior-এর জন্য পাস করা হয়েছে। যেমন, ব্যবহারকারী স্ক্যাফোল্ডের ভেতরের কন্টেন্ট স্ক্রল করলে বারটি ছোট হয়ে যায়, কিন্তু ব্যবহারকারী ভেতরের কন্টেন্টের শেষ পর্যন্ত স্ক্রল করলে সেটি আবার বড় হয়ে যায়।

@Composable
fun LargeTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            LargeTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Large Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}

এই প্রয়োগটি নিম্নলিখিতভাবে দেখা যায়:

অ্যাপের একটি স্ক্রিনে নিচে অ্যাপ বার আছে, যার বাঁদিকে চারটি অ্যাকশন আইকন এবং ডানদিকে একটি ফ্লোটিং অ্যাকশন বোতাম আছে।
ছবি ৫. বড় টপ অ্যাপ বারের প্রয়োগের একটি উদাহরণ।

নিচের অ্যাপ বার

নিচের অ্যাপ বার তৈরি করতে, BottomAppBar কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করুন। এই কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করা এই পৃষ্ঠার আগের বিভাগে বর্ণিত টপ অ্যাপ বার কম্পোজ করার উপযুক্ত আইটেমের মতোই। আপনি নিম্নলিখিত মূল প্যারামিটারের জন্য কম্পোজ করার উপযুক্ত ফাংশন পাস করেন:

  • actions: বারের বাঁদিকে আইকনের একটি সিরিজ দেখা যায়। এগুলি সাধারণত প্রদত্ত স্ক্রিনের জন্য মূল অ্যাকশন বা নেভিগেশন আইটেম।
  • floatingActionButton: বারের ডানদিকে দেখানো ফ্লোটিং অ্যাকশন বোতাম।

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}

এই প্রয়োগটি নিম্নলিখিতভাবে দেখা যায়:

অ্যাপের একটি স্ক্রিনে নিচে অ্যাপ বার আছে, যার বাঁদিকে চারটি অ্যাকশন আইকন এবং ডানদিকে একটি ফ্লোটিং অ্যাকশন বোতাম আছে।
ছবি ৬. নিচের অ্যাপ বারের প্রয়োগের একটি উদাহরণ।
কাস্টম বটম অ্যাপ বার তৈরি করতে পারবেন।

অতিরিক্ত রিসোর্স