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

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

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

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

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

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

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

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

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

• 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

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

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

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

बड़ा बटन

बड़ा फ़्लोटिंग ऐक्शन बटन बनाने के लिए, 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

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

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

अन्य संसाधन

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