Android – smooth expansion and contraction view

// previously invisible view
View myView = findViewById(R.id.my_view);
 
// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;

// get the final radius for the clipping circle
int finalRadius = myView.getWidth();

// create and start the animator for this view
// (the start radius is zero)
ValueAnimator anim =
 ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
anim.start();

/ / inside your activity
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// set an exit transition
getWindow().setExitTransition(new Explode());< /pre> 
Activity shared element conversion
You can specify how the elements shared between two activities will be converted between them.
 
The supported conversions are:
 
> changeBounds – Animate changes to the layout boundary of the target view.
> changeClipBounds – Animate changes to the clip boundary of the target view.
> changeTransform – Animate the zoom and rotation changes of the target view.
> changeImageTransform – Set the animation size and scale type changes for the image view.
 
To perform shared element conversion, you need to do the following: (source)
 
>Enable window content conversion in your style .
>Specify the shared element transition in your style.
>Define the transformation as an XML resource.
>Use the android:viewName attribute to specify a common name for the shared elements in the two layouts.
>Use the ActivityOptions.makeSceneTransitionAnimation method.
 
 
// get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);< br />
// get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// define a click l istener
imgContainerView.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View view) {
 Intent intent = new Intent(this, Activity2.class) ;
 // create the transition animation-the images in the layouts
 // of both activities are defined with android:viewName="robot"
 ActivityOptions options = ActivityOptions
 .makeSceneTransitionAnimation (this, androidRobotView, "robot");
 // start the new activity
 startActivity(intent, options.toBundle());
 }
});
 
An animation I haven’t thought of is an extension/contract animation in the same event, which can be seen in the calendar app.
 
The only thing I can say is that they are using elevation because we The shadow can be seen. I will try to crack it and see if I can recreate it.
 

In the Material Design video, the view expands and contracts very smoothly. I Trying to achieve this in the days of the old Android API, it was really expensive and very slow.

Is there any new API in Android-L that can achieve these effects?

The video effect is http://www.youtube.com/watch?v=Q8TXgCzxEnw#t=26

You can use The new animation API in android-L easily creates most of the effects you see in this video.

Reveal the effect
You can animate the cut circle to show or hide the view .
This is what you see when you click the "Play" button in the video. This button expands and displays the media player.

Code for displaying the hidden view (source)< /p>

// previously invisible view
View myView = findViewById(R.id.my_view);

// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;

// get the final radius for the clipping circle
int finalRadius = myView.getWidth();

// create and start the animator for this view
 // (the start radius is zero)
ValueAnimator anim =
 ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
anim.start();

< p>If you follow the above link, you can find the code to hide the view.

Activity entry and exit transition
You can specify how the view enters or exits the scene.

Currently The supported transitions are explosion, sliding and fade-in and fade-out. Any extension of android.transition.Visibility is also supported.

You can see many examples throughout the video.

Explosion exit transition Code (source)

// inside your activity
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// set an exit transition
getWindow( ).setExitTransition(new Explode());

Activity shared element transition
You can specify how elements shared between two activities will be transformed between them.

The supported transformations are:

> changeBounds – Animation shows the change of the layout boundary of the target view.
> changeClipBounds – Animation shows the change of the clip boundary of the target view.
> changeTransform – Animation of the target view Zoom and rotation changes.
> changeImageTransform – Set the animation size and scale type changes for the image view.

To perform the shared element transformation, you need to do the following: (source)

< p>>Enable window content transformation in your style.
>Specify the shared element transition in your style.
>Define the transformation as an XML resource.
>Use the android:viewName attribute for two layouts Specify a common name for the shared element in.
>Use the ActivityOptions.makeSceneTransitionAnimation method.

// get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// define a click listener
imgContainerView.setOnClickListener(new View.OnClickListe ner() {
 @Override
 public void onClick(View view) {
 Intent intent = new Intent(this, Activity2.class);
 // create the transition animation- the images in the layouts
 // of both activities are defined with android:viewName="robot"
 ActivityOptions options = ActivityOptions
 .makeSceneTransitionAnimation(this, androidRobotView, "robot");
 // start the new activity
 startActivity(intent, options.toBundle());
 }
});

An animation that I haven’t thought of is The extension/contract animation in the same event can be seen in the calendar app.

The only thing I can say is that they are using elevation because we can see the shadows. I will try to hack it and see See if I can recreate it.