How to correctly replace a fragment in a view pager?

Question

I have the following structure of my app:

v4 FragmentActivity --> v4 ViewPager --> v4 Fragment
                                     --> v4 ListFragment

I'm using ActionBarSherlock (which I would really recommend), and the structure of the Activity is based on the demo at https://github.com/JakeWharton/ActionBarSherlock/blob/master/samples/demos/src/com/actionbarsherlock/sample/demos/app/ActionBarTabsPager.java . So the two fragments are displayed as two tabs for the user.

When a user clicks an element of the ListFragment I want to load an url in a WebView in the same place as the list is. That is, I want to replace the ListFragment (put it on the back stack) with a new WebView.

So far I've tried using FragmentTransaction.replace() from the Activity. That kind of works, except two issues:

The ListFragment doesn't display the WebView before I rotate the device (i.e. the acitity is recreated).
The content of the other tab disappears (it's just blank)

What is the correct way to replace the ListFragment with another Fragment?

score 1 · Answer 1 · answered Jan 28 '12 at 10:09

Alternatevely, you could use a custom HorizontalScrollView instead of a ViewPager and overwrite its onTouchEvent method to get the same snapping effect you get with a ViewPager, like this:

public class MyHorizontalScrollView extends HorizontalScrollView {

    public MyHorizontalScrollView(Context context) {
        super(context);
    }

    public MyHorizontalScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyHorizontalScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }   

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
           case MotionEvent.ACTION_UP:
                    if (mScrollable) {
                        View child = getChildAt(0);
                        if (child != null) {
                            final int currentX = getScrollX();
                            final int windowWidth = getResources().getDisplayMetrics().widthPixels;
                            final int totalWidth = child.getWidth();
                            int showingElementNumber = 1;
                            int i = windowWidth;
                            while (i < currentX && i < totalWidth) {
                                i+=windowWidth;
                                showingElementNumber++;
                            }

                            int scrollTo = 0;
                            if (currentX < (windowWidth * (showingElementNumber - 1) + windowWidth/2)) { // Previouses widths + half the current
                                scrollTo = windowWidth * (showingElementNumber - 1);
                            } else {
                                scrollTo = windowWidth * showingElementNumber + marginSize; 
                            }
                            smoothScrollTo(scrollTo, 0);
                            return false;

                        }
                    }
                    return super.onTouchEvent(ev);
            default:
                return super.onTouchEvent(ev);
        }
    }
}

Then you could add two Fragments inside it and use a regular FragmentTransaction with addToBackStack() to get what you want.

NOTE: If you want to use the above code, just make sure your Fragments are the same width as the entire screen and remember you structure should be something like

MyHorizontalScrollView > LinearLayout > YourFragment1
                                      > YourFragment2

I liked this solution. It was easy to implement and didn't mess up the code with workarounds. In this particular case I had some issues with scrolling sideways triggering link clicks in the WebView. — Roy Solberg, Feb 01 '12 at 07:23

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

As a workaround I've done what AndroidTeam At Mail.Ru and connoisseur suggest as answers on Replace Fragment inside a ViewPager. This is of course a pretty bad way solving this. I feel kinda dirty now. :-S

edited May 23 '17 at 12:03

Community

1
1

answered Jan 27 '12 at 20:52

Roy Solberg

14,329
9
39
68

How to correctly replace a fragment in a view pager?

2 Answers2