To represent UI with some creative thing we use animation. Animation in the android application is provided by android native itself we just need to modify as per our requirement that which type of animation we need to do on view. We will learn about Transition animation.

=> View visibility change with animation:

When we use visibility change of view with View.Gone and View.Visibile we can perform with changes with animation by using android native methods. To do animation for this we will use “TransitionManager” as below.

val mTransition = AutoTransition()
mTransition.duration = 150

TransitionManager.beginDelayedTransition(llChatView, mTransition)

// Your code for visilibity For e.g : "rlCamera.visibility = View.GONE"

Note: You must need to call TransitionManager code every time when you show/hide your view.

Output:

 

=> Dialog enter/exit with animation:

Generally, default animation for the dialog depends on OEM but we can still customize from our side and make animation for dialog entry and exit. To make custom animation we need to make an animation class in “anim” folder under “res” folder. like below in which we mention animation interpolator and other animation properties.

Here we have use interpolator as “@android:interpolator/overshoot“. You can use other interpolators as well for a different type of animation which is provided by android.

File: bounce_from_bottom_to_top.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/overshoot">

    <translate
        android:duration="600"
        android:fromYDelta="100%p"
        android:toYDelta="0%p" />

</set>

File: bounce_from_top_to_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/anticipate_overshoot">

    <translate
        android:duration="600"
        android:fromYDelta="0%p"
        android:toYDelta="100%p" />

</set>

Once we make this two anim file(One is for entry and one is for exit) we need to define in style.xml file as below.

<style name="animation_slide_from_bottom" parent="parent_theme">
    <item name="android:windowEnterAnimation">@anim/bounce_from_bottom_to_top</item>
    <item name="android:windowExitAnimation">@anim/bounce_from_top_to_bottom</item>
</style>

This above style will be used in our dialog class as below to give animation for custom dialog.

@Override
protected void onStart() {
    super.onStart();
    getWindow().setWindowAnimations(R.style.animation_slide_from_bottom);
}

Output:

 

=> Activity enter/exit with animation:

Generally, default animation for the activity depends on OEM but we can still customize from our side and make animation for activity entry and exit. To make custom animation we need to make an animation class same as a dialog we created. Here we will use that both anim file for activity animation “bounce_from_bottom_to_top.xml” and “bounce_from_top_to_bottom.xml”.

To apply animation to an activity we just need to define in style as below.

<style name="animation_slide_from_bottom" parent="parent_theme">
    <item name="android:windowEnterAnimation">@anim/bounce_from_bottom_to_top</item>
    <item name="android:windowExitAnimation">@anim/bounce_from_top_to_bottom</item>
</style>

This above style will be used in our activity class as below for entry.

@Override
protected void onStart() {
    super.onStart();
    getWindow().setWindowAnimations(R.style.animation_slide_from_bottom);
}

Important: After giving above animation to activity, Entry of activity will work fine but exit will not work instead it will close instantly. To resolve this we need to add “overridePendingTransition” inside onBackPressed() of activity and make empty animation file in anim folder as below. After implementing below your exit will work fine.

File: nothing.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_longAnimTime"
    android:fromXDelta="0%"
    android:toXDelta="0%" >

</translate>
override fun onBackPressed() {
    super.onBackPressed()
    overridePendingTransition(R.anim.nothing, R.anim.bounce_from_top_to_bottom)
}

Output:

 

 

You may also like

Leave a Reply