Animate View on Visibility (Visible – Gone) Changes Android Example

Animations can separate your app from normal “Just Functional” app and give you app a more polished feel. There are a lot of options how you can show animations on Android, however there is a very easy way to animate layout changes that will make your app look and feel better and more natural. 
Android has some predefined animations that your app can use whenever you have to make change to your app’s layout. The layout changes can be setting the visibility of a view to hidden or visible, or when you add a new view. You just need to define an Attribute in the layout that tell the Android system to show animations for these layout changes, and your app will show system-default animations whenever there are layout changes. Check the Gif below for example:
Default Animations in Android
Okay, no more talking, you just need to add the following tag in your root layout:
android:animateLayoutChanges=”true” 
Note: You can also do it completely programmatically with the XML, that discussed at the end.
Now don’t go running to build your app and see those fluid animations, unless you want to be disappointed and come back to this tutorial and continue it. Setting the animateLayoutChanges property is important, but you also need the following code to make it all work,
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
  ((ViewGroup) findViewById(R.id.llRoot)).getLayoutTransition()
          .enableTransitionType(LayoutTransition.CHANGING);
}
 

We are now done, findViewById refrences the root layout inside which you want to show animations. Now is the time you can build and show or hide some views and test if this works or not! It will work. So wasn’t that easy? Of course you can have you custom animation and not the default changeBounds and Fade animations, but for simple Visibility the default ones are the best in my opinion.
In case you want to show your custom animations, you need to create a LayoutTransition object and supply it to the layout using the setLayoutTransition() method but that the code for some other day!

Also, if you are not interested in XML, you can also apply the same animations when there are layout changes using the beginDelayedTransition method. This method was added in API level 19 so make sure the device satisfies the API level before you use this code:

if (Build.VERSION.SDK_INT >= 19) {
                TransitionManager.beginDelayedTransition((ViewGroup) yourViewOnWhichAnimationNeedsToBeShown.getParent());
            }

This is it! Now your app will show animations on layout changes, show whenever the visibility of your views is set to Hidden or Visible, they are handled gracefully, 2 minutes of your time for better UI and UX. Let me what you think below. Cheers!
Also don’t forget to check out the RecyclerView Slide in Row Animation Tutorial. Have animations in your RecyclerViews in just 2 Minutes!

Don’t miss these tips!

We don’t spam! Read our privacy policy for more info.

You’ve been successfully subscribed to our newsletter! See you on the other side!

Sharing is caring!

Leave a Comment

Your email address will not be published.

Exit mobile version