Delightful Animations in Android

using ShapeShifter

AppIt Ventures

As mobile app developers and designers, you often create apps to solve problems or get things done for your users. Your app’s UI/UX plays a very important role in creating an emotional connection with your users, so it’s crucial to design it in such a way that it makes people as happy as possible while they are interacting with your app.

Why should I care about delighting my app users ?

Nobody wants to have angry users, but apathetic users can be just as dooming for your product. People tend to engage the most with apps that make them feel happy and productive in equal measure.

Benjamin Clawhauser from the movie Zootopia.

How could I delight my app users ?

There are many ways to bring a smile to your app users’ faces. Being more human in messaging and interactions can go a long way toward establishing a connection with users and making them feel like a person rather than a number. Adding subtle animations to UI elements on user interaction is another great way to delight your users, and is the one we will explore in this post.

Take a look at the GIF below and notice how the Android Clock app uses animated vector drawable to create tab icons that are dynamic and lively. They catch the eye and add an element of amusement.

Vector icon animations in tab bar — Android Clock app.

Here at AppIt Ventures, we develop custom software solutions for our clients. We care immensely about the experience of our customer’s customer, the actual user of the application/solution that we’re creating, and put a lot of thought into what will make it the best it can possibly be. Inspired by the Android Clock animations, we decided to incorporate a similar element in one of our client’s applications by utilizing animated vector drawable to create the icons for the Android bottom navigation bar. See it in action below. This article will cover, in detail, how to create these animated icons for use in Android applications.

Regular Bottom Navigation Bar.

Bottom Navigation Bar with animated vector drawable — Concept by Meghanath Ganji

Enough! Tell me how to do that.

First, you’ll want to become familiar with ShapeShifter, a fantastic tool created by Alex Lockwood to animate scalable vector graphics (SVG) from one shape to another (or one state to another) and then export the animation as an animated vector drawable. Many thanks to Alex Lockwood for creating this tool, as it has eased the formerly painful process of animated vector drawable.

Next, we will guide you through each step.

Settings Icon animation

This particular icon animation doesn’t exhibit shape shifting, we are just rotating a static shape to create an animated vector drawable and using it as the settings icon in the Android bottom navigation bar. Even though we aren’t transforming the actual shape here, we are still able to use ShapeShifter to achieve the animation.

Step 1:

Create two vectors in your favorite tool, such as SKETCH — one for the start state and the other for the end state of your desired animation. For our settings icon animation example, we just require a single SVG, as we aren’t changing the shape. We will simply rotate and change the colors of that vector to achieve the animation as seen below.

Settings Icon Animation — created by Giridhar Reddy Vennapusa

Step 2:

Video edited by Giridhar Reddy Vennapusa

Open ShapeShifter, import the SVG created in Step 1 and

← Follow the video

Once you are done with the animation, export the animation as animated vector drawable.

Step 3:

Import the settings animated vector drawable from Step 2, into your Android Project from Android Studio and place it in src/res/drawable

P.S: Based on Nick Butcher’s suggestion we have updated the usage as below.

1. Create an Animated State List Drawable for each of the icon in the bottom navigation view. Check below for settings icon which is named as anim_settings.xml.

<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    tools:targetApi="16">
    
<!-- provide a different drawable for each state-->
    <item android:id="@+id/state_on"
        android:drawable="@drawable/ic_settings_active_avd"
        android:state_checked="true"/>
    <item android:id="@+id/state_off"
        android:drawable="@drawable/ic_settings_inactive"/>
<!-- specify transitions -->
    <transition
        android:drawable="@drawable/ic_settings_active_avd"
        android:fromId="@id/state_off"
        android:toId="@id/state_on" />
</animated-selector>

2. Use this animated state list drawable as icon in the menu_bottom_nav.xml .

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/item_settings_fragment"
        android:icon="@drawable/anim_settings"
        android:title="@string/settings"
        app:showAsAction="always" />
...
</menu>

3. Set this menu_bottom_nav.xml as menufor bottom navigation view.

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:showAsAction="always|withText"
        app:itemTextColor="@drawable/bottom_navigation_tab_selector"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/menu_bottom_nav"
        android:background="@color/colorWhite"
        app:elevation="0dp"/>

That’s it! Run the android application on your device and check the bottom nav bar animation.

Location Icon animation

Step 1:

For the location icon animation, too, we just require a single vector as SVG. We will scale out/in and change the color of the circle at the center to achieve the animation seen below.

Location Icon Animation — created by Giridhar Reddy Vennapusa

Step 2:

Video edited by Giridhar Reddy Vennapusa

Open ShapeShifter, import the SVG created in Step 1 and

← Follow the video

Once you are done with the animation, export the animation as animated vector drawable.

Calendar Icon animation

Step 1:

As with the first two icons, the calendar icon will only require a single vector as SVG. We will move the square box from one position to another using keyframes and change the color of it to achieve the animation seen below.

Calendar Icon Animation — created by Giridhar Reddy Vennapusa

Step 2:

Video edited by Giridhar Reddy Vennapusa

Open ShapeShifter, import the SVG created in Step 1 and

← Follow the video

Once you are done with the animation, export the animation as animated vector drawable.

Home Icon animation

Step 1:

For the home icon animation, we need the door to transition from an open to a closed state, as shown below. To achieve this, we need to have two shapes/paths for the door inside the icon. This particular animation uses the Shape Shifting concept, unlike the previous icon animations we covered which simply use rotation, scaling and transition on a single shape.

Home Icon Animation — created by Giridhar Reddy Vennapusa

Step 2:

Video edited by Giridhar Reddy Vennapusa

Open ShapeShifter, import the SVG created in Step 1 and

← Follow the video

Once you are done with the animation, export the animation as animated vector drawable.

Adding an animated vector drawable is just one of many ways to delight your users. I will cover several others in upcoming articles. Feel free to drop your comments on this topic. I welcome your feedback and am always looking for ways to improve the presentation.

Thanks to Alex Lockwood for creating ShapeShifter, and to Nick Butcher and Roman Nurik for inspiring us with their design talks.

Check below for the source code of the demo android app.

appitventures/Delightful-Animations-Android

If you liked this post and found it helpful, give me some claps! Please follow me on Twitter and on Medium! Follow AppIt Ventures for other similar articles. Thanks 😄