Question

I understand that in order to swipe between activities I need to use the FragmentPageAdapter as in the answer to this this question.

However, I’m trying to put a frame around the Fragments that does not move. Something like a picture frame that stays in place around the edges of the screen and when you swipe, the frame stays in place, while the Fragments slide between each other. Basically, a masking effect. How can I implement this?

In my FragmentActivity’s FragmentPagerAdapter I have a different Fragment that I call compared to the example shown which is a list fragment (ArrayListFragment). I use a a generic fragment as so:

public static class TestFragment extends Fragment{
        /**
         * Create a new instance of DetailsFragment, initialized to
         * show the text at 'index'.
         */
        public static TestFragment newInstance(int index) {
            TestFragment f = new TestFragment();

            // Supply index input as an argument.
            Bundle args = new Bundle();
            args.putInt("index", index);
            f.setArguments(args);

            return f;
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View v = inflater.inflate(R.layout.mytext, container, false);
            return v;
        }
    }

The mytext layout is quite simple:

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

    <TextView
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:text="woohoo"
        android:gravity="center"></TextView>

</LinearLayout>

Answer 1

One easy way to implement that frame is to put the ViewPager in a FrameLayout or a RelativeLayout with a custom View on top of it:

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

    <com.luksprog.ViewPagerOverlayFrame
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

In that custom View‘s onDraw method you’ll draw the frame you want. The code below will draw a unswipeable red frame near the edges of the ViewPager:

public class ViewPagerOverlayFrame extends View {

    private Paint mPaint;   

    public ViewPagerOverlayFrame(Context context) {
        super(context);
        mPaint = new Paint();
        mPaint.setColor(Color.RED); 
            mPaint.setStrokeWidth(60.0f);       
    }

    public ViewPagerOverlayFrame(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(60.0f);       
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawLine(0, 0, getMeasuredWidth(), 0, mPaint);
        canvas.drawLine(getMeasuredWidth(), 0, getMeasuredWidth(),
                getMeasuredHeight(), mPaint);
        canvas.drawLine(getMeasuredWidth(), getMeasuredHeight(), 0,
                getMeasuredHeight(), mPaint);
        canvas.drawLine(0, getMeasuredHeight(), 0, 0, mPaint);
    }

}

You may want to add some padding to the ViewPager so its content doesn’t get clipped by the frame.