ফ্লোটিং অ্যাকশন বোতাম

ফ্লোটিং অ্যাকশন বাটন (FAB) হলো একটি অত্যন্ত গুরুত্বপূর্ণ বাটন যা ব্যবহারকারীকে কোনো অ্যাপ্লিকেশনে একটি প্রধান কাজ সম্পাদন করতে দেয়। এটি একটিমাত্র ও সুনির্দিষ্ট কাজকে উৎসাহিত করে, যা একজন ব্যবহারকারীর জন্য সবচেয়ে সাধারণ পথ হতে পারে এবং এটি সাধারণত স্ক্রিনের নীচের ডানদিকে স্থিরভাবে থাকে।

এই তিনটি ব্যবহারের ক্ষেত্র বিবেচনা করুন যেখানে আপনি একটি FAB ব্যবহার করতে পারেন:

• নতুন আইটেম তৈরি করুন : নোট নেওয়ার কোনো অ্যাপে, দ্রুত একটি নতুন নোট তৈরি করার জন্য FAB ব্যবহার করা যেতে পারে।
• নতুন পরিচিতি যোগ করুন : একটি চ্যাট অ্যাপে, একজন FAB এমন একটি ইন্টারফেস খুলতে পারে যা ব্যবহারকারীকে কথোপকথনে কাউকে যুক্ত করার সুযোগ দেয়।
• কেন্দ্রীয় অবস্থান : একটি মানচিত্র ইন্টারফেসে, একটি FAB ব্যবহারকারীর বর্তমান অবস্থানে মানচিত্রটিকে কেন্দ্র করতে পারে।

ম্যাটেরিয়াল ডিজাইনে চার ধরনের FAB রয়েছে:

• FAB : সাধারণ আকারের একটি ভাসমান অ্যাকশন বাটন।
• স্মল এফএবি : একটি ছোট আকারের ভাসমান অ্যাকশন বাটন।
• লার্জ এফএবি : একটি বড় আকারের ফ্লোটিং অ্যাকশন বাটন।
• এক্সটেন্ডেড এফএবি : একটি ফ্লোটিং অ্যাকশন বাটন যাতে শুধু একটি আইকনের চেয়েও বেশি কিছু থাকে।

এপিআই পৃষ্ঠ

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

• onClick : ব্যবহারকারী বাটনটি চাপলে এই ফাংশনটি কল করা হয়।
• containerColor : বাটনটির রঙ।
• contentColor : আইকনটির রঙ।

ভাসমান অ্যাকশন বোতাম

একটি সাধারণ ফ্লোটিং অ্যাকশন বাটন তৈরি করতে, বেসিক FloatingActionButton কম্পোজেবলটি ব্যবহার করুন। নিম্নলিখিত উদাহরণটি একটি FAB-এর প্রাথমিক বাস্তবায়ন প্রদর্শন করে:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

এই বাস্তবায়নটি নিম্নরূপ:

ছোট বোতাম

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

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.")
    }
}
FloatingActionButton.kt

এই বাস্তবায়নটি নিম্নরূপ:

বড় বোতাম

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

নিম্নে একটি বৃহৎ ফ্যাব্রিকেশন প্ল্যান্টের সরল বাস্তবায়ন দেখানো হলো।

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

এই বাস্তবায়নটি নিম্নরূপ:

বর্ধিত বোতাম

ExtendedFloatingActionButton কম্পোজেবলটি ব্যবহার করে আপনি আরও জটিল ফ্লোটিং অ্যাকশন বাটন তৈরি করতে পারেন। FloatingActionButton সাথে এর মূল পার্থক্য হলো, এতে ডেডিকেটেড icon এবং text প্যারামিটার রয়েছে। এগুলোর সাহায্যে আপনি আরও জটিল কন্টেন্টসহ এমন একটি বাটন তৈরি করতে পারেন, যা কন্টেন্টের সাথে যথাযথভাবে মানিয়ে নেওয়ার জন্য স্কেল হয়।

নিম্নলিখিত কোড স্নিপেটটি ExtendedFloatingActionButton কীভাবে প্রয়োগ করতে হয় তা দেখায়, যেখানে icon এবং text জন্য উদাহরণ মান দেওয়া হয়েছে।

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}
FloatingActionButton.kt

এই বাস্তবায়নটি নিম্নরূপ:

অতিরিক্ত সম্পদ

• সাধারণ বোতাম
• ম্যাটেরিয়াল UI ডক্স