Improve your app’s UI with animations

Animations can add visual cues that notify users about what’s going on in your app and improve their understanding of its interface. Animations are useful when loading content, or when a screen changes state. They can also add a glossy look to your app, which gives it a higher quality feel.

Animations are not necessarily meant to make your app pretty. They are meant to grab the attention of the user and enhance their experience. With thousands of applications available for download every day, yours will only stand a chance if it’s not boring or unpleasant to users.

Some of the reasons for incorporating animations into your application include:

  • To engage users – Animations can keep a user engaged before the content fully loads. This will prevent users from abandoning your app. Gmail is a good example of this. It uses animation in its pull-to-refresh feature and a spinner for loading new emails.
  • Give feedback – Animations can give visual feedback that shows a certain event or action has been completed or to show the site is not working properly. Animations can be used in buttons, tabs and other elements to inform users of their current state especially in e-commerce applications.
  • To help users in navigation – This can be beneficial especially if the content keeps changing. For example, animated scrolling can be used to show a transition between tabs and menu items. Most apps will have introductory slide screens for showcasing the application’s most important features or to simply explain to the user what the app does.

Here is how you can implement some of these animations in your app to improve the user experience.

Introduction Slider

This is meant to showcase the different features of your application. Users will be able to navigate through the screens using swipe gestures or they can skip the introduction and go to the main application.

The introduction slider should be shown only when the app is launched for the first time. Subsequent launches should direct the user to the main screen. We are going to have three slides in our application to show the user the three most important aspects of our application.

The final result should look like this:

Add this XML to a new file called slide.xml:


And this to slide2.xml:


And in slide3.xml:


Next, we are going to design the welcome screen. Create another activity (activity_welcome.xml) and add the following to the XML file:


The XML file contains a view pager responsible for the swipe actions and buttons, which take the user to the next (or back to the previous) screen. You will also need the strings.xml for the definitions like “@string/redeem” etc.

    Home Screen
    GOT IT

As I mentioned at the beginning of this tutorial, the welcome screen should only be shown the first time the application is launched. To achieve this, create a class named and call setFirstTimeLaunch(true) when the app is launched for the first time.

package com.example.vaatiesther.animation;
import android.content.Context;
import android.content.SharedPreferences;
 * Created by vaatiesther on 11/8/17.
public class PrefManager {
    SharedPreferences preferences;
    SharedPreferences.Editor editor;
    Context _context;
    int PRIVATE_MODE = 0;
    private static final String PREF_NAME = "welcome";
    private static final String IS_FIRST_TIME_LAUNCH = "IsFirstTimeLaunch";
    public PrefManager(Context context) {
        this._context = context;
        preferences = _context.getSharedPreferences(PREF_NAME, PRIVATE_MODE);
        editor = preferences.edit();

    public void setFirstTimeLaunch(boolean isFirstTime) {
        editor.putBoolean(IS_FIRST_TIME_LAUNCH, isFirstTime);

    public boolean isFirstTimeLaunch() {
        return preferences.getBoolean(IS_FIRST_TIME_LAUNCH, true);

Lastly, add the following code to

package com.example.vaatiesther.animation;
import android.os.Bundle;
import android.content.Context;
import android.content.Intent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.LinearLayout;
public class WelcomeActivity extends AppCompatActivity {
    private ViewPager viewPager;
    private PrefManager prefManager;
    private MyViewPagerAdapter myViewPagerAdapter;
    private int[] layouts;
    private LinearLayout welcomeLayout;
    private Button btnSkip, btnNext;
    protected void onCreate(Bundle savedInstanceState) {
        // Checking for first time launch - before calling setContentView()
        prefManager = new PrefManager(this);
        if (!prefManager.isFirstTimeLaunch()) {
        viewPager = (ViewPager) findViewById(;
        welcomeLayout = (LinearLayout) findViewById(;
        btnSkip = (Button) findViewById(;
        btnNext = (Button) findViewById(;
        //add welcome slide layouts
        layouts = new int[]{
        myViewPagerAdapter = new MyViewPagerAdapter();
        btnSkip.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
        btnNext.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                // checking for last page
                // if last page home screen will be launched
                int current = getItem(+1);
                if (current < layouts.length) {
                    // move to the next screen
                } else {
    private int getItem(int i) {
        return viewPager.getCurrentItem() + i;
    private void launchHomeScreen() {
        startActivity(new Intent(WelcomeActivity.this, MainActivity.class));
    //  viewpager change listener
    ViewPager.OnPageChangeListener viewPagerPageChangeListener =
                               new ViewPager.OnPageChangeListener() {
        public void onPageSelected(int position) {
            // changing the next button text 'NEXT' / 'GOT IT'
            if (position == layouts.length - 1) {
                // for the last page, make button text to GOT IT
            } else {
                // still pages are left
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        public void onPageScrollStateChanged(int arg0) {
     * View pager adapter
    public class MyViewPagerAdapter extends PagerAdapter {
        private LayoutInflater layoutInflater;
        public MyViewPagerAdapter() {
        public Object instantiateItem(ViewGroup container, int position) {
            layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View view = layoutInflater.inflate(layouts[position], container, false);
            return view;
        public int getCount() {
            return layouts.length;
        public boolean isViewFromObject(View view, Object obj) {
            return view == obj;
        public void destroyItem(ViewGroup container, int position, Object object) {
            View view = (View) object;

Don’t forget to set the WelcomeActivity as the launcher in the manifest file:


Animating Buttons

Buttons are an integral part of any application because they communicate and give feedback when clicked. Let’s see how we can animate a button to show the correct feedback after it has been pressed.

In your drawable folder, add a drawable XML (drawable/ripple.xml) file which we will use as our background for the button to achieve the ripple effect:


Edit the button to use the ripple XML as the background, as shown below.

Now our button will show ripples when touched.


It is possible to add interesting and helpful animations to your app with some simple techniques. It’s worth noting that although animations are important to enhance the user experience, overusing animations or using them inappropriately can diminish the quality of experience, too.

Powered by WPeMatico