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

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

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

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

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

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

एपीआई सरफ़ेस

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

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

फ़्लोट करने वाला कार्रवाई बटन

सामान्य फ़्लोट करने वाला कार्रवाई बटन बनाने के लिए, basic 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 कंपोज़ेबल का इस्तेमाल करें. यह कंपोज़ेबल, अन्य उदाहरणों से ज़्यादा अलग नहीं है. इसमें सिर्फ़ इतना अंतर है कि इससे बड़ा बटन बनता है.

यहां बड़े साइज़ का एफ़एबी लागू करने का आसान तरीका बताया गया है.

@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 यूज़र इंटरफ़ेस (यूआई) के दस्तावेज़