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

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

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

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

मटीरियल डिज़ाइन में, चार तरह के एफ़एबी होते हैं:

  • एफ़एबी: यह सामान्य साइज़ का फ़्लोटिंग ऐक्शन बटन होता है.
  • छोटा एफ़एबी: यह फ़्लोटिंग ऐक्शन बटन का छोटा वर्शन होता है.
  • बड़ा एफ़एबी: यह फ़्लोटिंग ऐक्शन बटन का बड़ा वर्शन होता है.
  • एक्सटेंडेड एफ़एबी: यह फ़्लोटिंग ऐक्शन बटन होता है. इसमें सिर्फ़ आइकॉन के अलावा और भी चीज़ें होती हैं.

वर्शन के साथ काम करने की सुविधा

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

डिपेंडेंसी

Kotlin

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

ग्रूवी

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

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

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

प्रमुख बिंदु

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

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

z## इस गाइड को शामिल करने वाले कलेक्शन

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

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

कोई सवाल पूछना या सुझाव/राय देना

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