Now you can Subscribe using RSS

Submit your Email

Thursday

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

Vishal Shrestha
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:

visibility-gone-visible-default-animation
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!

Vishal Shrestha / Author & Founder

A developer by profession, a born Adventurer. I mainly do Android but like to get my hands dirty with web development and a little bit of Python. I would't rather go on a Trek than a party and you can find me having a few rounds with the heavy bag to let out the steam ;)

WORK

Research and Development at : Ekghanti

Mobile Technology Lead at : Vimvox Lab

For Business info : My Portfolio Site

0 comments:

Post a Comment

Coprights @ 2017 | The Code City by Vishal Shrestha Vishal Shrestha