AppCompat v21 का उपयोग करके Android में एक फ्लोटिंग एक्शन बटन (FAB) कैसे बनाएं?

Question

मैं Google कैलेंडर की तरह फ्लोटिंग एक्शन बटन (आइटमों को सूची में जोड़ने के लिए) बनाना चाहूंगा, प्री-लॉलीपॉप एंड्रॉइड वर्जन (5.0 से पहले) के साथ संगतता बनाए रखना।

मैंने यह लेआउट बनाया:

गतिविधि main_activity.xml:

<LinearLayout ... >

     <include
         layout="@layout/toolbar"/>

     <RelativeLayout ... >

     <!-- My rest of the layout -->

          <!-- Floating action button -->
          <ImageButton style="@style/AppTheme"
                     android:layout_width="60dp"
                     android:layout_height="60dp"
                     android:text="New Button"
                     android:id="@+id/button"
                     android:src="@drawable/ic_fab"
                     android:background="@drawable/fab"
                     android:layout_alignParentBottom="true"
                     android:layout_alignParentRight="true"
                     android:layout_marginBottom="24dp"
                     android:layout_marginRight="24dp"/>

     </RelativeLayout>

 </LinearLayout>

पीने योग्य fab.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <solid android:color="#ffa48bc0"/>
</shape>

शैली शैली। xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#ff1d79b1</item>
        <item name="colorPrimaryDark">#ff084d95</item>
    </style>
</resources>

परिणाम समान है, लेकिन छायांकन नहीं है, सामग्री डिजाइन की एक विशेषता:

कैलेंडर का फ़्लोटिंग एक्शन बटन:

मेरे ऐप का फ़्लोटिंग एक्शन बटन:

मैं अपने बटन में छायांकन कैसे जोड़ सकता हूं?

मैंने पहले ही विशेषता ऊंचाई का उपयोग किया है, लेकिन काम नहीं करता है

Comments

उन्नयन API लॉलीपॉप है, क्या आपने लॉलीपॉप डिवाइस पर कोशिश की थी?

— मार्क प्लानो-लेसे

शायद यह समय है जब आप दिए गए उत्तरों में से एक को स्वीकार करते हैं।

— फैंटमैक्सएक्स

वास्तव में, मेरे 4.4.2 सैमसंग गैलेक्सी एस III पर, छाया वहां है, एपकॉम के लिए धन्यवाद।

— फ्रैक्टलबाक जूल

Answer 1

अब अपना FAB बनाने की आवश्यकता नहीं है और न ही किसी तीसरे पक्ष के पुस्तकालय का उपयोग करने की आवश्यकता है, इसे AppCompat 22 में शामिल किया गया था।

https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

अपनी ढाल-फ़ाइल में डिज़ाइन नामक नई सहायता लाइब्रेरी जोड़ें:

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

... और आप जाने के लिए अच्छे हैं:

<android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_happy_image" />

Comments

आप पृष्ठभूमि का रंग कैसे बदलते हैं?

— १२:३५ पर झंग

डिफ़ॉल्ट रूप से पृष्ठभूमि रंग आपके विषय से "colorAccent" होगा। हालाँकि आप फ़्लोटिंग का उपयोग कर सकते हैंबटनबटन.सेटरीपल कलर (रंग), 'रिपल' नाम से आपको डरने न दें, यह प्री-लॉलीपॉप डिवाइस पर भी काम करता है।

— user1354603

मेरे पास colorAccent नहीं है, और अगर मैं एक को जोड़ता हूं और रंग को किसी और चीज़ में सेट करता हूं तो यह काम नहीं करता है - रंग हरे / मरोड़ से चिपक जाता है।

— 15

मैं इसके लिए एक थर्ड पार्टी का इस्तेमाल कर रहा था। वाकई मेरी बहुत मदद की। धन्यवाद। इसके साथ एक मुद्दा यह है, यह अभी भी महसूस करता है कि इसकी पूरी तरह से विकसित नहीं हुआ है।

— V_J

@Jangang @ user1354603 डॉक्स सेThe background color of this view defaults to the your theme's colorAccent. If you wish to change this at runtime then you can do so via setBackgroundTintList(ColorStateList).

— मुहम्मद बाबर

Answer 2

मैंने आमतौर पर एक प्री-लॉलीपॉप विजेट पर छाया / ऊंचाई बनाने के लिए xml ड्रॉबल्स का उपयोग किया है। यहाँ, उदाहरण के लिए, एक xml ड्रिबल है जो फ्लोटिंग एक्शन बटन के उत्थान का अनुकरण करने के लिए प्री-लॉलीपॉप डिवाइस पर इस्तेमाल किया जा सकता है।

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="8px">
    <layer-list>
        <item>
            <shape android:shape="oval">
                <solid android:color="#08000000"/>
                <padding
                    android:bottom="3px"
                    android:left="3px"
                    android:right="3px"
                    android:top="3px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#09000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#10000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#11000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#12000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#13000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#14000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#15000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#16000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#17000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
    </layer-list>
</item>
<item>
    <shape android:shape="oval">
        <solid android:color="?attr/colorPrimary"/>
    </shape>
</item>
</layer-list>

?attr/colorPrimaryआप के स्थान पर किसी भी रंग का चयन कर सकते हैं। यहां देखें रिजल्ट का स्क्रीनशॉट:

Comments

इसे साझा करने के लिए आपको धन्यवाद। मैं इसे फिर से बनाने के लिए XML कोड को खोदकर खोद रहा था।

— कुकस्टर

मैंने अभी लागू किया है और यह बहुत अच्छा है, केवल एक अजीब बात है। ऐसा लगता है कि जब आप फोन को घुमाते हैं तो छाया / ऊंचाई खो रही है। उस पर कोई विचार? अग्रिम धन्यवाद जस्टिन

— एमिलकर एंड्रेड

@AmilcarAndrade यह एक अच्छा सवाल है। मुझे अन्य xml ड्रॉबल्स के साथ समान चीजों का सामना करना पड़ा है, लेकिन मैं वास्तव में ड्रॉबल से बिटमैप निकाल रहा था। इसे हल करने के लिए, मैंने अनिवार्य रूप से ड्रॉबल को एक सिंगलटन के रूप में इस्तेमाल किया; एक बार सेट करें ताकि यह फिर से तैयार न हो। शायद आप एक स्थिर चर के रूप में ड्रॉएबल प्राप्त कर सकते हैं और इसे ऑनक्रिएट में पृष्ठभूमि के रूप में सेट कर सकते हैं?

— जस्टिन पोलार्ड

इसके अलावा, मैंने एक एन्हांसमेंट जोड़ा है कि आप वास्तव में आसान एक शिष्य प्रभाव जोड़ सकते हैं, नीचे कोड है।

— अमिलकर एंड्रेड

भविष्य के संदर्भों के लिए, छाया और ऊंचाई से बचने के लिए यह एक शानदार उदाहरण है -> जिज्ञासु- creature.com/2008/12/18/avoid-memory-leaks-on-android/…

— Andrade

Answer 3

आपके ऐप में FAB (फ़्लोटिंग एक्शन बटन) जोड़ने के लिए पुस्तकालयों का एक समूह है, यहाँ उनमें से कुछ हैं जिन्हें मैं जानता हूँ।

मकोवाक का एफएबी

फ्यूचर्सिम्पल का समग्र एफएबी

सामग्री डिजाइन पुस्तकालय जिसमें एफएबी भी शामिल है

इन सभी पुस्तकालयों को प्री-लॉलीपॉप डिवाइसों पर समर्थित किया गया है, न्यूनतम 8 से एपीआई तक

Answer 4

यहां Android के लिए एक एडिशनल फ्री फ्लोटिंग एक्शन बटन लाइब्रेरी है। इसमें कई अनुकूलन हैं और इसके लिए एसडीके संस्करण 9 और उच्चतर की आवश्यकता है

फुल डेमो वीडियो

Comments

कृपया पढ़ें: meta.stackexchange.com/questions/57497/…

— nkjt

Answer 5

@ जस्टिन पोलार्ड xml कोड वास्तव में अच्छा काम करता है। एक साइड नोट के रूप में आप निम्नलिखित xml लाइनों के साथ एक तरंग प्रभाव जोड़ सकते हैं।

    <item>
    <ripple
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?android:colorControlHighlight" >
        <item android:id="@android:id/mask">
            <shape android:shape="oval" >
                <solid android:color="#FFBB00" />
            </shape>
        </item>
        <item>
            <shape android:shape="oval" >
                <solid android:color="@color/ColorPrimary" />
            </shape>
        </item>
    </ripple>
</item>

Answer 6

इस लाइब्रेरी को आज़माएं , यह छाया का समर्थन करता है, इसमें निहित रूप से विशेषता minSdkVersion=7का भी समर्थन है ।android:elevationAPI-21

मूल पोस्ट यहाँ है ।

Answer 7

पैडिंग और ऊंचाई जोड़ें:

 android:elevation="10dp"
 android:padding="10dp"