फ़्लोटिंग ऐक्शन बटन (एफ़एबी) बनाना

फ़्लोट करने वाला ऐक्शन बटन (एफ़एबी), एक ऐसा बटन होता है जिस पर ज़्यादा ध्यान दिया जाता है. इससे उपयोगकर्ता, ऐप्लिकेशन में मुख्य कार्रवाई कर सकता है. यह एक ऐसी कार्रवाई को बढ़ावा देता है जिस पर उपयोगकर्ता का ध्यान होता है. आम तौर पर, यह कार्रवाई सबसे सामान्य पाथ होती है. इसे आम तौर पर स्क्रीन के सबसे नीचे दाईं ओर अटैच किया जाता है.

यहां दिए गए इस्तेमाल के तीन उदाहरणों में, एफ़एबी का इस्तेमाल किया जा सकता है:

  • नया आइटम बनाना: नोट लेने वाले ऐप्लिकेशन में, फटाफट नया नोट बनाने के लिए एफ़एबी का इस्तेमाल किया जा सकता है.
  • नया संपर्क जोड़ना: चैट ऐप्लिकेशन में, एफ़एबी से ऐसा इंटरफ़ेस खुल सकता है जिसकी मदद से उपयोगकर्ता किसी व्यक्ति को बातचीत में जोड़ सकता है.
  • जगह को बीच में दिखाना: मैप इंटरफ़ेस में, एफ़एबी की मदद से मैप को उपयोगकर्ता की मौजूदा जगह पर सेंटर किया जा सकता है.

Material Design में, चार तरह के एफ़एबी होते हैं:

वर्शन के साथ काम करना

इसे लागू करने के लिए, ज़रूरी है कि आपके प्रोजेक्ट का minSDK एपीआई लेवल 21 या उससे ज़्यादा पर सेट हो.

डिपेंडेंसी

Kotlin

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

Groovy

  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

नतीजा

गोल कोने, शैडो, और 'जोड़ें' आइकॉन वाला स्टैंडर्ड फ़्लोटिंग ऐक्शन बटन.
पहली इमेज. फ़्लोटिंग ऐक्शन बटन.

छोटा फ़्लोटिंग ऐक्शन बटन बनाना

छोटा फ़्लोटिंग ऐक्शन बटन बनाने के लिए, 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 का इस्तेमाल करके बनाया गया बटन, जिसमें 'जोड़ें' आइकॉन है.
दूसरी इमेज. एक छोटा फ़्लोटिंग ऐक्शन बटन.

बड़ा फ़्लोटिंग ऐक्शन बटन बनाना

बड़ा फ़्लोटिंग ऐक्शन बटन बनाने के लिए, LargeFloatingActionButton कॉम्पोज़ेबल का इस्तेमाल करें. यह कॉम्पोज़ेबल, दूसरे उदाहरणों से काफ़ी अलग नहीं है. हालांकि, इससे बड़ा बटन बनता है.

यहां बड़े फ़्लोटिंग ऐक्शन बटन को लागू करने का आसान तरीका बताया गया है.

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

नतीजा

LargeFloatingActionButton का इस्तेमाल करके, 'जोड़ें' आइकॉन जोड़ा गया है.
तीसरी इमेज. बड़ा फ़्लोटिंग ऐक्शन बटन.

बड़ा किया गया फ़्लोटिंग ऐक्शन बटन बनाना

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 का इस्तेमाल करके बनाया गया बटन, जिसमें 'बड़ा किया गया बटन' टेक्स्ट और बदलाव करने का आइकॉन दिख रहा है.
चौथी इमेज. टेक्स्ट और आइकॉन, दोनों वाला फ़्लोटिंग ऐक्शन बटन.

प्रमुख बिंदु

मटीरियल डिज़ाइन के मुताबिक फ़्लोटिंग ऐक्शन बटन बनाने के लिए, कई कॉम्पोज़ेबल का इस्तेमाल किया जा सकता है. हालांकि, उनके पैरामीटर में काफ़ी अंतर नहीं होता. आपको इन ज़रूरी पैरामीटर का ध्यान रखना चाहिए:

  • onClick: यह फ़ंक्शन तब कॉल किया जाता है, जब उपयोगकर्ता बटन दबाता है.
  • containerColor: बटन का रंग.
  • contentColor: आइकॉन का रंग.

z## ऐसे कलेक्शन जिनमें यह गाइड शामिल है

यह गाइड, चुने गए क्विक गाइड के कलेक्शन का हिस्सा है. इसमें Android डेवलपमेंट के बड़े लक्ष्यों के बारे में बताया गया है:

जानें कि कॉम्पोज़ेबल फ़ंक्शन की मदद से, Material Design डिज़ाइन सिस्टम के आधार पर, आसानी से खूबसूरत यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट कैसे बनाए जा सकते हैं.
क्विक गाइड का कलेक्शन

क्या आपका कोई सवाल है या सुझाव/राय देनी है

अक्सर पूछे जाने वाले सवालों के पेज पर जाएं और क्विक गाइड के बारे में जानें. इसके अलावा, हमसे संपर्क करके अपने सुझाव/राय दें.
अक्सर पूछे जाने वाले सवालों पर जाएं सुझाव/राय दें या शिकायत सबमिट करें