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

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

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

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

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 पैरामीटर होते हैं. इनकी मदद से, ज़्यादा जटिल कॉन्टेंट वाला बटन बनाया जा सकता है. साथ ही, इस कॉन्टेंट को ज़रूरत के हिसाब से स्केल भी किया जा सकता है.

नीचे दिए गए स्निपेट में, 'Google पर खरीदें' सुविधा को लागू करने का तरीका बताया गया है 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

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

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

अन्य संसाधन

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