समर्थन लाइब्रेरी के साथ फ़्लोटिंगएशनबटन उदाहरण


129

हाल ही में, मैंने ये पोस्ट पढ़ी:

Android डिज़ाइन समर्थन लाइब्रेरी

Android समर्थन लाइब्रेरी, 22.2.0 संशोधन

FloatingActionButton

लेकिन, उनमें से कोई भी मुझे एक नया बनाने के बारे में विस्तार से उदाहरण नहीं देता है FloatingActionButton। इतना कठिन समझना, मैं यह सवाल पूछता हूं।

क्या कोई मुझे इसके बारे में उदाहरण दे सकता है?

किसी भी मदद की बहुत सराहना की। अग्रिम में धन्यवाद।

संपादित करें

मुझे सिर्फ FloatingActionButton(FAB) पर कुछ मुद्दे मिले , और मैं एक और उत्तर में सुधार करना चाहता हूं। नीचे मेरा जवाब देखें।


जवाबों:


274

तो अपनी build.gradleफ़ाइल में, इसे जोड़ें:

compile 'com.android.support:design:27.1.1'

AndroidX नोट: Google पुराने समर्थन पुस्तकालयों को बदलने के लिए नई AndroidX एक्सटेंशन लाइब्रेरी शुरू कर रहा है । AndroidX का उपयोग करने के लिए, पहले यह सुनिश्चित करgradle.properties लें कि आपने अपनी फ़ाइल को अपडेट कर लिया है , जिसे पहले (या उच्चतर) build.gradleसेट compileSdkVersionकरने के लिए संपादित किया गया है 28, और पिछले compileएक के बजाय निम्नलिखित लाइन का उपयोग करें ।

implementation 'com.google.android.material:material:1.0.0'

इसके बाद, अपने themes.xmlया styles.xmlजो भी हो, सुनिश्चित करें कि आप इसे सेट करते हैं- यह आपके ऐप का उच्चारण रंग है- और आपके FAB का रंग जब तक आप इसे ओवरराइड नहीं करते (नीचे देखें):

        <item name="colorAccent">@color/floating_action_button_color</item>

लेआउट के XML में:

<RelativeLayout
 ...
 xmlns:app="http://schemas.android.com/apk/res-auto">

       <android.support.design.widget.FloatingActionButton
            android:id="@+id/myFAB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

या यदि आप ऊपर AndroidX सामग्री लाइब्रेरी का उपयोग कर रहे हैं, तो आप इसके बजाय इसका उपयोग करेंगे:

<RelativeLayout
 ...
 xmlns:app="http://schemas.android.com/apk/res-auto">

       <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/myFAB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:srcCompat="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

आप डॉक्स में अधिक विकल्प देख सकते हैं (सामग्री डॉक्स यहाँ) ( setRippleColor, इत्यादि), लेकिन एक नोट है:

    app:fabSize="mini"

एक और दिलचस्प एक-- सिर्फ एक FAB की पृष्ठभूमि का रंग बदलने के लिए, जोड़ें:

    app:backgroundTint="#FF0000"

(उदाहरण के लिए इसे लाल में बदलने के लिए) ऊपर XML में।

वैसे भी, गतिविधि के बाद कोड / फ्रैगमेंट का दृश्य फुलाया जाता है ...।

    FloatingActionButton myFab = (FloatingActionButton)  myView.findViewById(R.id.myFAB);
    myFab.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            doMyThing();
        }
    });

टिप्पणियों:

  • यदि आपके पास उन बटनों में से एक है जो "सीम" पर दो विचारों को विभाजित कर रहा है (उदाहरण के लिए एक RelativeLayout का उपयोग करके), के साथ, सीमा को ओवरलैप करने के लिए एक नकारात्मक तल लेआउट मार्जिन, तो आप एक मुद्दा नोटिस करेंगे: FAB का आकार वास्तव में है बहुत अलग है लॉलीपॉप बनाम प्री-लॉलीपॉप पर । जब आप APIs के बीच फ्लिप करते हैं तो आप इसे वास्तव में AS के विज़ुअल लेआउट एडिटर में देख सकते हैं - जब आप प्री-लॉलीपॉप पर स्विच करते हैं तो यह अचानक "पफ्स आउट" हो जाता है। अतिरिक्त आकार का कारण यह प्रतीत होता है कि छाया हर दिशा में दृश्य के आकार का विस्तार करती है। जब आपको अन्य सामान के करीब होने पर FAB के मार्जिन को समायोजित कर रहे हैं, तो आपको इसके लिए ध्यान देना होगा।
  • यदि बहुत अधिक है तो पैडिंग को हटाने या बदलने का एक तरीका है:

    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
        RelativeLayout.LayoutParams p = (RelativeLayout.LayoutParams) myFab.getLayoutParams();
        p.setMargins(0, 0, 0, 0); // get rid of margins since shadow area is now the margin
        myFab.setLayoutParams(p);
    }
  • इसके अलावा, मैं FAB की ऊंचाई को हथियाने, दो से विभाजित करने और मार्जिन ऑफसेट के रूप में उपयोग करके, RelativeLayout में दो क्षेत्रों के बीच "सीम" पर FAB को प्रोग्रामेटिक रूप से रखने जा रहा था। लेकिन myFab.getHeight () शून्य वापस आ गया, यहां तक ​​कि दृश्य फुलाए जाने के बाद भी ऐसा लग रहा था। इसके बजाय मैंने ऊँचाई पाने के लिए ViewTreeObserver का उपयोग किया, इसके बाद ही इसे स्थापित किया गया और फिर स्थिति निर्धारित की। इस टिप को यहां देखें । ऐसा लग रहा था:

        ViewTreeObserver viewTreeObserver = closeButton.getViewTreeObserver();
        if (viewTreeObserver.isAlive()) {
            viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                        closeButton.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                    } else {
                        closeButton.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                    }
                    // not sure the above is equivalent, but that's beside the point for this example...
                    RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) closeButton.getLayoutParams();
                    params.setMargins(0, 0, 16, -closeButton.getHeight() / 2); // (int left, int top, int right, int bottom)
                    closeButton.setLayoutParams(params);
                }
            });
        }

    निश्चित नहीं है कि यह करने का सही तरीका है, लेकिन यह काम करने लगता है।

  • ऐसा लगता है कि आप ऊंचाई कम करके बटन के छाया-स्थान को छोटा बना सकते हैं।
  • यदि आप एक "सीम" पर FAB चाहते हैं, तो आप इसका उपयोग कर सकते हैं layout_anchorऔर layout_anchorGravityयहां एक उदाहरण है:

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_discuss"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"/>

याद रखें कि जब आप स्नैकबार कोऑर्डिनेटरनलआउट में लपेटकर आते हैं, तो आप स्वचालित रूप से उस बटन से बाहर कूद सकते हैं ।

अधिक:


1
ज़रूर। बस android:backgroundTint="#FF0000"XML में FloatingActionBar के उदाहरण के लिए जोड़ें । (जवाब में जोड़ने के लिए)
फेटायर

1
हम्म। ठीक है, मैं इसे ऊपर बदल दूँगा। धन्यवाद! डार्क लियोनहर्ट-- मैंने त्वरित वापसी के बारे में कुछ भी नहीं देखा है, लेकिन स्टैकओवरफ्लो पर कहीं और ऐसा करने के नमूने हैं जो मुझे लगता है कि अभी भी काम करेंगे। इसके अलावा कुछ पुस्तकालय उपलब्ध हैं जो इसे भी करते हैं।
22

1
यह घटक, 22.2.0 के अनुसार, मेरी राय में, उत्पादन तैयार नहीं है। Btw, एक टाइपो हो सकता है, लेकिन spरहस्योद्घाटन संपत्ति में उपयोग नहीं करते । यह होना चाहिएapp:elevation="4dp"
जोआओ सोसा

1
नोट यदि आप एक जोड़ रहे हैं FloatingActionButtonएक करने के लिए CoordinatorLayout, आप उपयोग कर सकते हैं app:layout_anchor="element_with_seam"और app:layout_anchorGravity="bottom|right|end"एक सीम के ऊपर से सही ढंग से फैब स्थिति - देख cheesesquare से activity_detail लेआउट
ianhanniballake

2
@DarkLeonhart - अपने व्यवहार को विस्तारित करके स्क्रॉल पर FAB को दिखाने / छिपाने के मेरे उदाहरण की जाँच करें
atहनुनीबालक han

49

मुझे सिर्फ एफएबी पर कुछ मुद्दे मिले और मैं एक और जवाब बढ़ाना चाहता हूं।


setRippleColor मुद्दा

इस प्रकार, समस्या तब आएगी जब आप प्रोग्राम के माध्यम से रिपल कलर (दबाए गए FAB रंग) को सेट करेंगे setRippleColor। लेकिन, हमारे पास अभी भी इसे सेट करने का एक वैकल्पिक तरीका है, अर्थात कॉल करके:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
ColorStateList rippleColor = ContextCompat.getColorStateList(context, R.color.fab_ripple_color);
fab.setBackgroundTintList(rippleColor);

आपके प्रोजेक्ट में यह संरचना होनी चाहिए:

/res/color/fab_ripple_color.xml

यहाँ छवि विवरण दर्ज करें

और से कोड fab_ripple_color.xmlहै:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/fab_color_pressed" />
    <item android:state_focused="true" android:color="@color/fab_color_pressed" />
    <item android:color="@color/fab_color_normal"/>
</selector>

अंत में, अपने FAB को थोड़ा बदलें:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_add"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    app:fabSize="normal"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:rippleColor="@android:color/transparent"/> <!-- set to transparent color -->

एपीआई स्तर 21 और उच्चतर के लिए, मार्जिन को दाईं ओर और नीचे 24dp पर सेट करें:

...
android:layout_marginRight="24dp"
android:layout_marginBottom="24dp" />

फ्लोटिंगएशनबटन डिजाइन गाइड

जैसा कि आप ऊपर मेरे FAB xml कोड पर देख सकते हैं, मैंने सेट किया है:

        ...
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        ...
  • इन विशेषताओं को सेट करके, आपको layout_marginTopऔर layout_marginRightफिर से (केवल पूर्व-लॉलीपॉप पर) सेट करने की आवश्यकता नहीं है । एंड्रॉइड इसे स्वचालित रूप से स्क्रीन के दाईं ओर स्थित कोने में रखेगा, जो एंड्रॉइड लॉलीपॉप में सामान्य एफएबी के समान है।

        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"

या, आप इसमें उपयोग कर सकते हैं CoordinatorLayout:

        android:layout_gravity="end|bottom"
  • Google से इस गाइड के अनुसार, आपके पास 6dp elevationऔर 12dp होना चाहिए ।pressedTranslationZ

FAB के नियम


5
शामिल अनुसंधान के लिए अंगूठे। प्लस 1 के लिए pressedTranslationZ। मुझे नहीं पता था।
जोआओ सूसा

app: एलिवेशन = "6dp" ऐप: pressedTranslationZ = "12dp" प्री-लॉलीपॉप के लिए ट्रिक करता है, लेकिन मेरा फैब शाब्दिक रूप से लॉलीपॉप पर स्क्रीन के कोने पर है
थियागो

1
आप "pressedTranslationZ" के लिए गलत मान का उपयोग कर रहे हैं। यह दबाए गए राज्य पर उत्थान का मूल्य नहीं है। प्रेसलेवलेशन = ऊँचाई + प्रेसट्रेस्लेशनज़ेड। तो सही मान ऐप है: ऊंचाई = "6dp" ऐप: pressedTranslationZ = "6dp"
e.shishkin

3
वास्तव में आपको मूल्यों app:elevationऔर app:pressedTranslationZमूल्यों को निर्धारित करने की आवश्यकता नहीं है । उनका डिफ़ॉल्ट मान सामग्री डिज़ाइन दिशानिर्देशों में परिभाषित किया गया है। वैसे भी, e.shishkin सही है, मूल्य हैं app:elevation:6dpऔर pressedTranslationZ:6dp। आप इसे com.android.support.design स्रोत कोड
क्रिश्चियन गार्सिया

12

FloatingActionButtonफैली हुई है ImageView। तो, यह ImageViewआपके लेआउट में एक शुरू करने की तरह सरल है । यहाँ एक XML नमूना है।

<android.support.design.widget.FloatingActionButton   xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/somedrawable"
    android:layout_gravity="right|bottom"
    app:borderWidth="0dp"
    app:rippleColor="#ffffff"/>

app:borderWidth="0dp" उन्नयन मुद्दों के लिए एक समाधान के रूप में जोड़ा जाता है।


4

AndroidX उपयोग के लिए पसंद है

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add" />

1

यदि आपने पहले ही सभी पुस्तकालयों को जोड़ दिया है और यह अभी भी काम नहीं करता है:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add" 
/>

के बजाय:

<android.support.design.widget.FloatingActionButton
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:srcCompat="@drawable/ic_add"
 />

और सब ठीक हो जाएगा :)

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.