फ़्लोटिंग ऐक्शन बटन (एफ़एबी) एक ऐसा बटन है जो ज़्यादा फ़ोकस करता है. इसकी मदद से, उपयोगकर्ता किसी ऐप्लिकेशन में मुख्य कार्रवाई करता है. इससे किसी खास कार्रवाई को बढ़ावा दिया जाता है यह सबसे आम रास्ता है, जिसे उपयोगकर्ता अपनाते हैं. आम तौर पर, स्क्रीन के सबसे नीचे दाईं ओर ऐंकर किया जाता है.
इस्तेमाल के इन तीन उदाहरणों में, एफ़एबी का इस्तेमाल किया जा सकता है:
- नया आइटम बनाना: नोट लेने की सुविधा वाले ऐप्लिकेशन में, एफ़एबी का इस्तेमाल फटाफट नया नोट बनाएं.
- नया संपर्क जोड़ना: एफ़एबी, चैट ऐप्लिकेशन में एक ऐसा इंटरफ़ेस खोल सकता है जिससे जब उपयोगकर्ता किसी व्यक्ति को बातचीत में जोड़ता है.
- सेंटर लोकेशन: मैप इंटरफ़ेस में, एफ़एबी मैप को उपयोगकर्ता की मौजूदा जगह की जानकारी.
मटीरियल डिज़ाइन में, एफ़एबी चार तरह के होते हैं:
- एफ़एबी: सामान्य साइज़ का फ़्लोटिंग ऐक्शन बटन.
- छोटा एफ़एबी: फ़्लोट करने वाला छोटा ऐक्शन बटन.
- बड़ा एफ़एबी: फ़्लोट करने वाला बड़ा ऐक्शन बटन.
- एक्सटेंडेड एफ़एबी: ऐसा फ़्लोटिंग ऐक्शन बटन, जिसमें आइकन.
एपीआई प्लैटफ़ॉर्म
फ़्लोट करने वाली कार्रवाई बनाने के लिए, कई कंपोज़ेबल का इस्तेमाल किया जा सकता है मटीरियल डिज़ाइन के साथ संगत बटन, उनके पैरामीटर में ज़्यादा अंतर नहीं होता है. ध्यान रखें कि कुछ मुख्य पैरामीटर यहां दिए गए हैं:
onClick
: जब उपयोगकर्ता बटन दबाता है, तब कॉल किया जाने वाला फ़ंक्शन.containerColor
: बटन का रंग.contentColor
: आइकॉन का रंग.
फ़्लोटिंग ऐक्शन बटन
सामान्य फ़्लोटिंग ऐक्शन बटन बनाने के लिए, बेसिक कॉन्फ़िगरेशन का इस्तेमाल करें
FloatingActionButton
कंपोज़ेबल. नीचे दिए गए उदाहरण में,
एफ़एबी को बुनियादी तौर पर लागू करना:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
यह लागू होने का तरीका इस तरह दिखता है:
![गोल किनारे, शैडो, और 'जोड़ें' वाला स्टैंडर्ड फ़्लोटिंग ऐक्शन बटन आइकन.](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab.png?authuser=7&hl=hi)
छोटा बटन
फ़्लोट करने वाला छोटा ऐक्शन बटन बनाने के लिए,
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.") } }
यह लागू होने का तरीका इस तरह दिखता है:
![छोटे फ़्लोटिंग कार्रवाई बटन को लागू करना जिसमें 'जोड़ें' शामिल हो आइकन.](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-small.png?authuser=7&hl=hi)
बड़ा बटन
बड़ा फ़्लोटिंग ऐक्शन बटन बनाने के लिए,
LargeFloatingActionButton
कंपोज़ेबल. यह कंपोज़ेबल नहीं है
यह अन्य उदाहरणों से बहुत अलग है कि
नतीजे के तौर पर ज़्यादा बड़ा बटन दिख सकता है.
यहां बड़े एफ़एबी को आसानी से लागू किया जा सकता है.
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
यह लागू होने का तरीका इस तरह दिखता है:
![LastFlotingActionButton को लागू करना है जिसमें 'add' शामिल है आइकन.](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-large.png?authuser=7&hl=hi)
बड़ा करने का बटन
फ़्लोट करने वाले ज़्यादा कॉम्प्लेक्स ऐक्शन बटन बनाए जा सकते हैं. इसके लिए,
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 बटन को लागू करने की प्रोसेस, जो 'एक्स्टेंडेड बटन' टेक्स्ट दिखाता है एक आइकॉन दिखेगा.](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-extended.png?authuser=7&hl=hi)