According to the material design guideline
"The floating action button can transform into a single sheet of material which contains all the actions".
I want to create the following animation without using third party libraries.
First you need to cut that animation in small parts.
In that example i can deduce 3 steps:
a Ripple effect on the FAB triggered on click event.
a translation to the left applyed to the FAB.
a Circular Reveal animation applyed to the card.
So you need to create a FAB (visible) and a card (invisible). The FAB at it initial position and the card to it final one. After having triggered the ripple effect on the FAB (step 1) and at the end of your move event on FAB again (end of step 2), you just need to dismiss the FAB and start the Reveal animation on the card (step 3).
To launch a circular reveal animation, just call the ViewAnimationUtils.createCircularReveal method. Pass your card view, the X,Y start coordinate, the radius and that's it! The difficulty will definitely be to find the best duration and start/end coordinate between each animations to set it as smooth as possible.
If you want, you can look my post here https://stackoverflow.com/a/41957295/1053880. I used a circular reveal animation to create a switch between two toolbars. Some part of your code will be similar to mine (i also reverted my anim at the end).
Sample project on GitHub
https://github.com/fbourlieux/android-material-circular_reveal_animation
Hope this help!
François
Userful links:
Link1: Circular-Reveal-Animation project on GitHub
Link2: Create Circular Reveal Animation And Ripple Effect like Whatsapp
Link3: Simple Ripple + Reveal + Elevation tutorial
Link4: Scale, Translate, Rotate animation
Link5: Ripple animation
Related
I am using an Material 2 version of a BottomSheet and I get the animations current progress, I want to synchronize the appearance of the Top App Bar so that when the Bottom Sheet is fully up it is also visible.
This question applies to other kind of animations as well, I've been reading documentation and I didn't find any way of controlling any animation based on state.
I've used different kind of animations but the nearest I've got is to animate the content's height based on that state, but this doesn't come from the bottom up.
Thanks!
I have an issue regarding design 'Setting screen' for my app. In this screen I need to design circular menu options in a triangular shape and I need to set OnClickListener only on the triangular area, which is only visible option border area. I can't understand what approach I need to use to achieve this design as well as set OnClickListener.
In Android, a feature called radial reaction exists (find it at https://material.google.com/motion/choreography.html#choreography-radial-reaction).
After a bit of research, I discovered that we can use this to reveal views (see http://android-developers.blogspot.com/2014/10/implementing-material-design-in-your.html and http://pulse7.net/android/android-create-circular-reveal-animation-and-ripple-effect-like-whatsapp/).
Is it possible to reveal a certain color, instead of a view? (For example, change the background color to red when the user clicks the layout)
For now, only revealing a view is supported out-of-the box in ViewAnimationUtils https://developer.android.com/reference/android/view/ViewAnimationUtils.html
You could have your layout file define two different background layouts (LinearLayouts for example). The circular reveal would reveal whichever view you need.
I want to create animation for my fab like this example in material design principle, I realized that icon inside fab has 2 animation. One that rotate share icon and another is alpha animation simultaneity. after that another icon replaced. but when I create animation set for this goal, whole fab rotated and disappeared, but I want that icon inside fab take this animation. How can I create this animation? thanks
The best way to achive that is create a Custom Floating action button class and Override your setImageDrawable method, doing the translation animation there. Also you can modify your onDraw method to add an animation to your FloatingActionButton
You have to use a third-party library to achieve this result. Take a look here It is important to notice that it is possible to implement your own way but you would be kind of "reinventing the wheel".
If you want to do this anyway, you can create several FABs and change visibilities and move them with simple animations.
I want to create an activity transition like the one shown in the Full Screen section of this page of the Material Design spec. I'm hoping I can get a press of the FAB to spread with a circular reveal across the bottom of the view and then transition to the new activity with a slide up from the bottom.
As a first step towards this goal I've used a Slide transition with a Gravity.BOTTOM to animate in the new Activity. This is working, but as well as the slide the incoming activity is fading in. In the animation on the spec the sliding activity is solid as it slides up, and I'm not sure how to achieve this effect. I've looked in the code for Slide and its parent Visibility and there is a method called forceVisibility(int visibility, boolean isStartValue), but it's not part of the public API so I can't use it. The fact that it exists does suggest that what I want to do is possible (as does the animation on the Material Design guide), but I'm not sure what I need to do.
Can anyone point me in the right direction?