I am able to go to my next destination with a circular reveal animation. My only problem is the previous fragment is gone, unless I set a fade out exit transition in my action app:exitAnim="#anim/exit_fade_out". I wanted to ask if anyone has been able to keep the previous fragment visible while doing the circular revealing.
this is the code for revealing and hiding the new fragment.. so far this works yet I cannot show the previous fragment as its masking the next one
private val maxScreenDimension : Float
get() {
return max(container.width, container.height).toFloat()
}
private fun circularReveal(point: Point) {
val viewTreeObserver = container.viewTreeObserver
if (viewTreeObserver.isAlive) {
viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
override fun onGlobalLayout() {
doCircularReveal(point)
container.viewTreeObserver.removeOnGlobalLayoutListener(this)
}
})
}
}
private fun doCircularReveal(point: Point) {
val initRadius = 0f
val finalRadius = maxScreenDimension
val circularReveal = ViewAnimationUtils.createCircularReveal(
container,
point.x,
point.y,
initRadius,
finalRadius
)
circularReveal.duration = resources.getInteger(R.integer.circular_animation_out).toLong()
circularReveal.start()
}
private fun circularHide(point: Point) {
val initRadius = maxScreenDimension
val finalRadius = 0f
val circularReveal = ViewAnimationUtils.createCircularReveal(
container,
point.x,
point.y,
initRadius,
finalRadius
)
circularReveal.duration = resources.getInteger(R.integer.circular_animation_in).toLong()
circularReveal.doOnEnd {
container.isVisible = false
findNavController().popBackStack()
}
circularReveal.start()
}
You can do a little hack to make Navigation component to leave the fragment in place during circular reveal animation by giving it a fake animation for exitAnim with the same duration that your circular reveal.
For example it can look like this:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="1.0" android:toAlpha="1.0"
android:duration="#android:integer/config_mediumAnimTime" />
</set>
So in case you wonder how to retain the previous screen and do a circular reveal animation for the next screen. My solution was to simply add a new fragment. I don't think the Navigation component allows for this type of animation. Earlier I did a shared element transition which worked fine as long as I used a fade in/out transition between the two screens. In that way I was able to retain the previous screen while the shared element transition played out. I am thinking the Navigation component is constantly replacing the following fragment.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
i have one activity that has 3 text view. i want to animate these text views one by one.
first txt1 come from bottom to middle then txt2 come 10dp under txt1 and finally txt3.
please guide me how implement it
This can be achieved with translate and alpha animation.
Create XML file named down_to_top.xml in anim folder (create one in you "res" folder if it's not present)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="700">
<translate
android:fromYDelta="50%p"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:toYDelta="0" />
<alpha
android:fromAlpha="0"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:toAlpha="1" />
</set>
In your activity
Initialize your text views to tv1,tv2,tv3
Copy these three functions in your activity.
Call setAnimation() in your onCreate function of activity
private fun setAnimation() {
tv2.visibility = View.INVISIBLE // initially keeping t2 invisible
tv3.visibility = View.INVISIBLE // initially keeping t3 invisible
// Creating obect of Animation
val anim = AnimationUtils.loadAnimation(activity,
R.anim.down_to_up)
//Listener to get callback when animation of tv1 ends
val animListener1 = object : Animation.AnimationListener {
override fun onAnimationStart(animation: Animation) {}
override fun onAnimationEnd(animation: Animation) {
// when animation of first TextView ends we start
animation of textView 2 and make it visible
animateSecondView()
tv2.visibility = View.VISIBLE
}
override fun onAnimationRepeat(animation: Animation) {}
}
anim.setAnimationListener(animListener1)
tv1.startAnimation(anim)
}
private fun animateSecondView() {
val anim = AnimationUtils.loadAnimation(activity,
R.anim.down_to_up)
//Listener to get callback when animation of tv2 ends
val animListener2 = object : Animation.AnimationListener {
override fun onAnimationStart(animation: Animation) {}
override fun onAnimationEnd(animation: Animation) {
// when animation of TextView 2 ends we start animation of
textView 3 and make it visible
animateThirdView()
tv3.visibility = View.VISIBLE
}
override fun onAnimationRepeat(animation: Animation) {}
}
anim.setAnimationListener(animListener2)
tv2.startAnimation(anim)
}
private fun animateThirdView() {
val anim = AnimationUtils.loadAnimation(activity,R.anim.down_to_up)
tv3.startAnimation(anim)
}
You will have a result like this.
Here are a few ways you can achieve animations in android
Move a view using animation
A good place to start with the recommended way of writing animations in Android.
AndroidViewAnimations
A beginner-friendly pre-made animations library for Android
Animate all the things. Transitions in Android
A very good article explaining how to implement different types of translations on Views
Above mentioned links are a great place to get started.
HI i have the below animation for a view below:
val duration = 2000L
val visible = 1.0f
imageAVater.apply {
animate().translationYBy(-100f).alpha(visible).setDuration(duration).setListener(object : AnimatorListenerAdapter(){
override fun onAnimationEnd(animation: Animator?) {
visibility = View.VISIBLE
}
})
}
i want it to move from slightly off-position and into position and to also reveal itself by setting the alpha .
SO far neither works.
ALl the code above does is move the image from current default position on my layout(lets say i positioned it in xml along the Y axis position 200) and then it moves from position 200 to position 100 and also the alpha does not work, the item is visible all the time despite it being set to View.Gone in my xml
android:visibility="gone"
How can i set a start and end Y axis value for this translation animation and how can i get the alpha to work so that the view appears from hidden/gone?
i want it to start at 200 y and have it transition to 100 y and to also reveal itself from being hidden/gone to being shown at the same time as the transition
you need to specify starting values for y and alpha. EG.
imageAVater.apply {
alpha = 0f
animate().alpha(1f).setDuration(2000).start()
}
leave the view's visibility always to visible. You can not animate a view that is gone
I am trying to make a fade out animation to a View, but I don't want the standard one. I want the fade out to start from left to right (or right to left no matter). Any idea on how to do it? I didn't really found anything for android on SO. This is my code for the moment:
val fadeOut = AlphaAnimation(1f, 0f)
fadeOut.interpolator = AccelerateInterpolator()
fadeOut.duration = 3000L
fadeOut.setAnimationListener(object : Animation.AnimationListener {
override fun onAnimationStart(animation: Animation) {
}
override fun onAnimationEnd(animation: Animation) {
mTextView.visibility = View.VISIBLE
}
override fun onAnimationRepeat(animation: Animation) {}
})
mTextView.startAnimation(fadeOut)
From what I can understand, it sounds like you want a reveal animation rather than a fade in/out animation. Your best bet would be to write your own reveal Animation, but if you're ready to settle for a simpler hack, then you could use the circular reveal animation that's available in ViewAnimationUtils. Just start the circular far off to the left/right so that the circular reveal feels like a linear reveal.
final View myView = findViewById(R.id.animatedImageView);
int cx = myView.getMeasuredWidth() * 2;
int cy = myView.getMeasuredHeight() / 2;
int finalRadius = (int) Math.hypot(myView.getWidth()*2, myView.getHeight());
Animator anim;
// for reveal
anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
// for hiding
// anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, finalRadius, 0);
// Do note that you'll need to factor in the 'reveal' time taken in by the extra empty space.
// You could probably get around this by creating your own interpolator,
// but in which case, you might as well just create your own reveal animation.
anim.setDuration(3000);
// make the view visible and start the animation
myView.setVisibility(View.VISIBLE);
anim.start();
Try this:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<alpha
android:duration="1000"
android:fromAlpha="0.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:toAlpha="1.0" />
<translate
android:fromXDelta="100%p" android:toXDelta="0"
android:duration="500" />
</set>
I want to implement shared element transition in my app, when one activity's recycler view item transforms into another activity like here: https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F15N3n1xwTt0briEbfIvFUG01pMv2d_xaT%2F02-focus-focalelement-do.mp4. (source: https://material.io/design/motion/choreography.html#using-a-focal-element)
Namely, the item is fading out and changes bounds then the new activity fade in. As far as I understand it is simple AutoTransition, but it doesn't work. Simple fading doesn't work as well.
Thus, for now I achieve only that the item gets background of new activity an then changes its bounds.
So, I ended up by adding recycler view item's layout in the resulting activity layout. The data (e.g. the title, etc.) of the clicked item is transferred to the next activity with intent.putExtra(). Shared elements in such case will be of course the item's root view and resulting activity's root view. When activity starts I set the data of the item to matching views in activity via SharedElementCallback, e.g.:
setEnterSharedElementCallback(
object : SharedElementCallback() {
override fun onSharedElementStart(...) {
val title = intent.getStringExtra(TITLE)
activity_item_title.text = title
........
}
override fun onSharedElementEnd(...) {
}
})
This allows to show exactly the same item view at the beginning of the transition. Then it should start change its bounds, fading out this item's view at the same time. And at some moment (e.g. in the middle of the transition) when the initial view completely fades out, the laouyt of the activity shows up, fading in gradually. To do this we need to hide item's view in the middle of the transition (View.visibility = View.GONE) and make activity views visible. Probably this is not the best way, but I solve this by adding a listener to shared element enter transition and used Handler().postDelayed:
window.sharedElementEnterTransition.addListener(
object : android.transition.Transition.TransitionListener {
override fun onTransitionEnd(transition: Transition) {}
override fun onTransitionResume(transition: Transition) {}
override fun onTransitionPause(transition: Transition) {}
override fun onTransitionCancel(transition: Transition) {}
override fun onTransitionStart(transition: Transition) {
Handler().postDelayed({
activity_item.visibility = View.GONE
activity_view_1.visibility = View.VISIBLE
activity_view_2.visibility = View.VISIBLE
.............
.............
// Also you could e.g. set the background to your activity here, ets.
activity_view_root.background = backgroundDrawable
}, 150) //suppuse that the whole transition length is 300ms
}
}
})
The transition animations themselves could look as follows:
<transitionSet>
<targets>
<target android:targetId="#id/activity_root_view"/>
</targets>
<transition
class="com.organization.app.utils.FadeOutTransition"
android:duration="150"/>
<transition
class="com.organization.app.utils.FadeInTransition"
android:startDelay="150"/>
<changeBounds android:duration="300"/>
</transitionSet>
Here, custom FadeOutTransition and FadeInTransition were used since simple android <fade/> animation doesn't work with shared elements. These classes are similar to that given in the answer here: Why Fade transition doesn't work on Shared Element.
The steps for creating return transition are similar.
i want to crate animation from right to left when change activity, but not of window only certain layout, this is my code :
val transition = Slide()
transition.duration = 300
transition.slideEdge = Gravity.END
transition.mode = Visibility.MODE_IN
transition.interpolator = DecelerateInterpolator(2f)
transition.addTarget(R.id.ln_verification_phone)
window.enterTransition = transition
but when i remove transition.addTarget(R.id.ln_verification_phone), animation working but all of window, i want to target of view, are there wrong in my code, i try using exclude also not work