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

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

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

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

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

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

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

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

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

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

सामान्य फ़्लोटिंग ऐक्शन बटन बनाने के लिए, बेसिक कॉन्फ़िगरेशन का इस्तेमाल करें FloatingActionButton कंपोज़ेबल. नीचे दिए गए उदाहरण में, एफ़एबी को बुनियादी तौर पर लागू करना:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}

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

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

छोटा बटन

फ़्लोट करने वाला छोटा ऐक्शन बटन बनाने के लिए, 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.")
    }
}

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

SmallFloatingActionButton का इस्तेमाल करके बनाया गया बटन, जिसमें 'जोड़ें' आइकॉन है.
तीसरी इमेज. फ़्लोट करने वाला छोटा ऐक्शन बटन.

बड़ा बटन

बड़ा फ़्लोटिंग ऐक्शन बटन बनाने के लिए, LargeFloatingActionButton कंपोज़ेबल. यह कंपोज़ेबल नहीं है यह अन्य उदाहरणों से बहुत अलग है कि नतीजे के तौर पर ज़्यादा बड़ा बटन दिख सकता है.

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

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}

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

LastFlotingActionButton को लागू करना है जिसमें 'add' शामिल है आइकन.
चौथी इमेज. बड़ा फ़्लोटिंग ऐक्शन बटन.

बड़ा किया गया बटन

फ़्लोट करने वाले ज़्यादा जटिल ऐक्शन बटन बनाए जा सकते हैं. इसके लिए, 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") },
    )
}

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

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

अन्य संसाधन