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

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

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

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

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

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

पहली इमेज. फ़्लोटिंग ऐक्शन बटन के चार टाइप.

एपीआई का प्लैटफ़ॉर्म

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

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

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

सामान्य फ़्लोटिंग ऐक्शन बटन बनाने के लिए, बुनियादी 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

ध्यान दें: अलग-अलग FAB कॉम्पोज़ेबल कई पैरामीटर शेयर करते हैं. इसलिए, इस उदाहरण में बताए गए तरीके का इस्तेमाल करके, दूसरे कॉम्पोज़ेबल के रंगों को पसंद के मुताबिक बनाया जा सकता है.

लागू होने पर यह ऐसा दिखता है:

तीसरी इमेज. एक छोटा फ़्लोटिंग ऐक्शन बटन.

बड़ा बटन

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

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

ध्यान दें: इस उदाहरण में, shape पैरामीटर की वैल्यू के तौर पर CircleShape पास किया गया है. इस वजह से, राउंड बॉर्डर वाले स्क्वेयर के बजाय राउंड बटन दिखता है. आपके पास Shape के किसी भी इंस्टेंस को पास करने का विकल्प है. इसके अलावा, अपने ऐप्लिकेशन में MaterialTheme.shape.large की वैल्यू सेट करके, उसमें बदलाव किया जा सकता है.

@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

लागू होने पर यह ऐसा दिखता है:

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

अन्य संसाधन

• सामान्य बटन
• Material यूज़र इंटरफ़ेस (यूआई) के दस्तावेज़