Add beautiful animations in an Android Project

This is a tutorial on how to create small yet beautiful animations in an android app. There are a lot of open-source plug-ins available on GitHub but as we all know adding a dependency in build.gradle(app) increases our application size. So what if we can manually add small yet eye-catching animations by using our own XML code.

Why we need animation?

Mobile apps that are designed without putting UI/UX into consideration leads to a failure to attract users. Therefore, it is very important for mobile app development companies or app developers in India to comprehend the importance of UI/UX animations in the development of mobile apps. First of all, it’s vital to understand the concept of building an animation.

Today I am going to list a few basic animations that increases app’s look and feel with minimal of efforts.

Fade In:-

Create a fade in animation file inside res/anim/fadein.xml

Using above animation on a view will demonstrate a beautiful fade-in animation.

Fade Out:-

Create a fade out animation file inside res/anim/fadeout.xml

Using above animation on a view will demonstrate a beautiful fade-out animation.

Rotate Clock-wise:-

Create a fade out animation file inside res/anim/rotate_clock_wise.xml

Using above animation on a view will demonstrate a clock-wise animation.

Rotate Anti-Clock-wise:-

Create a fade out animation file inside res/anim/roate_anti_clock_wise.xml

Using above animation on a view will demonstrate a anti-clock-wise animation.

Ripple-Effect Animation:-

Let’s create a recycler view item file inside res/layout/ripple_recycler_view.xml

If you observe, you will see I have added this line in parent layout. This line will give you a ripple effect on click of view.
android:background=”?android:attr/selectableItemBackground”

If you want to get same effect on any button with close borders like rectangle, you should use this background and you will get the desired effect.

Adding this line will give you a ripple effect on buttons with our borders. It enhances user experience significantly.

android:background=”android:attr/selectableItemBackgroundBorderless”

Layout Animations in a list:-

If you want to create beautiful animations in a recyclerview then you can also apply some view motion in your list items.

Create two anim file under res/anim/layout_anim_fall_down.xml and res/anim/anim_fall_down.xml

Now let’s use these animation files into our java code and build :-

int resId = R.anim.layout_anim_fall_down;
 GroupRecyclerViewAdapter adapter = new GroupRecyclerViewAdapter(consolidatedList);
 LayoutAnimationController animation = AnimationUtils.loadLayoutAnimation(this, resId);
 recyclerView.setLayoutAnimation(animation);
 recyclerView.setLayoutManager(new LinearLayoutManager(SmsListActivity.this));
 recyclerView.setAdapter(adapter);

Now let’s run your code and you will see a beautiful animation on your list items.

If you want to create sliding items for recyclerview, you can use these xml files to achieve this objective.

Wrapping up

This is all there is to it. In my opinion, this is the best way to animate a RecylerView going from an empty to a populated state. And like I mentioned before, this works for all subclasses of ViewGroup. If you face any issue, do let know on my email dev.vikas.bharti@gmail.com. I will try to reply ASAP. Good Luck….Happy coding!!!