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 isRecyclerView
; - We store the current coordinates (coordinates in
? RecyclerFragment
) And transfer them toDetailsFragment
(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!



It may be interesting
This publication has no comments.
weber
Author15-09-2018, 17:14
Publication DateDevelopment of mobile applications / Programming
Category- Comments: 0
- Views: 377
Comments
Quickly this site could indisputably generally always be dominant relating to every one of web site buyers, as a consequence of fastidious stories plus exams https://www.pizzahutcouponcode.com/pizza-hut-coupons-code/
Helpful information. Fortunate me I discovered your web site accidentally,
and I am stunned why this accident did not happen earlier! I bookmarked it. Thanks, I've recently been looking for information about this topic for [hide]a[https://www.pizzahutcouponcode.com/pizza-hut-coupons-code/
] long time and yours is the greatest I've discovered so far. But, what concerning the conclusion? Are you positive about the source?
Helpful information. Fortunate me I discovered your web site accidentally,
and I am stunned why this accident did not happen earlier! I bookmarked it. Thanks, I've recently been looking for information about this topic for [hide]a[https://www.pizzahutcouponcode.com/pizza-hut-coupons-code/
] long time and yours is the greatest I've discovered so far. But, what concerning the conclusion? Are you positive about the source?
this is really nice to read..informative post is very good to read..thanks a lot! How is the cost of house cleaning calculated?
It’s very informative and you are obviously very knowledgeable in this area. You have opened my eyes to varying views on this topic with interesting and solid content.
entegrasyon programları
entegrasyon programları
I am really enjoying reading your well written articles. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work.
entegrasyon programları
entegrasyon programları
I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! keep up the good work...먹튀