How to place PagerTabStrip in single page

Question

I am trying to design this page

but I have design like this ( both fragment are there but the pagertabstrip of unseen page only see when I moved to this page )

Issue Facing

How would I set the width of the PagerTabStrip so that both login and register( highlighted in the first image) is visible in the same page.

XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:weightSum="2"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:layout_weight="1.6"
        android:gravity="center"
        android:id="@+id/logo"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:textSize="25dp"
            android:gravity="center"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
            android:textStyle="bold"
            android:text=""
            android:visibility="visible"
            android:src="@drawable/logo_new"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textView8" />

    </LinearLayout>

    <LinearLayout
        android:layout_weight="0.4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.v4.view.ViewPager
            app:tabMode="fixed"
            android:id="@+id/vpPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.v4.view.PagerTabStrip
                app:tabMode="fixed"
                android:id="@+id/pager_header"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:paddingBottom="4dp"
                android:paddingTop="4dp" />


        </android.support.v4.view.ViewPager>
    </LinearLayout>

</LinearLayout>

Java File

public class Authentication extends AppCompatActivity {

    FragmentPagerAdapter adapterViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.authentication);


        SharedPreferences app_preferences = PreferenceManager.getDefaultSharedPreferences(getApplicationContext());
        Boolean login_already=app_preferences.getBoolean("login",false);

        if (login_already)
        {
            startActivity(new Intent(Authentication.this,MainActivity.class));
            finish();
        }


        ViewPager vpPager = (ViewPager) findViewById(R.id.vpPager);
        adapterViewPager = new MyPagerAdapter(getSupportFragmentManager());
        vpPager.setAdapter(adapterViewPager);


        // Attach the page change listener inside the activity
        vpPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            // This method will be invoked when a new page becomes selected.
            @Override
            public void onPageSelected(int position) {
                Toast.makeText(Authentication.this,
                        "Selected page position: " + position, Toast.LENGTH_SHORT).show();
            }

            // This method will be invoked when the current page is scrolled
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                // Code goes here
            }

            // Called when the scroll state changes:
            // SCROLL_STATE_IDLE, SCROLL_STATE_DRAGGING, SCROLL_STATE_SETTLING
            @Override
            public void onPageScrollStateChanged(int state) {
                // Code goes here
            }
        });

    }


    public static class MyPagerAdapter extends FragmentPagerAdapter {
        private static int NUM_ITEMS = 2;

        public MyPagerAdapter(FragmentManager fragmentManager) {
            super(fragmentManager);
        }

        // Returns total number of pages
        @Override
        public int getCount() {
            return NUM_ITEMS;
        }

        // Returns the fragment to display for that page
        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0: // Fragment # 0 - This will show FirstFragment
                    return Login.newInstance(0, "Login");
                case 1: // Fragment # 0 - This will show FirstFragment different title
                    return Registration.newInstance(1, "Register");

                default:
                    return null;
            }
        }

        // Returns the page title for the top indicator
        @Override
        public CharSequence getPageTitle(int position) {

            if (position==0)
                return  "Login";
            else
                return "Register";
            //return "Page " + position;
        }

    }
}

Answer 1

When you want to display only selected tab and other will hide then set your PagerTabStrip as bellow.

<android.support.v4.view.PagerTabStrip
        android:id="@+id/pager_header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:paddingBottom="4dp"
        android:paddingTop="4dp"
        app:tabMode="scrollable"
        app:tabTextColor="#000000"
        app:tabSelectedTextColor="#ff0000"
        app:tabIndicatorColor="#ff0000"/>

app:tabTextColor="" is your normal tab text color.
app:tabSelectedTextColor="" is color of your selected tab.
app:tabIndicatorColor="" is your selected tab indicatore color.

So use as per your requirement. For detail that how to use tab layout then check this tutorial.

Answer 2

That layout xml worked for me...

EDIT: Oh sry i'm using another lib: https://github.com/jpardogo/PagerSlidingTabStrip

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.astuetz.PagerSlidingTabStrip
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="48dip"
            android:textColor="#FFFFFFFF"
            app:pstsDividerColor="#FFFFFFFF"
            app:pstsDividerPadding="10dp"
            app:pstsDividerWidth="1dp"
            app:pstsIndicatorColor="#FF33B5E6"
            app:pstsIndicatorHeight="5dp"
            app:pstsTabPaddingLeftRight="20dip"
            app:pstsUnderlineColor="#FF33B5E6">
        </com.astuetz.PagerSlidingTabStrip>

        <FrameLayout
            android:id="@+id/movie_framelayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v4.view.ViewPager
                android:id="@+id/movie_pager"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            </android.support.v4.view.ViewPager>
        </FrameLayout>
    </LinearLayout>
</FrameLayout>