View Pager - how can I place fixed buttons on top of it

Question

In my android app I have a view pager that is essentially a slide show of pictures. those pictures are the background images of 5 different fragments

I want to put two buttons on top of it all, and those buttons to remain fixed on screen. How can I do that?

public class WhatIsThis extends SherlockFragmentActivity {

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

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.welcome_slides_view_pager);

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

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

            mPager.setCurrentItem(mPager.getCurrentItem() - 1);
        }
    }


    private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
        public ScreenSlidePagerAdapter(FragmentManager fragmentManager) {
            super(fragmentManager);
        }


        @Override
        public SherlockFragment getItem(int position) {
            if(position == 1) {
                return new WelcomeSlideFragmentA();
            } else if (position == 2) {
                return new WelcomeSlideFragmentB();
            } else if (position == 3) {
                return new WelcomeSlideFragmentC();
            } else if (position == 4) {
                return new WelcomeSlideFragmentD();
            } else {
                return new WelcomeSlideFragmentE();
            }
        }

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

}

welcome_slides_view_pager.xml:

<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Answer 1

You can simply replace the content of welcome_slides_view_pager.xml with this :

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <Button
        android:id="@+id/button_previous"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:text="Previous" />

    <Button
        android:id="@+id/button_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:text="Next" />
</RelativeLayout>

That way you will have two fixed buttons over your viewpager (I have placed them in order to use them as next and previous page for the view pager, I guess that's what you want to do).

Answer 2

You can put these two button above of view pager inside in layout