একটি ভাসমান অ্যাকশন বোতাম তৈরি করুন (এফএবি)

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

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

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

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

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

সংস্করণ সামঞ্জস্য

এই বাস্তবায়নের জন্য আপনার প্রজেক্ট minSDK এপিআই লেভেল 21 বা তার উপরে সেট করা প্রয়োজন।

নির্ভরতা

কোটলিন 

  implementation(platform("androidx.compose:compose-bom:2025.01.01"))

গ্রোভি 

  implementation platform('androidx.compose:compose-bom:2025.01.01')

একটি মৌলিক ফ্লোটিং অ্যাকশন বোতাম তৈরি করুন

একটি সাধারণ ফ্লোটিং অ্যাকশন বোতাম তৈরি করতে, মৌলিক FloatingActionButton কম্পোজেবল ব্যবহার করুন: 

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

ফলাফল

গোলাকার কোণ, একটি ছায়া, এবং একটি 'অ্যাড' আইকন সহ একটি আদর্শ ভাসমান অ্যাকশন বোতাম৷
চিত্র 1. একটি ভাসমান অ্যাকশন বোতাম।

একটি ছোট ভাসমান অ্যাকশন বোতাম তৈরি করুন

একটি ছোট ভাসমান অ্যাকশন বোতাম তৈরি করতে, কম্পোজেবল 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

ফলাফল

SmallFloatingActionButton এর একটি বাস্তবায়ন যাতে একটি 'অ্যাড' আইকন রয়েছে।
চিত্র 2. একটি ছোট ভাসমান অ্যাকশন বোতাম।

একটি বড় ভাসমান অ্যাকশন বোতাম তৈরি করুন

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

নিম্নলিখিত একটি বৃহৎ FAB এর একটি সরল বাস্তবায়ন।

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

ফলাফল

LargeFloatingActionButton এর একটি বাস্তবায়ন যাতে একটি 'অ্যাড' আইকন রয়েছে।
চিত্র 3. একটি বড় ভাসমান অ্যাকশন বোতাম।

একটি বর্ধিত ভাসমান অ্যাকশন বোতাম তৈরি করুন

আপনি 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

ফলাফল

ExtendedFloatingActionButton এর একটি বাস্তবায়ন যা 'বর্ধিত বোতাম' এবং একটি সম্পাদনা আইকন বলে পাঠ্য প্রদর্শন করে।
চিত্র 4. পাঠ্য এবং একটি আইকন উভয় সহ একটি ভাসমান অ্যাকশন বোতাম।

মূল পয়েন্ট

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

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

z## সংগ্রহে এই নির্দেশিকা রয়েছে

এই নির্দেশিকাটি এই কিউরেট করা কুইক গাইড সংগ্রহের অংশ যা বৃহত্তর অ্যান্ড্রয়েড উন্নয়ন লক্ষ্যগুলি কভার করে:

মেটেরিয়াল ডিজাইন ডিজাইন সিস্টেমের উপর ভিত্তি করে কীভাবে কম্পোজেবল ফাংশনগুলি আপনাকে সহজেই সুন্দর UI উপাদান তৈরি করতে সক্ষম করে তা শিখুন।
দ্রুত গাইড সংগ্রহ

প্রশ্ন বা প্রতিক্রিয়া আছে

আমাদের প্রায়শই জিজ্ঞাসিত প্রশ্ন পৃষ্ঠায় যান এবং দ্রুত গাইড সম্পর্কে জানুন বা যোগাযোগ করুন এবং আপনার চিন্তাভাবনা আমাদের জানান।
FAQ-এ যান প্রতিক্রিয়া জানান