google chrome animation effect in android

Question

I am trying create animation just like used in google chrome when opening 2 or more tabs. Here is the image below.

How could I do make this effect as in google chrome. They animated like SlidingDrawer (but it is not a slidingDrawer as far as I know.)

Answer 1

It is not exactly as Google chrome effect but maybe helpful someone in the future.

public class MyActivity extends Activity implements View.OnTouchListener {

    ViewGroup _root;
    private int _xDelta;
    private int _yDelta;
    LinearLayout relativeLayout1;
    LinearLayout relativeLayout2;
    LinearLayout relativeLayout3;
    LinearLayout relativeLayout4;
    LinearLayout relativeLayout5;
    LinearLayout relativeLayout6;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main3);

        _root = (ViewGroup)findViewById(R.id.root);
        relativeLayout1 = new LinearLayout(this);
        relativeLayout2 = new LinearLayout(this);
        relativeLayout3 = new LinearLayout(this);
        relativeLayout4 = new LinearLayout(this);
        relativeLayout5 = new LinearLayout(this);
        relativeLayout6 = new LinearLayout(this);
        relativeLayout1.setOrientation(LinearLayout.VERTICAL);
        relativeLayout2.setOrientation(LinearLayout.VERTICAL);
        relativeLayout3.setOrientation(LinearLayout.VERTICAL);
        relativeLayout4.setOrientation(LinearLayout.VERTICAL);
        relativeLayout5.setOrientation(LinearLayout.VERTICAL);
        relativeLayout6.setOrientation(LinearLayout.VERTICAL);
        relativeLayout1.setId(1);
        relativeLayout2.setId(2);
        relativeLayout3.setId(3);
        relativeLayout4.setId(4);
        relativeLayout5.setId(5);
        relativeLayout6.setId(6);

        relativeLayout1.setBackgroundColor(Color.RED);

        relativeLayout2.setBackgroundColor(Color.BLUE);

        relativeLayout3.setBackgroundColor(Color.GREEN);

        relativeLayout4.setBackgroundColor(Color.GRAY);

        relativeLayout5.setBackgroundColor(Color.CYAN);

        relativeLayout6.setBackgroundColor(Color.DKGRAY);

        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 300);
        relativeLayout1.setLayoutParams(layoutParams);
        _root.addView(relativeLayout1);

        RelativeLayout.LayoutParams layoutParams1 = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 300);

//        relativeLayout1.setOnTouchListener(this); // first element have to stay fixed
        relativeLayout2.setOnTouchListener(this);
        relativeLayout3.setOnTouchListener(this);
        relativeLayout4.setOnTouchListener(this);
        relativeLayout5.setOnTouchListener(this);
        relativeLayout6.setOnTouchListener(this);

        relativeLayout2.setLayoutParams(layoutParams1);
        relativeLayout3.setLayoutParams(layoutParams1);
        relativeLayout4.setLayoutParams(layoutParams1);
        relativeLayout5.setLayoutParams(layoutParams1);
        relativeLayout6.setLayoutParams(layoutParams1);

        _root.addView(relativeLayout2);
        _root.addView(relativeLayout3);
        _root.addView(relativeLayout4);
        _root.addView(relativeLayout5);
        _root.addView(relativeLayout6);
    }

    public boolean onTouch(View view, MotionEvent event) {
        final int X = (int) event.getRawX();
        final int Y = (int) event.getRawY();
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                LinearLayout.LayoutParams lParams = (LinearLayout.LayoutParams) view.getLayoutParams();
//                _xDelta = X - lParams.leftMargin;
                _yDelta = Y - lParams.topMargin;
//                System.out.println("getRawY"+(int)event.getRawY());
                System.out.println("DOWN=="+_yDelta);
                System.out.println("view height=="+ view.getHeight());
                System.out.println("root view="+_root.getHeight());

                break;
            case MotionEvent.ACTION_UP:
                System.out.println("getRawY="+(int)event.getRawY());
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
                break;
            case MotionEvent.ACTION_POINTER_UP:
                break;
            case MotionEvent.ACTION_MOVE:
                System.out.println("getRawYMOVE="+(int)event.getRawY());
                LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) view.getLayoutParams();
//                layoutParams.leftMargin = X - _xDelta;
                int dif = Y - _yDelta;
                if (view.getHeight() + (dif) > 30){
                    if (dif < 0 && Math.abs(dif) >= view.getHeight()/5){
                            layoutParams.topMargin = dif;
                            view.setLayoutParams(layoutParams);
                    } else if (dif <= 0 && dif < view.getHeight()/5){
                        layoutParams.topMargin = dif;
                        view.setLayoutParams(layoutParams);
                    }

                    View p_view = findViewById(view.getId() - 1);
                    if (p_view.getId() != 1){

                        p_view.setLayoutParams(layoutParams);
                    }
                }

                break;
        }
        _root.invalidate();
        return true;
    }

}