एक लेआउट में दो फ़्लोटिंग बटन

Question

मैं सामग्री डिज़ाइन का उपयोग करने के साथ एक साधारण ऐप बना रहा हूं। और मैं एक लेआउट पर दो फ़्लोटिंग बटन प्राप्त करना चाहता हूं।

और मैं उन्हें toghether चलती जब एक स्नैक बार दिखाया जा रहा है बनाना चाहते हैं। लेकिन मैं इसे गलत तरीके से गलत तरीके से नहीं कर सकता, क्योंकि layout_margin काम नहीं करता है। ये ऐप और मार्कअप का स्क्रीनशॉट हैं। क्या आप मेरी मदद कर सकते हैं?

    <android.support.design.widget.AppBarLayout 
        android:id="@+id/addProductsAppBar" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

        <android.support.design.widget.TabLayout 
         android:id="@+id/addProductsTabs" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" /> 

        </android.support.design.widget.AppBarLayout> 

        <android.support.v4.view.ViewPager 
        android:id="@+id/addProductsViewpager" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

        <android.support.design.widget.FloatingActionButton 
        android:id="@+id/addProductFab" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="end|bottom" 
        android:layout_margin="16dp" 
        android:src="@drawable/ic_add_white_36dp" /> 

        <android.support.design.widget.FloatingActionButton 
        android:id="@+id/searchFab" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        app:layout_anchor="@id/addProductFab" 
        app:layout_anchorGravity="top|right|end" 
        android:layout_marginBottom="80dp" 
        android:layout_marginRight="16dp" 
        android:src="@drawable/ic_search_white_36dp"/> 

       </android.support.design.widget.CoordinatorLayout> 

Answer 1

मैं यह काम कर रहा है और इस प्रक्रिया में मैं एंकर की कार्यप्रणाली के बारे में कुछ समझ प्राप्त की है पाने के लिए अपने कोड के साथ कुछ बदलाव की कोशिश की।

ध्यान देने योग्य पहली बात यह है कि कोऑर्डिनेटरलाइट दृश्य की सीमाओं के आधार पर अपने बच्चे के विचारों को संरेखित करता है। इसलिए तत्वों के बीच मार्जिन जोड़ना गति में मदद नहीं करेगा। यह लेआउट में ठीक लगेगा, लेकिन गति में छोड़ दें।

तो एक डमी दृश्य जोड़ना बिना किसी समस्या के ठीक से एंकरिंग में मदद करता है। साथ ही, आपको लेआउट_ग्रैविटीज को उचित रूप से सेट करने की आवश्यकता है।

बस इस स्निपेट के साथ अपने लेआउट में 2 FABs के लिए कोड की जगह:

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/addProductFab" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="end|bottom" 
    android:layout_margin="16dp" 
    android:src="@drawable/ic_add_white_36dp" /> 

<View 
    android:id="@+id/dummy" 
    android:layout_width="1dp" 
    android:layout_height="16dp" 
    app:layout_anchor="@id/addProductFab" 
    app:layout_anchorGravity="top|right|end" /> 

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/searchFab" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="end|top" 
    android:layout_margin="16dp" 
    android:src="@drawable/ic_search_white_36dp" 
    app:layout_anchor="@id/dummy" 
    app:layout_anchorGravity="top|right|end" /> 

आशा इस मदद करता है! अगर यह काम करता है तो कृपया इस उत्तर को स्वीकार करें। :)

Answer 2

सही प्रतिक्रिया कोड 5.0 से नीचे एंड्रॉइड पर काम नहीं करेगा, क्योंकि ऊपरी एफएबी स्थानांतरित हो जाएगा। सबसे ऊपर, आपके कोड में बहुत से अतिरिक्त विशेषताओं में, मैं आपके उत्तर के आधार पर नीचे उत्तर लिखूंगा, जो सभी उपकरणों पर ठीक से काम करेगा, और समझना आसान होगा।

<android.support.design.widget.CoordinatorLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:padding="10dp" 
android:background="#e2022068"> 

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fab_down" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="end|bottom" 
    android:src="@android:drawable/arrow_down_float" /> 

<ImageView 
    android:id="@+id/divider" 
    android:layout_width="1dp" 
    android:layout_height="40dp" 
    app:layout_anchor="@id/fab_down" 
    app:layout_anchorGravity="end" /> 

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fab_up" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="end" 
    android:src="@android:drawable/arrow_up_float" 
    app:layout_anchor="@id/divider" 
    app:layout_anchorGravity="right|end" /> 

</android.support.design.widget.CoordinatorLayout> 

Answer 3

मैं सिर्फ गद्दी जोड़ने के लिए एक दृश्य जोड़ने पसंद नहीं था, बजाय कि मैं एक FrameLayout में फैब लिपटे:

<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 
    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab_directions" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="@dimen/fab_margin" 
     android:src="@android:drawable/ic_menu_directions" 
     android:visibility="gone"/> 

    <!-- We need the frame layout to set the margin between FABs--> 
    <FrameLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="top|end" 
     app:layout_anchor="@id/fab_directions" 
     app:layout_anchorGravity="top|end"> 

     <android.support.design.widget.FloatingActionButton 
      android:id="@+id/fab_search" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginBottom="@dimen/fab_margin" 
      android:layout_marginEnd="@dimen/fab_margin" 
      android:src="@android:drawable/ic_menu_search" 
      app:elevation="@dimen/fab_elevation"/> 
    </FrameLayout> 

</android.support.design.widget.CoordinatorLayout> 

Answer 4

समर्थन में पुस्तकालय संस्करण 24.2.0, CoordinatorLayout है एक नई विशेषता layout_dodgeInsetEdges जिसे आप अपने दो एफएबी युक्त लाइनरलाउट (या उस मामले के लिए कोई अन्य दृश्य) में जोड़ सकते हैं, और स्नैकबार उस पूरे दृश्य को रास्ते से बाहर ले जायेगा!

तो, उदाहरण के लिए:

<android.support.design.widget.CoordinatorLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:clipChildren="false" 
     android:fitsSystemWindows="true" 
     tools:context=".Activities.MainActivity"> 

    <LinearLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:orientation="vertical" 
      android:layout_gravity="bottom|right" 
      android:layout_marginRight="@dimen/fab_margin" 
      android:layout_marginBottom="@dimen/fab_margin" 
      app:layout_dodgeInsetEdges="bottom"> //THIS IS THE LINE THAT MATTERS 

     <android.support.design.widget.FloatingActionButton 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="@dimen/fab_margin" 
       android:src="@drawable/icon" 
       android:tint="@color/colorTextAndIcons" 
       app:backgroundTint="@color/colorPrimary"/> 

     <android.support.design.widget.FloatingActionButton 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="@dimen/fab_margin" 
       android:src="@drawable/icon" 
       android:tint="@color/colorTextAndIcons" 
       app:backgroundTint="@color/colorPrimary"/> 
    </LinearLayout> 
</android.support.design.widget.CoordinatorLayout> 

Answer 5

समाधान सही के रूप में चिह्नित एक ट्वीक किए गए, जो अलग अलग स्क्रीन डीपीआई के साथ विभिन्न उपकरणों के लिए इस मुद्दे को हो जाएगा, तो सही समाधान हो जाएगा https://stackoverflow.com/a/33900363/5740236