From Dribbble to Android Motion

From Dribbble to Android Motion

On the Internet, there are many interesting animated templates with beautiful user interfaces for mobile applications, but not many examples with the implementation of these interfaces. Despite the abundance of various built-in frameworks and tools in the Android SDK, a beginner is often not easy to implement a beautiful user interface, including when there is a ready-made template.

In this article we will create a user interface, developed by Ivan Parfenov for the studio PLLTES .

ViewPropertyAnimator .

All in order

We calculate the final coordinates of the selected element from the list (its coordinates in DerailsFragment ), The list is RecyclerView ;
We store the current coordinates (coordinates in ? RecyclerFragment ) And transfer them to DetailsFragment (this is necessary for backward animation with API < 21);
Create a copy of the item selected from the list;
Make the selected element invisible (not a copy, but the element itself);
Add the copy created in point 3 to the root layout of the parent fragment, in our case this is RecyclerFragment ;
We start the animation of the other interface elements and move the created copy to the final coordinates from point 1;
When the animation is finished, create the transaction and show DetailsFragment ;
We start animation of interface elements in DetailsFragment .

Animation of elements UI

For the animation Toolbar we will create an additional View in RecyclerFragment and place it behind the screen on top. This View will be animated in Toolbar container in DetailsFragment (blue for gif) using ViewPropertyAnimator .

    
//In RecyclerFragment
details_toolbar_helper.translationY = -details_toolbar_helper.height

Animation BottomNavigationView and RecyclerView Also implemented using ViewPropertyAnimator , nothing complicated (changing transparency and moving).

A little bit from the Transition framework

In simple words, the android transition framework, when it starts the transition element animation, creates a copy of the content of this transition element (something like a print screen), makes a copy of the ImageView from this copy, then adds this picture to the additional layer of the overlay layer in the and launches the animation.

We android transition framework does not quite fit, because when the animation of the transition element begins, then all other elements of the user interface in the fragment are destroyed and we can not animate them. Those. when we are in RecyclerFragment click on the list item to open DetailsFragment and start the transition animation, then all other elements of the interface in RecyclerFragment are destroyed without animation.

To get the desired result, we will manually create a copy of the item selected from the list, add it to the overlay layer and then animate it. But here there is a small problem, in the documentation to the method ViewGroupOverlay add (view: View) It is written:

If the view has a parent, the view will be removed from that parent.

But for RecyclerView this does not work, the selected item is not deleted from RecyclerView after it is added to the overlay layer.

Here's what happens when we add the selected element to the overlay layer:

And we need this:

Therefore, we will not use the overlay layer, and we will add a copy directly to the root layout. Create a copy of the content of the selected item, add it to ImageView and set the coordinates:

    fun View.copyViewImage (): View {
val copy = ImageView (context)
val bitmap = drawToBitmap ()
copy.setImageBitmap (bitmap)
//In pre-Lollipop when creating a copy, the shadow from the card view is also copied, and we do not need an additional card view
return (if (Build.VERSION.SDK_INT> = Build.VERSION_CODES.LOLLIPOP) {
CardView (context) .apply {
.cardElevation = resources.getDimension (R.dimen.card_elevation)
radius = resources.getDimension (R .dimen.card_corner_radius)
addView (copy)
}
} else {
copy
}). apply {
layoutParams = [email protected]
layoutParams.height = [email protected]
layoutParams.width = [email protected]
x = [email protected]
y = [email protected]
}
}

Why create a copy, if you can just animate directly selected item from the list?

Because he himself is RecyclerView too, will be animated and correspondingly all of its elements, including the selected one, which we want to animate separately.

After that, add a copy to the root markup and start the animation.

    override fun onclick (view: View) {
val fragmentTransaction = initFragmentTransaction (view)
val copy = view.createCopyView ()
root.addView (copy)
view.visibility = View.INVISIBLE
startAnimation (copy, fragmentTransaction)
}

And here's what we got:

The finishing line is

Animation on gif above occurs in RecyclerFragment , and after its completion we need to show DetailsFragment .

    .withEndAction {
fragmentTransaction? .commitAllowingStateLoss ()
}

Why do we use commitAllowingStateLoss ?

If you do not use it and at the moment of animation it will be, for example, changing the screen orientation, then we get IllegalStateException . Here it is it is well written about it.

Next, run the animation of the necessary elements of the user interface in DetailsFragment .

Run it all together

Not exactly like on the original, but it looks like it.

Examples

The source code is available at GitHub , an example of an application with a similar design can be downloaded from Google Play , also the article is available at English . Thank you for attention!