How to make Pager Sliding Tab Strip with two categories equally fit in screen android?

Question

I am using pager sliding tab strip where I am getting extra space at right side. How to equally fit for two categoreis in tabs?

My code is as follows:

    PagerSlidingTabStrip tabs = (PagerSlidingTabStrip)findViewById(R.id.tabs);
    tabs.setIndicatorColor(Color.BLUE);
    tabs.setIndicatorHeight(2);
    mPager = (ViewPager) findViewById(R.id.pager);
    FragmentManager fm = getSupportFragmentManager();
    ViewPagerAdapter adapter = new ViewPagerAdapter(fm);
    mPager.setAdapter(adapter);
    tabs.setViewPager(mPager);
    tabs.setShouldExpand(true);

        public class ViewPagerAdapter extends FragmentPagerAdapter {

    // Declare the number of ViewPager pages
    //final int PAGE_COUNT = 2;

    public ViewPagerAdapter(android.support.v4.app.FragmentManager fm) {
        super(fm);
    }
    private final String[] TITLES = { "SIGN IN", "REGISTER"};

    @Override
    public CharSequence getPageTitle(int position) {
        return TITLES[position];
    }

and my xml is :

  <RelativeLayout
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" >

<com.views.PagerSlidingTabStrip
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="48dip"
    android:background="@drawable/background_tabs" />

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:background="#000000"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/colors"
    android:layout_below="@+id/tabs"
    tools:context=".MainActivity" />

Here is my screenshot

enter image description here

@Shadow did you figure out a solution for this? – Lion789 May 14 '15 at 18:42 — Lion789, May 14 '15 at 18:42
@HindCreator can you show what you mean? – Lion789 May 14 '15 at 18:42 — Lion789, May 14 '15 at 18:42
yes i found solution. i updated answer. @Lion789 – Shadow May 15 '15 at 07:36 — Shadow, May 15 '15 at 07:36

score 7 · Answer 1 · answered Dec 05 '14 at 08:37

Instead of adding setShouldExpand in java file, i think will have to add it in xml file... like this ..

<com.views.PagerSlidingTabStrip
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dip"
android:background="@drawable/background_tabs" 
app1:pstsShouldExpand="true"/>

also add xmlns:app1="http://schemas.android.com/apk/res/your.package.name" in your parent layout like this..

<RelativeLayout
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"
xmlns:app1="http://schemas.android.com/apk/res/your.package.name" >

Hope it works...!!

score 2 · Answer 2 · edited Dec 11 '15 at 00:48

Add

LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
lp.weight = 1;
tabView.setLayoutParams(lp);

To the populateTabStrip() method in SlidingTabLayout. It should be looks like:

private void populateTabStrip() {
        final PagerAdapter adapter = mViewPager.getAdapter();
        final OnClickListener tabClickListener = new TabClickListener();

        for (int i = 0; i < adapter.getCount(); i++) {
            View tabView = null;
            TextView tabTitleView = 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;
            }

            tabTitleView.setText(adapter.getPageTitle(i));
            tabView.setOnClickListener(tabClickListener);
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            lp.weight = 1;
            tabView.setLayoutParams(lp);
            mTabStrip.addView(tabView);
        }
    }

score 1 · Answer 3 · answered Feb 01 '17 at 17:00

To split the tabs equally like WhatsApp add the below code in your mainActivity.java file.

tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

MainActivity.java

    public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Set the content of the activity to use the activity_main.xml layout file
        setContentView(R.layout.activity_main);

        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);

        // CategoryFragmentPagerAdapter adapter =
        //     new CategoryFragmentPagerAdapter(getSupportFragmentManager());

        viewPager.setAdapter(new CategoryFragmentPagerAdapter(getSupportFragmentManager(),
                MainActivity.this));

        TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
        tabLayout.setupWithViewPager(viewPager);

        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
    }
}

Kindly take note to make it work don't add app:tabMode="scrollable"code in the XML file.

Sreedhu Madhu · Answer 4 · 2014-12-05T07:31:54.737

In my case I used some custom sliding pager, the below line of code helped me,

 View tabView = null;
    if (mTabViewLayoutId != 0) {
        tabView = LayoutInflater.from(getContext()).inflate(
                            mTabViewLayoutId, mTabStrip, false);
        TextView tabTitleView = (TextView) tabView
                            .findViewById(mTabViewTextViewId);
 tabTitleView.setWidth(getResources().getDisplayMetrics().widthPixels
                                    / mNumberOfTabs);
                }

Here, mTabViewLayoutId is a custom layout resourse id

Hope something like this will help you.

thanks for your reply. tabTitleView is an object of? – Shadow Dec 05 '14 at 07:23 — Shadow, Dec 05 '14 at 07:23

score 0 · Answer 5 · answered May 15 '15 at 07:35

You need to customise in PageSlidingTabStrip by making width as 0. I will show what changes I made in that class.

public static int width = 0;

Then in MainActivity:

    Display display = getWindowManager().getDefaultDisplay();
    Point size = new Point();
    display.getSize(size);
    int width = size.x;
    PagerSlidingTabStrip.width = width / 2;
    setContentView(R.layout.loginpager);
    //others are all same.
   PagerSlidingTabStrip tabs = (PagerSlidingTabStrip)findViewById(R.id.tabs);
    tabs.setIndicatorColor(getResources().getColor(R.color.blue));
    tabs.setIndicatorHeight(5);
    tabs.setTextColor(getResources().getColor(R.color.blue));
    FragmentManager fm = getSupportFragmentManager();
    ViewPagerAdapter adapter = new ViewPagerAdapter(fm);
    mPager.setAdapter(adapter);
    tabs.setViewPager(mPager);

Here is output screen

enter image description here

How to make Pager Sliding Tab Strip with two categories equally fit in screen android?

5 Answers5