This post is part of a series of posts showing Android implementation of INSTAGRAM with Material Design concept. Today we’ll implement transition between feed and comments Activities (showed between 9 and 13 second in concept video). We’ll skip buttons effects (ripples, send-complete animation etc.) and focus only on enter and exit animation for comment’s Acitvity.
This is the final effect described in today’s post (for both Android Lollipop and pre-21 versions):
Let’s start from adding boilerplate and less important stuff to our previously created project. We have to add:
- Picasso library for asychronous pictures loading (used in comments list, for users avatars),
- new Activity for comments with style and declaration in
Also we create layout for that Activity. Everything is almost the same like in MainAcitvity, except bottom components for adding comments. One more time we use
RecyclerView and some additional stuff. Everything is pretty straightforward and doesn’t require additional comments:
Next, create layout for item in comments list:
Snippet for rounded background used in comment’s avatar:
And the last thing, let’s handle onClick on bottom part of feed item which should open
CommentsActivity for current photo. For now we use whole bottom part of mocked view, but in close future we’ll replace this with real buttons. In this step we have to add onClick listener in RecyclerView adapter. This listener will be set on bottom view in every single item presented in list. Also we’ll create simple interface for integrating MainActivity with our adapter. How is it look in practice?
FeedAdapter class (changes only):
MainActivity class (changes only):
In case we missed something, here is full commit with onClick on item in RecyclerView adapter.
…and that’s all for initial config.
At the beginning we’ll create enter transition. Basing on concept video, here is the list of effects which we want to achieve:
- Static Toolbar – new Activity should be opened without ActionBar movement (we want to cheat user that he is still on the same window)
- Comments view should be expanded exactly from the place where user taps (no matter what is the current scroll position of feed)
- Comments items should be displayed one after another, right after expand animation will finish.
The simplest step in this post. Thanks that
Toolbar looks similar on
CommentsActivity all we need to do is to disable default transition between Acitvities. After that new window will be drawn on top of the previous one without any movement. And it will imitate static Toolbar effect. This is how it looks in code:
overridePendingTransition(0, 0); we disable exit animation (for
MainActivity) and enter animation (for
CommentsActivity from tapped place
Now we want to create expand animation which can be started from any (vertical) location on the screen. This animation includes two parts:
- Expanding background
- Showing content
Before we start coding our animations we have to make
CommentsActivity translucent. Otherwise expand animation for our background will be perfromed on top of default window background, instead of
MainAcitvity view. It’s because every activity has
windowBackground property defined in currently used Theme. If we want to disable it and make our Acitivty translucent we have to modify style like below:
Here is the difference:
Now we can create expand effect. First of all we have to get initial Y position for animation. In our example we don’t have to know the exact position of tapped place (animation will be so fast that user won’t notice that starting point isn’t super accurate). We can use Y position of tapped view and pass it to
CommentsActivity implement expand animation for background. For this we can use simple Scale animation (we don’t have any visible content in that moment, so no one will know that we are stretching background instead of expanding it 😉). Don’t forget to use
setPivotY() method for setting the right initial position.
As it’s showed above our animation will be started once, after we open
onPreDrawListeneranimation will be performed at the moment when all views in the tree have been measured and given a frame, but drawing operation hasn’t started yet.
In code above we have both, expand background and showing content animations implemented. And this is how it looks in practice:
Still something is missing, right?
Now we have to prepare animation for every element on our comments list. It’s pretty straightforward, but we have to keep in mind some important things:
- Every item’s animation should be delayed a little. Otherwise all animations will be performed at the same time and user will see “one” animation for whole content instead of animations for every single item.
- Adapter should have possibillity to lock animation, because we don’t wont to animate items while user is scrolling content.
- Also we have to provide method for temporary unlock and perform animation for single item (i.e. for adding new comment)
CommentsAdapter can look like below:
For displaying avatars we use Picasso library with CircleTransformation. Thanks
RecyclerView and his adapter we can use
notifyItemInserted() method (line 80) which performs default animation for newly inserted item. The rest of code is pretty simple.
This is how it’s used in
Items animations are blocked when user starts dragging
RecyclerView (they are temporarily unlocked when the user adds a new entry).
And that’s all. Enter transition for
CommentsActivity is finished.
The last thing that we have to implement is exit transition. Basing on concept video, there is nothig special to do. We have to create transition animation which slides out our Acitivty (to the bottom). We have to remember that we cannot move our
Toolbar. That’s why we use
overridePendingTransition(0, 0); again, and animate background view:
And that’s all! We’ve just finished second step of InstaMaterial concept implementation. In next post I want to focus on details which we currently missed.
Full source code of described project is available on Github repository.