Adding a frame around fragments in a ViewPager

Ask by : codedawg82 November 05, 2012 21:33

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);

            return f;

        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=""
    android:orientation="vertical" >


View original question

Answer by : LuksprogNovember 04, 2012 15:23

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:

        android:layout_height="match_parent" />

        android:layout_height="match_parent" />

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) {
        mPaint = new Paint();

    public ViewPagerOverlayFrame(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();

    protected void onDraw(Canvas 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.

View original answer