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

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

यहां इस्तेमाल के तीन उदाहरण दिए गए हैं. इनमें आपको FAB का इस्तेमाल करना पड़ सकता है:

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

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

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

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

एपीआई सरफ़ेस

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

• 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 UI के दस्तावेज़