टैब टैबलेट डिवाइस पर पूरी चौड़ाई नहीं ले रहा है [android.support.design.widget.TabLayout का उपयोग करके]

Question

इस पोस्ट के रूप में मेरे पास 29/05/2015 का सेटअप टैब है । टैब मेरे नेक्सस 4 मोबाइल पर पूरी चौड़ाई लेता है लेकिन नेक्सस 7 टैबलेट पर यह केंद्र में है और पूरी स्क्रीन की चौड़ाई को कवर नहीं करता है।

नेक्सस 7 स्क्रीनशॉट नेक्सस 4 स्क्रीनशॉट

Comments

6 घंटे के लिए एक ही मुद्दे के साथ संघर्ष कर रहा था, लेकिन मुझे एहसास नहीं था कि यह केवल टैब के साथ जारी किया गया है ...

— स्टैकओवरफ़्लो पर सोचो

कृपया प्रश्नों में और टैग जोड़ने की कोशिश करें ... (मेरे जैसे लोगों के लिए अधिक उपयोगी होगा), क्योंकि यह प्रश्न मुझे मेरी Google खोज सूची के तीसरे पृष्ठ पर मिला है

— शिरीष हेरवाडे

Answer 1

काज़ी से उधार लिया गया एक "सरल" उत्तर सिर्फ app:tabMaxWidth="0dp"आपके TabLayoutxml में जोड़ना होगा :

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed" />

Comments

क्या होगा अगर मुझे इसे स्क्रॉल करने की आवश्यकता है? स्क्रॉल को समर्थन करने के लिए टैबमोड को बदलना इस समाधान को तोड़ता है।

— टियागो

स्क्रॉल करने योग्य कोई उपाय?

— sunlover3

हाय .. मैंने इसे जोड़ने की कोशिश की है। लेकिन एकल टैब टैब लेआउट की पूरी चौड़ाई नहीं ले रहा है।

— राहुल

यह समाधान भी काम करता है यदि टैबमोड सेट नहीं है। स्क्रॉल किए गए टैपमोइड भरे हुए गुरुत्वाकर्षण और 0dp अधिकतम चौड़ाई की सुविधाओं का समर्थन नहीं करते हैं।

— जूलियो मेंडोज़ा

हालाँकि ऐसा क्यों होता है? क्या यह डिफ़ॉल्ट व्यवहार है? या कुछ मैं अच्छी तरह से उपयोग नहीं किया? क्या बीच में टैब सेट करना दिशानिर्देशों का हिस्सा है? 3+ टैब का उपयोग करते समय यह मेरे लिए नहीं होता है। केवल 2 टैब के लिए।

— Android डेवलपर

Answer 2

मेरे पास एक ही समस्या थी और मैंने TabLayout शैली की जाँच की, और मैंने पाया कि इसकी डिफ़ॉल्ट शैली Widget.Design.TabLayoutअलग कार्यान्वयन (सामान्य, परिदृश्य और sw600dp) है।

जो हमें चाहिए वह टैबलेट (sw600dp) के लिए एक है जिसमें निम्नलिखित कार्यान्वयन हैं:

<style name="Widget.Design.TabLayout" parent="Base.Widget.Design.TabLayout">
        <item name="tabGravity">center</item>
        <item name="tabMode">fixed</item>
 </style>

इस शैली से हम " फिल " का उपयोग करते हुए " टैबगैविटी " (जो संभव मान "केंद्र" या "भरण") का उपयोग करेंगे।

लेकिन हमें और गहराई में जाने की जरूरत है, और फिर हम देखते हैं कि यह एक से है Base.Widget.Design.TabLayout, जो कार्यान्वयन है:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>

तो, इस शैली से हमें " tabMaxWidth " को ओवरराइड करना होगा । मेरे मामले में मैंने इसे निर्धारित किया है 0dp, इसलिए इसकी कोई सीमा नहीं है।

और मेरी शैली इस तरह दिखी:

<style name="MyTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabGravity">fill</item>
        <item name="tabMaxWidth">0dp</item>
</style>

और फिर टैब बार पूरे स्क्रीन को साइड से भर देगा।

Comments

अच्छी खोज .. जड़ तक जा रही है। लेकिन कृपया शीर्ष पर सटीक उत्तर को उजागर करें, किसी ऐसे व्यक्ति को ढूंढना आसान होगा जो सभी उत्तर नहीं पढ़ना चाहता है

— शिरीष हेरवाडे

महान समाधान, अजीब है कि आप की तरह लग रहा है कि अंतर्निहित शैली को बदलने के बिना आप इसे कैसे नियंत्रित कर सकते हैं। ऐसा लगता है जैसे tabMaxWidth असली अपराधी है

— kandroidj

यह शरलॉक के एक एपिसोड की तरह है। धन्यवाद!!

— लीसा रे

Answer 3

स्क्रॉल करने योग्य के लिए समाधान: (TabLayout.MODE_SCROLLABLE), वह यह है कि कभी भी आपको 2 से अधिक टैब (डायनेमिक टैब) की आवश्यकता होती है

चरण 1: style.xml

<style name="tabCustomStyle" parent="Widget.Design.TabLayout">
            <item name="tabGravity">fill</item>
            <item name="tabMaxWidth">0dp</item>
            <item name="tabIndicatorColor">#FFFEEFC4</item>
            <item name="tabIndicatorHeight">2dp</item>
            <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
            <item name="tabSelectedTextColor">#FFFEEFC4</item>
        </style>

        <style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
            <item name="android:textSize">@dimen/tab_text_size</item>
            <item name="android:textAppearance">@style/TextAppearance.roboto_medium</item>
            <item name="textAllCaps">true</item>
        </style>
        <style name="TextAppearance.roboto_medium" parent="android:TextAppearance">
            <item name="android:fontFamily">sans-serif-medium</item>
        </style>

चरण 2: आपका xml लेआउट

<android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            style="@style/tabCustomStyle"
            android:layout_width="match_parent"
            android:layout_height="@dimen/tab_strip_height"
            android:background="@color/your_color"
            app:tabMode="scrollable"
            app:tabTextColor="@color/your_color" />

चरण 3: अपनी गतिविधि / परिश्रम में जहाँ कभी आपके पास टैब हैं।

/**
     * To allow equal width for each tab, while (TabLayout.MODE_SCROLLABLE)
     */
    private void allotEachTabWithEqualWidth() {

        ViewGroup slidingTabStrip = (ViewGroup) mTabLayout.getChildAt(0);
        for (int i = 0; i < mTabLayout.getTabCount(); i++) {
            View tab = slidingTabStrip.getChildAt(i);
            LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) tab.getLayoutParams();
            layoutParams.weight = 1;
            tab.setLayoutParams(layoutParams);
        }

    }

Comments

यह केवल 1 से अधिक टैब के साथ काम करता है, अगर हमारे पास केवल एक टैब है टैब टैब-लेआउट को नहीं भरता है। उस समस्या को हल करने के लिए मैंने ऐप जोड़ा: tabMaxWidth = "1000dp" और इसने काम किया।

— 21

इसने मेरे लिए सबसे अच्छा काम किया। मेरे कस्टम टैब लेआउट वर्ग में, मैंने addTabप्रत्येक टैब के लिए वजन डाला और सेट किया क्योंकि यह जोड़ा गया था। override fun addTab(tab: Tab, position: Int, setSelected: Boolean) { super.addTab(tab, position, setSelected) allotEachTabWithEqualWidth() }

— जस्टिन ली

Answer 4

टैब को पूरी चौड़ाई (समान आकार में विभाजित करने) के लिए बाध्य करने के लिए, निम्नलिखित को TabLayoutदेखने के लिए लागू करें :

TabLayout tabLayout = (TabLayout) findViewById(R.id.your_tab_layout);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
tabLayout.setTabMode(TabLayout.MODE_FIXED);

Comments

बस लोगों को यह बताने से, यह आपके साथ TabLayoutसेट होने पर काम नहीं करता है app:tabMode=“scrollable”, इसके परिणामस्वरूप टैब निश्चित लंबाई (लंबे शब्द लपेटेंगे) बनेंगे और टैब अब स्लाइड नहीं करेंगे, अनिवार्य रूप से टैब को फिर से "निश्चित" बना देंगे।

— साकिबॉय

Answer 5

यह मददगार है जिसे आपको अवश्य आजमाना चाहिए

 <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMaxWidth="0dp"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:tabIndicatorColor="@color/white"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="@color/orange" />

Answer 6

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed" />

मेरे लिए काम। यह भी हैxmlns:app="http://schemas.android.com/apk/res-auto"

Answer 7

मेरे लिए निम्न कोड काम किया और पर्याप्त था।

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"/>

Answer 8

समाधान के लिए नीचे दिए गए कोड की जाँच करें।

नीचे लेआउट कोड है:

<com.yourpackage.CustomTabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/off_white"
    app:tabIndicatorColor="@color/primaryColor"
    app:tabIndicatorHeight="3dp"
    app:tabMode="scrollable"
    app:tabPaddingEnd="0dp"
    app:tabPaddingStart="0dp" />

ध्यान दें, डायनेमिक टैब काउंट के लिए, सेटटैबनेट्स (टैबकाउंट) को कॉल करना न भूलें।

import android.content.Context;
import android.support.design.widget.TabLayout;
import android.util.AttributeSet;
import android.util.
import java.lang.reflect.Field;

public class CustomTabLayout extends TabLayout
{
    private static final int WIDTH_INDEX = 0;
    private int DIVIDER_FACTOR = 3;
    private static final String SCROLLABLE_TAB_MIN_WIDTH = "mScrollableTabMinWidth";

    public CustomTabLayout(Context context) {
        super(context);
        initTabMinWidth();
    }

    public CustomTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        initTabMinWidth();
    }

    public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initTabMinWidth();
    }

    public void setTabNumbers(int num)
    {
        this.DIVIDER_FACTOR = num;
        initTabMinWidth();
    }

    private void initTabMinWidth()
    {
        int[] wh = getScreenSize(getContext());
        int tabMinWidth = wh[WIDTH_INDEX] / DIVIDER_FACTOR;

        Log.v("CUSTOM TAB LAYOUT", "SCREEN WIDTH = " + wh[WIDTH_INDEX] + " && tabTotalWidth = " + (tabMinWidth*DIVIDER_FACTOR) + " && TotalTabs = " + DIVIDER_FACTOR);

        Field field;
        try {
            field = TabLayout.class.getDeclaredField(SCROLLABLE_TAB_MIN_WIDTH);
            field.setAccessible(true);
            field.set(this, tabMinWidth);
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private static final int WIDTH_INDEX = 0;
    private static final int HEIGHT_INDEX = 1;

    public static int[] getScreenSize(Context context) {
        int[] widthHeight = new int[2];
        widthHeight[WIDTH_INDEX] = 0;
        widthHeight[HEIGHT_INDEX] = 0;

        try {
            WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
            Display display = windowManager.getDefaultDisplay();

            Point size = new Point();
            display.getSize(size);
            widthHeight[WIDTH_INDEX] = size.x;
            widthHeight[HEIGHT_INDEX] = size.y;

            if (!isScreenSizeRetrieved(widthHeight))
            {
                DisplayMetrics metrics = new DisplayMetrics();
                display.getMetrics(metrics);
                widthHeight[0] = metrics.widthPixels;
                widthHeight[1] = metrics.heightPixels;
            }

            // Last defense. Use deprecated API that was introduced in lower than API 13
            if (!isScreenSizeRetrieved(widthHeight)) {
                widthHeight[0] = display.getWidth(); // deprecated
                widthHeight[1] = display.getHeight(); // deprecated
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

        return widthHeight;
    }

    private static boolean isScreenSizeRetrieved(int[] widthHeight) {
        return widthHeight[WIDTH_INDEX] != 0 && widthHeight[HEIGHT_INDEX] != 0;
    }
}

संदर्भ https://medium.com/@elsenovraditya/set-tab-minimum-width-of-scrollable-tablayout-programmatically-8146d6101efe से लिया गया

Answer 9

स्क्रॉल करने योग्य (कोटलिन) के लिए समाधान

Xml में:

     <com.google.android.material.tabs.TabLayout
            android:id="@+id/home_tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMaxWidth="0dp"
            app:tabMode="scrollable"
            android:fillViewport="true"
            app:tabGravity="fill" />

कोटलिन में:

मेरे मामले में अगर 3 टैब से कम है तो मैं बराबर जगह आवंटित करता हूं।

नोट: यदि शर्त आपकी आवश्यकता के अनुसार है

        if(list.size <= 3){
          allotEachTabWithEqualWidth(your_tab_layout)
        }

     fun allotEachTabWithEqualWidth(tabLayout: TabLayout) {
        mTabLayout.tabMode=  TabLayout.MODE_FIXED
        val slidingTabStrip = tabLayout.getChildAt(0) as ViewGroup
        for (i in 0 until tabLayout.getTabCount()) {
            val tab = slidingTabStrip.getChildAt(i)
            val layoutParams = tab.layoutParams as LinearLayout.LayoutParams
            layoutParams.weight = 1f
            tab.layoutParams = layoutParams
        }

    }

Answer 10

वह सब व्यस्त काम क्यों? बस app:tabMode="scrollable"XML में अपने TabLayout में डाल दिया । बस।

Comments

यदि 3 टैब है तो क्या होगा? यह स्क्रीन पर फिट नहीं होगा (टैब डायनेमिक हैं जो सर्वर API से आ रहे हैं) रन टाइम के दौरान ज्ञात

— राम प्रकाश भट्ट

फिर आप इसे प्रोग्रामेटिक रूप से भी सेट कर सकते हैं। tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);इसके अलावा यह टैबलैटआउट के लिए सेट करने के लिए एक संपत्ति है। यह कभी मायने नहीं रखता है कि आप कितने टैब को स्थिर या गतिशील जोड़ रहे हैं।

— अली अकरम

यह पाठ के आकार के अनुसार टैब की चौड़ाई बना देगा। छवि के साथ मेरे संपादित उत्तर को चेक करें।

— अली अकरम

हां उस स्थिति में टैब मोड SCROLLABLE है, तो अंत में यू खाली जगह देखेगा अजीब लगता है

— राम प्रकाश भट

Answer 11

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

मेरे मामले में सबसे अच्छा समाधान एक res/layout-sw600dp/main_activity.xmlफ़ाइल को जोड़ना था , जहां प्रासंगिक टैबलैटआउट हो सकता है app:tabGravity="fill"और app:tabMode="fixed"। लेकिन मेरे नियमित रूप से res/layout/main_activity.xml, मैंने छोड़ दिया app:tabGravity="fill"और app:tabMode="fixed", और इसके app:tabMode="scrollable"बजाय था ।

Answer 12

कृपया ध्यान दें कि आपको भी सेट करने की आवश्यकता है

  app:tabPaddingStart="-1dp"
  app:tabPaddingEnd="-1dp"

सभी स्थान भरने के लिए

Comments

ढेर अतिप्रवाह में आपका स्वागत है। कृपया ले दौरे । यह एक प्रश्न और उत्तर साइट है, चर्चा मंच नहीं। यह खंड केवल पूर्ण उत्तरों के लिए है। एक बार जब आप पूछकर और जवाब देकर 50 प्रतिष्ठा अंक अर्जित कर लेते हैं, तो आप अन्य उपयोगकर्ताओं के प्रश्नों और उत्तरों पर टिप्पणी कर पाएंगे ।

— क्रिस