Question

I would like to partially hide a fragment when a new fragment appears.

I am building on ScienceGuy’s code on GitHub, as referenced on Fragment Animation like Gmail Honeycomb App

I start with three fragments. The left most has a weight of 6, the middle one a weight of 4, and the right most a weight of 4. Setting the weightSum to 10 makes the left and middle fragments appear, and the right most is offscreen. This is what I want.

When the user selects an item in the middle fragment, I would then like to transition the left fragment so that two thirds of it moves off the left side of the screen. Because of the weights, I would effectively have 2, 4 , 4. At this point, the right fragment has moved onto the screen completely.

Using ScienceGuy’s code, I can get the right fragment to appear when the left fragment scrolls off, but the left fragment completely disappears.

I have tried using the following code:

final float middleFragmentWidth = getMiddleFragment().getView().getWidth();
ObjectAnimator animIn = ObjectAnimator.ofFloat(null, "x",
        -middleFragmentWidth/2, 0).setDuration(
        trans.getDuration(LayoutTransition.APPEARING));
trans.setAnimator(LayoutTransition.APPEARING, animIn);


ObjectAnimator animOut = ObjectAnimator.ofFloat(null, "x", -middleFragmentWidth,
        -middleFragmentWidth/2).setDuration(
            trans.getDuration(LayoutTransition.CHANGE_DISAPPEARING));
trans.setAnimator(LayoutTransition.DISAPPEARING, animOut);

I suspect that Android expects that a fragment is completely hidden when one “hides” it. Is there a way to animate fragments so that they are not actually hidden, but partially offscreen?

Alternatively, I could put the three fragments into a HorizontalScrollView, and try animating that. However, I’ve not done that because the middle and right most fragments contain listviews, and using a listview inside a HorizontalScrollView is to be avoided according to the docs.

Answer 1

I ended up creating a custom view based on LinearLayout which is 150% of the width of the device.

public class AutoSizingLinearLayout extends LinearLayout {
    private static final String TAG = AutoSizingLinearLayout.class.getSimpleName();
    final int myWidth;

public AutoSizingLinearLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
    myWidth = setScaledWidth(context);
}

public AutoSizingLinearLayout(Context context) {
    super(context);
    myWidth = setScaledWidth(context);
}

private int setScaledWidth(Context context) {
    if (this.isInEditMode()){
        return 1000;
    } else {
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        return (int) (1.5 * wm.getDefaultDisplay().getWidth());
    }
}

@Override
public android.view.ViewGroup.LayoutParams getLayoutParams() {
    android.view.ViewGroup.LayoutParams params = super.getLayoutParams();
    params.width = myWidth;
    return params;
}

And then I animate it like this.

                    ObjectAnimator a = ObjectAnimator.ofFloat(linearView,"translationX", -scrollamount).setDuration(900);
                a.start();