PagerAdapter, second page visible on start

Question

I'm trying to figure out, how the following thing is done with the android UI. I don't think that I am the olny one with this problem, but I don't know what to search for and didn't find any useful information yet.

My situation:

At the moment I have a class extending the FragmentStatePagerAdapter for getting the fragments for my pages. I have one "main" fragment (which should not be screen-filling!! <- very important information here) and some following screen filling pages coming afterwards.

I also have a PageTransformer, which transforms the pages, as if they are already behind the current page.) Similar to the DepthPageTransformer on this page: http://developer.android.com/training/animation/screen-slide.html#viewpager

My startscreen should look like this:

I will explain it shortly: The Area with the rounded corner on the left is the main page, which is not screen-filling. Behind that main page, the second page should already be visible in the Background. When I swipe the main page to the left, the second page will be the following active page.

So, here's the problem:

The second page is not displayed in the background, until I start to transform (swipe) the main page. I started to build the scenario (not finished yet due the problem), and it looks like this:

The dark gradient in the back is the standard gradient of android. The light blue area is a stretched image with transparency (in the case this is a piece for the puzzle)

So when I start to swipe the main page, it suddenly looks like this. After going back to the main page the second still remains visible then:

This is the situation it should look like from the beginning.

How can I achieve this, that two pages are visible from the beginning? This is the main activity code (basically it is the code from the given android dev link without its comments):

public class MainActivity extends FragmentActivity {

    private static final int NUM_PAGES = 5;
    private ViewPager mPager;
    private PagerAdapter mPagerAdapter;

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

        // Instantiate a ViewPager and a PagerAdapter.
        mPager = (ViewPager) findViewById(R.id.pager);
        mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
        mPager.setAdapter(mPagerAdapter);
        mPager.setPageTransformer(true, new DepthPageTransformer());
    }

    @Override
    public void onBackPressed() {
        if (mPager.getCurrentItem() == 0) {
            super.onBackPressed();
        } else {
            mPager.setCurrentItem(mPager.getCurrentItem() - 1);
        }
    }

    /**
     * A simple pager adapter that represents 5 ScreenSlidePageFragment objects,
     * in sequence.
     */
    private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
        public ScreenSlidePagerAdapter(FragmentManager fragmentManager) {
            super(fragmentManager);
        }

        @Override
        public Fragment getItem(int position) {
            switch (position) {
            case 0:
                return new ScreenMainSlideFragment();
            }
            return new ScreenSlideFragment();
        }

        @Override
        public int getCount() {
            return NUM_PAGES;
        }
    }

}

And here's the PageTransformer (maybe there's a solution):

public class DepthPageTransformer implements PageTransformer {
    private static float MIN_SCALE = 1f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);

        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page
            view.setAlpha(1);
            view.setTranslationX(0);
            view.setScaleX(1);
            view.setScaleY(1);

        } else if (position <= 1) { // (0,1]
            // Fade the page out.
            view.setAlpha(0.75f + (1 - position) * 0.25f);

            // Counteract the default slide transition
            view.setTranslationX(pageWidth * -position);

            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}

Thank you very much!

Answer 1

I'm not sure if this will solve your problem entirely, but have you looked at the getPageWidth method of your ViewPager's adapter. It could help you where you want to go:

https://developer.android.com/reference/android/support/v4/view/PagerAdapter.html#getPageWidth(int)

Return a value less than 1 in your adapter's implementation:

...
private static final int POS_MAIN_PAGE = 0;
private static final float WIDTH_MAIN_PAGE = 0.9f;
...

...
@Override
public float getPageWidth (int position) {
    if (position == POS_MAIN_PAGE) {
        return WIDTH_MAIN_PAGE;
    }
    return 1f;
}
....

Update after OP's comment:

If the 2nd page needs to be visible at the same time as the first, then a ViewPager may not be the right control for you. Pages in a ViewPager are shown next to each other, not on top of each other.

What you could do is to show both your main and '2nd' page in the first page (position==0) of your ViewPager (a ViewGroup/Fragment containing both the main and the '2nd' page, where your main page is slightly smaller). Your '2nd' page is fixed, your main page could be a sliding drawer. When the user swipes towards the left on the main pages (i.e. on the sliding drawer), the main page could be swiping out of sight and the '2nd' page stays put. When the user swipes towards the left on the '2nd' page, the '3rd' page in your ViewPager could be shown through the normal way of how a ViewPager moves from one screen to another and (both the main and the) '2nd' page will move out of sight.