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.
How can 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.
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 app development.
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.
Step 2:
Open ShapeShifter, import the SVG created in Step 1, and Follow the Video
Video edited by Giridhar Reddy Vennapusa.
Once you are done with the animation, export it 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"?>http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:targetApi="lollipop">
<!-- provide a different drawable for each state-->
android:drawable="@drawable/ic_settings_active_avd"
android:state_checked="true"/>
android:drawable="@drawable/ic_settings_inactive"/><!-- specify transitions -->
android:drawable="@drawable/ic_settings_active_avd"
android:fromId="@id/state_off"
android:toId="@id/state_on" />
2. Use this animated state list drawable as icon in the menu_bottom_nav.xml .
<?xml version="1.0" encoding="utf-8"?>
http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
android:id="@+id/item_settings_fragment"
android:icon="@drawable/anim_settings"
android:title="@string/settings"
app:showAsAction="always" />...
3. Set this menu_bottom_nav.xml as menu for bottom navigation view.
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 animation.
Note: We have noticed that the android support library, bottom navigation view, is not letting AVD animate on devices with OS > 7.0. We tried to disable shiftMode for the bottomNavigationView and animate the icon, but no change. If someone has a solution to that, share your thoughts in the comments section. Meanwhile, you could use the AVD as image view src, menu item, tab icon and achieve the same effect.
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.
Step 2:
Open ShapeShifter, import the SVG created in Step 1 and Follow the video
Video edited by Giridhar Reddy Vennapusa.
Once you are done with the animation, export it 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.
Step 2:
Open ShapeShifter, import the SVG created in Step 1 and Follow the video
Video edited by Giridhar Reddy Vennapusa.
Once you are done with the animation, export it 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.
Step 2:
Open ShapeShifter, import the SVG created in Step 1 and Follow the video
Video edited by Giridhar Reddy Vennapusa.
Once you are done with the animation, export it 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.
Please follow us on Twitter and on Medium and follow AppIt Ventures for similar developer articles. Thanks!
