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

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

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

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

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

• एफ़एबी: सामान्य साइज़ का फ़्लोटिंग ऐक्शन बटन.
• छोटा एफ़एबी: फ़्लोट करने वाला छोटा ऐक्शन बटन.
• बड़ा एफ़एबी: फ़्लोट करने वाला बड़ा ऐक्शन बटन.
• एक्सटेंडेड एफ़एबी: ऐसा फ़्लोटिंग ऐक्शन बटन, जिसमें आइकन.

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

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

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

• 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

यह लागू होने का तरीका इस तरह दिखता है:

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

अन्य संसाधन

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