একটি ফ্লোটিং অ্যাকশন বোতাম (এফএবি) একটি উচ্চ-জোরযুক্ত বোতাম যা ব্যবহারকারীকে একটি অ্যাপ্লিকেশনে একটি প্রাথমিক ক্রিয়া সম্পাদন করতে দেয়। এটি একটি একক, ফোকাসড অ্যাকশন প্রচার করে যা একজন ব্যবহারকারীর সবচেয়ে সাধারণ পথ এবং এটি সাধারণত স্ক্রিনের নীচে ডানদিকে নোঙর করা পাওয়া যায়।
এই তিনটি ব্যবহারের ক্ষেত্রে বিবেচনা করুন যেখানে আপনি একটি FAB ব্যবহার করতে পারেন:
- নতুন আইটেম তৈরি করুন : একটি নোট নেওয়ার অ্যাপে, একটি FAB দ্রুত একটি নতুন নোট তৈরি করতে ব্যবহার করা যেতে পারে।
- নতুন পরিচিতি যোগ করুন : একটি চ্যাট অ্যাপে, একটি FAB একটি ইন্টারফেস খুলতে পারে যা ব্যবহারকারীকে কথোপকথনে কাউকে যোগ করতে দেয়।
- কেন্দ্রের অবস্থান : একটি মানচিত্র ইন্টারফেসে, একটি FAB ব্যবহারকারীর বর্তমান অবস্থানের উপর মানচিত্রটিকে কেন্দ্রীভূত করতে পারে।
মেটেরিয়াল ডিজাইনে, চার ধরনের FAB আছে:
- FAB : সাধারণ আকারের একটি ভাসমান অ্যাকশন বোতাম।
- ছোট FAB : একটি ছোট ভাসমান অ্যাকশন বোতাম।
- বড় FAB : একটি বড় ভাসমান অ্যাকশন বোতাম।
- এক্সটেন্ডেড FAB : একটি ভাসমান অ্যাকশন বোতাম যাতে শুধু একটি আইকন ছাড়াও আরও কিছু থাকে।
API পৃষ্ঠ
যদিও মেটেরিয়াল ডিজাইনের সাথে সামঞ্জস্যপূর্ণ ভাসমান অ্যাকশন বোতাম তৈরি করতে আপনি ব্যবহার করতে পারেন এমন বেশ কয়েকটি কম্পোজেবল রয়েছে, তবে তাদের পরামিতিগুলি খুব বেশি আলাদা নয়। মূল পরামিতিগুলির মধ্যে আপনাকে নিম্নলিখিতগুলি মনে রাখা উচিত:
-
onClick
: ব্যবহারকারী বোতাম টিপে যখন ফাংশন বলা হয়। -
containerColor
: বোতামের রঙ। -
contentColor
: আইকনের রঙ।
ফ্লোটিং অ্যাকশন বোতাম
একটি সাধারণ ফ্লোটিং অ্যাকশন বোতাম তৈরি করতে, মৌলিক FloatingActionButton
কম্পোজেবল ব্যবহার করুন। নিম্নলিখিত উদাহরণ একটি FAB এর একটি মৌলিক বাস্তবায়ন প্রদর্শন করে:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:
![গোলাকার কোণ, একটি ছায়া, এবং একটি 'অ্যাড' আইকন সহ একটি আদর্শ ভাসমান অ্যাকশন বোতাম৷](https://developer.android.com/static/develop/ui/compose/images/components/fab.png?authuser=0&hl=bn)
ছোট বোতাম
একটি ছোট ভাসমান অ্যাকশন বোতাম তৈরি করতে, কম্পোজেবল 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.") } }
এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:
![SmallFloatingActionButton এর একটি বাস্তবায়ন যাতে একটি 'অ্যাড' আইকন রয়েছে।](https://developer.android.com/static/develop/ui/compose/images/components/fab-small.png?authuser=0&hl=bn)
বড় বোতাম
একটি বড় ভাসমান অ্যাকশন বোতাম তৈরি করতে, কম্পোজেবল LargeFloatingActionButton
ব্যবহার করুন। এই কম্পোজেবলটি অন্যান্য উদাহরণ থেকে উল্লেখযোগ্যভাবে আলাদা নয় কারণ এটি একটি বড় বোতামে পরিণত হয়।
নিম্নলিখিত একটি বৃহৎ FAB এর একটি সরল বাস্তবায়ন।
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:
![LargeFloatingActionButton এর একটি বাস্তবায়ন যাতে একটি 'অ্যাড' আইকন রয়েছে।](https://developer.android.com/static/develop/ui/compose/images/components/fab-large.png?authuser=0&hl=bn)
বর্ধিত বোতাম
আপনি 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") }, ) }
এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:
![ExtendedFloatingActionButton এর একটি বাস্তবায়ন যা 'বর্ধিত বোতাম' এবং একটি সম্পাদনা আইকন বলে পাঠ্য প্রদর্শন করে।](https://developer.android.com/static/develop/ui/compose/images/components/fab-extended.png?authuser=0&hl=bn)