अन्य घटकों को अवरुद्ध करने से मैं अपना फ्लोटिंग एक्शन बटन कैसे रख सकता हूं?

Question

Google की नई सामग्री डिज़ाइन उस स्क्रीन पर मुख्य क्रिया के लिए उपयोगकर्ता का ध्यान आकर्षित करने के लिए फ्लोटिंग एक्शन बटन का उपयोग करने की सिफारिश करती है। सूची दृश्य के भीतर इसके कई उदाहरण हैं।

अब, मान लीजिए कि आपके सूची दृश्य में स्क्रीन को भरने के लिए सिर्फ पर्याप्त आइटम हैं, जिससे स्क्रॉल करना असंभव है। यदि आपकी सूची आइटम में एक निश्चित घटक है, जिसके साथ उपयोगकर्ता बातचीत कर सकता है, उदाहरण के लिए एक स्विच या पसंदीदा सितारा, तो यह संभव है कि फ्लोटिंग एक्शन बटन इस घटक को अवरुद्ध कर रहा है। हमें इस मामले को कैसे संभालना चाहिए?

संपादित करें: यह वास्तव में हमेशा सूची के अंतिम आइटम के साथ होता है। यहाँ एक उदाहरण है जहाँ 'पसंदीदा-स्टार' का सही उपयोग नहीं किया जा सकता है। यह सामग्री को रोक रहा है, जैसे कि इस उदाहरण में समय।

Answer 1

कुछ अलग तरीके हैं जिनसे आप इसे संभाल सकते हैं।

1. बटन के नीचे महत्वपूर्ण सामग्री न रखें

   यह सबसे स्पष्ट दृष्टिकोण है, और शायद सबसे सामान्य है। जब भी संभव हो, अपने डिजाइन को यह सुनिश्चित करने के लिए संरचना करें कि कोई भी महत्वपूर्ण कार्रवाई बटन के नीचे नहीं है जैसे कि अन्य बटन, मुख्य सामग्री, आदि।

   आप पैडिंग या रिक्त प्रविष्टि का उपयोग करके अतिरिक्त स्थान जोड़ सकते हैं, सामग्री को स्वरूपित कर सकते हैं, इसलिए नहीं के रूप में महत्वपूर्ण चीजें हैं जहां बटन होगा, या कुछ अन्य चीज नहीं है - यह सामग्री और इच्छित डिज़ाइन पर निर्भर करता है।

2. बटन को स्थानांतरित करें

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

   Google ने केवल अपने सामग्री डिज़ाइन गाइड को अपडेट किया और फ़्लोटिंग एक्शन बटन के लिए केवल एक पेज बनाया जो इसे विभिन्न स्थानों में उपयोग किया जा रहा है और एक एनीमेशन (नीचे के बारे में बात) के अतिरिक्त आकार दिखाता है।

_{रेडिट न्यूज़ प्रो से पहली छवि । मार्क डिसिकुलो से दूसरी छवि ।}

3. हर समय बटन न दिखाएं

   कभी-कभी एक्शन बटन इतना महत्वपूर्ण नहीं होता कि उसे हर समय देखा जाना चाहिए। इस तरह के मामलों में, इसे स्क्रॉल पर छुपाना या नीचे स्क्रॉल करते समय समझ में आ सकता है। यदि आप ऐसा करते हैं, तो आप सामग्री और डिज़ाइन पर निर्भर हैं, कोई भी उत्तर सभी अनुप्रयोगों के लिए सही नहीं है।

   Google के अद्यतन दिशानिर्देश नीचे दी गई छवि की तरह खिसकने के बजाय पूरी चीज़ को स्केल करके बटन को अंदर और बाहर एनिमेट करने का एक संस्करण दिखाते हैं।

_{फ्लोटिंग एक्शन से छवि ।}

Answer 2

थोड़ा सरल हो सकता है और सबसे सुरुचिपूर्ण समाधान नहीं हो सकता है, लेकिन: सूची के अंत में एक खाली 'डमी' प्रविष्टि जोड़ें, ताकि उपयोगकर्ता अंतिम प्रविष्टि से आगे स्क्रॉल कर सके।

Comments

इसे "आधिकारिक" समाधान माना जा सकता है, क्योंकि जीमेल ऐप इसका उपयोग करता है।

— विक्की चिजवानी

इसके अलावा, आप इसे डमी प्रविष्टि के बजाय "सूची के निचले भाग पर पैडिंग" कह सकते हैं (जो, जैसा कि आप इंगित करते हैं, असंगत लगता है)।

— विक्की चिजवानी

Answer 3

यह मेरे लिए काम करता है। RecyclerView में नीचे पैडिंग जोड़ें

<android.support.v7.widget.RecyclerView 
android:id="@+id/my_recycler_view" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:clipToPadding="false" 
android:paddingBottom="30dp" 
android:scrollbars="vertical"/>

Ref: /programming/27768495/not-able-to-add-empty-view-below-recyclerview

Answer 4

स्वीकार किए गए उत्तर में "बटन को स्थानांतरित करें" विचार को बंद करते हुए, सामग्री डिजाइन दिशानिर्देशों के स्क्रॉलिंग तकनीक के हिस्से में उस विचार का एक संभावित कार्यान्वयन होता है।

अर्थात्, फ़्लोटिंग एक्शन बटन सामग्री के बीच के किनारे और लचीली जगह के साथ एक ऐप बार को तोड़ता है। स्क्रॉल करते समय:

जब तक केवल टूलबार नहीं रहता तब तक लचीला स्थान सिकुड़ता रहता है। जब पृष्ठ के शीर्ष पर स्क्रॉल किया जाता है, तो लचीली जगह फिर से बढ़ती है।

फ़्लोटिंग एक्शन बटन सामग्री के विस्तार टुकड़े के रूप में स्क्रीन पर एनिमेट करता है।

https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-behavior

Answer 5

मैंने इसका उपयोग RecyclerView.Adcape की onBindViewHolder पद्धति में सूची में अंतिम आइटम के निचले मार्जिन को 72dp पर सेट करने के लिए किया है ताकि यह फ्लोटिंग एक्शन बटन के ऊपर स्क्रॉल हो जाए।

इस सूची में एक डमी प्रविष्टि की आवश्यकता नहीं है।

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    // other binding code goes here.

    if (position + 1 == getItemCount()) {
        // set bottom margin to 72dp.
        setBottomMargin(holder.itemView, (int) (72 * Resources.getSystem().getDisplayMetrics().density));
    } else {
        // reset bottom margin back to zero. (your value may be different)
        setBottomMargin(holder.itemView, 0);
    }
}

public static void setBottomMargin(View view, int bottomMargin) {
    if (view.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
        params.setMargins(params.leftMargin, params.topMargin, params.rightMargin, bottomMargin);
        view.requestLayout();
    }
}

Comments

मेरे लिये कार्य करता है :)।

— OWADVL