Question

I have been reading and applying the android design from this page:

http://developer.android.com/design/index.html

I want to use the following ‘animation’ (or whatever it is):

http://www.electronicsweekly.com/blogs/eyes-on-android-updates/2012/01/13/Android%20Design%202.jpg

can someone help me get started how to use these boundaries?

Answer 1

This is how i would do it:

1. extend a ScrollView of your choice
2. call setStaticTransformationsEnabled(true); in the constructor
3. override onTouchEvent(MotionEvent ev) to track the position of the finger
4. override getChildStaticTransformation(View child, Transformation t)
5. inside that function use the Camera class to create a 3D-transformation matrix. Something like rotate around x-axis with the center of the rotation being the center of the scrollview. Rotation angle should be dependent on the scroll position of the child and the current finger position.

EDIT: now that i thought about it a bit longer you should do it a little bit differently.

• do not override getChildStaticTransformation(View child, Transformation t) but drawChild(Canvas canvas, View child, long drawingTime) instead.
  this allows you to use the drawing cache api. (Example for that in my first link). This means that the child is first rendered into a bitmap improving drawing performance and allowing you to apply this linear blue to transparent gradient to the view

You can look here or here for an example how to use the Camera.
This is a project with an overscroll bounce effect.
To make the overscroll effect cool you should use an animations when the user releases the finger. Since i like the new android animation framework very much i would use nine old androids for that.
I guess is that implementing this effect properly would take at least 1-2 full days for an experienced android programmer.