Align-center Slidingtablayout

After I moved my app to 5.0, I had to move from the basic tabs to the slidingTabLayout that a google developer provides . The problem is, I can't figure out how to center both butt

Solution 1:

use setDistributeEvenly() , it will do what you want. like this:

slideTab = (SlidingTabLayout)findViewById(R.id.requestSlideTab);
slideTab.setDistributeEvenly(true);
slideTab.setViewPager(viewPager);

EDIT: SlidingTabLayout copied from Google IO

import android.content.Context;
import android.graphics.Typeface;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.SparseArray;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * To be used with ViewPager to provide a tab indicator component which give constant feedback as to
 * the user's scroll progress.
 * <p>
 * To use the component, simply add it to your view hierarchy. Then in your
 * {@link android.app.Activity} or {@link android.support.v4.app.Fragment} call
 * {@link #setViewPager(ViewPager)} providing it the ViewPager this layout is being used for.
 * <p>
 * The colors can be customized in two ways. The first and simplest is to provide an array of colors
 * via {@link #setSelectedIndicatorColors(int...)}. The
 * alternative is via the {@link TabColorizer} interface which provides you complete control over
 * which color is used for any individual position.
 * <p>
 * The views used as tabs can be customized by calling {@link #setCustomTabView(int, int)},
 * providing the layout ID of your custom layout.
 */publicclassSlidingTabLayoutextendsHorizontalScrollView {
    /**
     * Allows complete control over the colors drawn in the tab layout. Set with
     * {@link #setCustomTabColorizer(TabColorizer)}.
     */publicinterfaceTabColorizer {

        /**
         * @return return the color of the indicator used when {@code position} is selected.
         */intgetIndicatorColor(int position);

    }

    privatestaticfinalintTITLE_OFFSET_DIPS=24;
    privatestaticfinalintTAB_VIEW_PADDING_DIPS=16;
    privatestaticfinalintTAB_VIEW_TEXT_SIZE_SP=18;

    privateint mTitleOffset;

    privateint mTabViewLayoutId;
    privateint mTabViewTextViewId;
    privateboolean mDistributeEvenly;

    private ViewPager mViewPager;
    private SparseArray<String> mContentDescriptions = newSparseArray<String>();
    private ViewPager.OnPageChangeListener mViewPagerPageChangeListener;

    privatefinal SlidingTabStrip mTabStrip;

    publicSlidingTabLayout(Context context) {
        this(context, null);
    }

    publicSlidingTabLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    publicSlidingTabLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        // Disable the Scroll Bar
        setHorizontalScrollBarEnabled(false);
        // Make sure that the Tab Strips fills this View
        setFillViewport(true);

        mTitleOffset = (int) (TITLE_OFFSET_DIPS * getResources().getDisplayMetrics().density);

        mTabStrip = newSlidingTabStrip(context);
        addView(mTabStrip, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
    }

    /**
     * Set the custom {@link TabColorizer} to be used.
     *
     * If you only require simple custmisation then you can use
     * {@link #setSelectedIndicatorColors(int...)} to achieve
     * similar effects.
     */publicvoidsetCustomTabColorizer(TabColorizer tabColorizer) {
        mTabStrip.setCustomTabColorizer(tabColorizer);
    }

    publicvoidsetDistributeEvenly(boolean distributeEvenly) {
        mDistributeEvenly = distributeEvenly;
    }

    /**
     * Sets the colors to be used for indicating the selected tab. These colors are treated as a
     * circular array. Providing one color will mean that all tabs are indicated with the same color.
     */publicvoidsetSelectedIndicatorColors(int... colors) {
        mTabStrip.setSelectedIndicatorColors(colors);
    }

    /**
     * Set the {@link ViewPager.OnPageChangeListener}. When using {@link SlidingTabLayout} you are
     * required to set any {@link ViewPager.OnPageChangeListener} through this method. This is so
     * that the layout can update it's scroll position correctly.
     *
     * @see ViewPager#setOnPageChangeListener(ViewPager.OnPageChangeListener)
     */publicvoidsetOnPageChangeListener(ViewPager.OnPageChangeListener listener) {
        mViewPagerPageChangeListener = listener;
    }

    /**
     * Set the custom layout to be inflated for the tab views.
     *
     * @param layoutResId Layout id to be inflated
     * @param textViewId id of the {@link TextView} in the inflated view
     */publicvoidsetCustomTabView(int layoutResId, int textViewId) {
        mTabViewLayoutId = layoutResId;
        mTabViewTextViewId = textViewId;
    }

    /**
     * Sets the associated view pager. Note that the assumption here is that the pager content
     * (number of tabs and tab titles) does not change after this call has been made.
     */publicvoidsetViewPager(ViewPager viewPager) {
        mTabStrip.removeAllViews();

        mViewPager = viewPager;
        if (viewPager != null) {
            viewPager.setOnPageChangeListener(newInternalViewPagerListener());
            populateTabStrip();
        }
    }

    /**
     * Create a default view to be used for tabs. This is called if a custom tab view is not set via
     * {@link #setCustomTabView(int, int)}.
     */protected TextView createDefaultTabView(Context context) {
        TextViewtextView=newTextView(context);
        textView.setGravity(Gravity.CENTER);
        textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP);
        textView.setTypeface(Typeface.DEFAULT_BOLD);
        textView.setLayoutParams(newLinearLayout.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));

        TypedValueoutValue=newTypedValue();
        getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground,
                outValue, true);
        textView.setBackgroundResource(outValue.resourceId);
        textView.setAllCaps(true);

        intpadding= (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
        textView.setPadding(padding, padding, padding, padding);

        return textView;
    }

    privatevoidpopulateTabStrip() {
        finalPagerAdapteradapter= mViewPager.getAdapter();
        final View.OnClickListenertabClickListener=newTabClickListener();

        for (inti=0; i < adapter.getCount(); i++) {
            ViewtabView=null;
            TextViewtabTitleView=null;

            if (mTabViewLayoutId != 0) {
                // If there is a custom tab view layout id set, try and inflate it
                tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
                        false);
                tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);
            }

            if (tabView == null) {
                tabView = createDefaultTabView(getContext());
            }

            if (tabTitleView == null && TextView.class.isInstance(tabView)) {
                tabTitleView = (TextView) tabView;
            }

            if (mDistributeEvenly) {
                LinearLayout.LayoutParamslp= (LinearLayout.LayoutParams) tabView.getLayoutParams();
                lp.width = 0;
                lp.weight = 1;
            }

            tabTitleView.setText(adapter.getPageTitle(i));
            tabView.setOnClickListener(tabClickListener);
            Stringdesc= mContentDescriptions.get(i, null);
            if (desc != null) {
                tabView.setContentDescription(desc);
            }

            mTabStrip.addView(tabView);
            if (i == mViewPager.getCurrentItem()) {
                tabView.setSelected(true);
            }
        }
    }

    publicvoidsetContentDescription(int i, String desc) {
        mContentDescriptions.put(i, desc);
    }

    @OverrideprotectedvoidonAttachedToWindow() {
        super.onAttachedToWindow();

        if (mViewPager != null) {
            scrollToTab(mViewPager.getCurrentItem(), 0);
        }
    }

    privatevoidscrollToTab(int tabIndex, int positionOffset) {
        finalinttabStripChildCount= mTabStrip.getChildCount();
        if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount) {
            return;
        }

        ViewselectedChild= mTabStrip.getChildAt(tabIndex);
        if (selectedChild != null) {
            inttargetScrollX= selectedChild.getLeft() + positionOffset;

            if (tabIndex > 0 || positionOffset > 0) {
                // If we're not at the first child and are mid-scroll, make sure we obey the offset
                targetScrollX -= mTitleOffset;
            }

            scrollTo(targetScrollX, 0);
        }
    }

    privateclassInternalViewPagerListenerimplementsViewPager.OnPageChangeListener {
        privateint mScrollState;

        @OverridepublicvoidonPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            inttabStripChildCount= mTabStrip.getChildCount();
            if ((tabStripChildCount == 0) || (position < 0) || (position >= tabStripChildCount)) {
                return;
            }

            mTabStrip.onViewPagerPageChanged(position, positionOffset);

            ViewselectedTitle= mTabStrip.getChildAt(position);
            intextraOffset= (selectedTitle != null)
                    ? (int) (positionOffset * selectedTitle.getWidth())
                    : 0;
            scrollToTab(position, extraOffset);

            if (mViewPagerPageChangeListener != null) {
                mViewPagerPageChangeListener.onPageScrolled(position, positionOffset,
                        positionOffsetPixels);
            }
        }

        @OverridepublicvoidonPageScrollStateChanged(int state) {
            mScrollState = state;

            if (mViewPagerPageChangeListener != null) {
                mViewPagerPageChangeListener.onPageScrollStateChanged(state);
            }
        }

        @OverridepublicvoidonPageSelected(int position) {
            if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
                mTabStrip.onViewPagerPageChanged(position, 0f);
                scrollToTab(position, 0);
            }
            for (inti=0; i < mTabStrip.getChildCount(); i++) {
                mTabStrip.getChildAt(i).setSelected(position == i);
            }
            if (mViewPagerPageChangeListener != null) {
                mViewPagerPageChangeListener.onPageSelected(position);
            }
        }

    }

    privateclassTabClickListenerimplementsView.OnClickListener {
        @OverridepublicvoidonClick(View v) {
            for (inti=0; i < mTabStrip.getChildCount(); i++) {
                if (v == mTabStrip.getChildAt(i)) {
                    mViewPager.setCurrentItem(i);
                    return;
                }
            }
        }
    }

}

Solution 2:

in class SlidingTabLayout method populateTabStrip() add

LinearLayout.LayoutParamslp=newLinearLayout.LayoutParams(
        0, LayoutParams.WRAP_CONTENT, 1f);
tabView.setLayoutParams(lp);

Solution 3:

Why wouldn't you use the PagerSlidingTabStrip lib?

With this lib, you only have to call setShouldExpand(true). If the total width of the tabs doesn't exceed the screen's width, the tabs container will be expanded to match the screen width.

I really think you should use this lib, it's pretty good and very easy to use.

protectedvoidonCreate(Bundle savedInstanceState)
    {
        ViewPagerviewPager= findViewById(R.id.view_pager, null);
        PagerSlidingTabStriptabs= findViewById(R.id.tabs, null);

        // ...

        tabs.setShouldExpand(true);
        tabs.setViewPager(viewPager);

        // ...
    }