How To

Boosting Apps UX Design with Animation

A good mobile app must have a good UI design for engaging UX experience. A well-designed animation makes the user experience feel crafted. Animation have a clear logical purpose and that is to reduce the cognitive load of the apps and establish better spatial relationships. Animations are not always meant to make the app pretty but they bring user interface to life.

In apps, animation can be used to guide the user about the working of the app by giving small tutorial animation. Users always want to stay in control of their applications so animation can be a way of displaying system status to the user hence enabling the user to understand what’s actually going on with his app and data. For example, to reduce the stress of waiting on users, the loading page can be displayed as:

They can also be used to provide a feedback response to user’s queries or actions as users don’t like surprises and encourage a continuous feedback. Hence we can summarize our benefits of animation in apps as:

Displaying system status to the users giving them control of the app
Onboarding guide and tutorial about the app’s controls
• Providing feedback in response to user’s actions

So animation is a vital element of the app to enhance user engagement. Here how we can add an animation to our app while developing it. This code is for android studio only:

After implementing this code we will be able to build a slider to show to the user only for the first-time use of the application. We will be creating three slides in our application to display user the three most important portions of our application by following the steps below:

1. Create an xml file called slide.xml and paste the following code into it.
————————————————————————————————

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f64c73">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center_horizontal"
        android:orientation="vertical">
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/shop"
            android:textColor="@android:color/white"
            android:textSize="30dp"
            android:textStyle="bold" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:paddingLeft="40dp"
            android:paddingRight="40dp"
            android:text="@string/slide_1_title"
            android:textAlignment="center"
            android:textColor="@android:color/white"
            android:textSize="16dp" />
    </LinearLayout>
</RelativeLayout>

————————————————————————————————

2. Add the following code to another file named slide2.xml
————————————————————————————————

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f64c73">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center_horizontal"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/earn"
            android:textColor="@android:color/white"
            android:textSize="30dp"
            android:textStyle="bold" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:paddingLeft="40dp"
            android:paddingRight="40dp"
            android:text="@string/slide_1_title"
            android:textAlignment="center"
            android:textColor="@android:color/white"
            android:textSize="16dp" />
    </LinearLayout>
</RelativeLayout

————————————————————————————————

3. Create another xml file named slide3.xml
————————————————————————————————

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f64c73">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center_horizontal"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/redeem"
            android:textColor="@android:color/white"
            android:textSize="30dp"
            android:textStyle="bold" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:paddingLeft="40dp"
            android:paddingRight="40dp"
            android:text="@string/slide_1_title"
            android:textAlignment="center"
            android:textColor="@android:color/white"
            android:textSize="16dp" />
    </LinearLayout>
</RelativeLayout>

————————————————————————————————
4. Now, we will be designing the welcome screen. Create another activity (activity_welcome.xml) and add the following code to the XML file:
————————————————————————————————

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <LinearLayout
        android:id="@+id/welcomeLayout"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        android:gravity="center"
        android:orientation="horizontal"></LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:alpha=".5"
        android:layout_above="@id/welcomeLayout"
        android:background="@android:color/white" />
    <Button
        android:id="@+id/btn_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:background="@null"
        android:text="@string/next"
        android:textColor="@android:color/white" />
    <Button
        android:id="@+id/btn_skip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:background="@null"
        android:text="@string/skip"
        android:textColor="@android:color/white" />
</RelativeLayout>

————————————————————————————————
5. As the slider needs to be launched only for the first time the app launches so to add the functionality, add the following code to a class named PrefManager.java.
————————————————————————————————

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);
        editor.commit();
    }

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

————————————————————————————————

6. Add following code to the file WelcomeActivity.java
————————————————————————————————

package com.example.vaatiesther.animation;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.content.Context;
import android.content.Intent;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
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;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Checking for first time launch - before calling setContentView()
        prefManager = new PrefManager(this);
        if (!prefManager.isFirstTimeLaunch()) {
            launchHomeScreen();
            finish();
        }
        setContentView(R.layout.activity_welcome);
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        welcomeLayout = (LinearLayout) findViewById(R.id.welcomeLayout);
        btnSkip = (Button) findViewById(R.id.btn_skip);
        btnNext = (Button) findViewById(R.id.btn_next);
        //add welcome slide layouts
        layouts = new int[]{
                R.layout.slide1,
                R.layout.slide2,
                R.layout.slide3};
        myViewPagerAdapter = new MyViewPagerAdapter();
        viewPager.setAdapter(myViewPagerAdapter);
        viewPager.addOnPageChangeListener(viewPagerPageChangeListener);
        btnSkip.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                launchHomeScreen();
            }
        });
        btnNext.setOnClickListener(new View.OnClickListener() {
            @Override
            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
                    viewPager.setCurrentItem(current);
                } else {
                    launchHomeScreen();
                }
            }
        });
    }
    private int getItem(int i) {
        return viewPager.getCurrentItem() + i;
    }
    private void launchHomeScreen() {
        prefManager.setFirstTimeLaunch(false);
        startActivity(new Intent(WelcomeActivity.this, MainActivity.class));
        finish();
    }
    //  viewpager change listener
    ViewPager.OnPageChangeListener viewPagerPageChangeListener =
                               new ViewPager.OnPageChangeListener() {
        @Override
        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
                btnNext.setText(getString(R.string.start));
                btnSkip.setVisibility(View.GONE);
            } else {
                // still pages are left
                btnNext.setText(getString(R.string.next));
                btnSkip.setVisibility(View.VISIBLE);
            }	
        }
        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }
        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    };
    /**
     * View pager adapter
     */
    public class MyViewPagerAdapter extends PagerAdapter {
        private LayoutInflater layoutInflater;
        public MyViewPagerAdapter() {
        }
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View view = layoutInflater.inflate(layouts[position], container, false);
            container.addView(view);
            return view;
        }
        @Override
        public int getCount() {
            return layouts.length;
        }
        @Override
        public boolean isViewFromObject(View view, Object obj) {
            return view == obj;
        }
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            View view = (View) object;
            container.removeView(view);
        }
    }
}

————————————————————————————————
7. Set the WelcomeActivity.java as the launcher in the manifest file:
————————————————————————————————

<activity android:name=".WelcomeActivity">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

————————————————————————————————

And we are done! Add buttons and menu bars in your welcome screen to make the app more engaging.Animations have the power to encourage users to actually interact and can bring empathy in user experience and full of emotions. It allows you to discover solutions that are mostly missed in design and that’s the reason why most of best interfaces are powered by animation. Let us know in comments if there is any query, enjoy coding!

You can check out this site for animation design inspiration.

The complete training guide on animation is given on the official android developer blog

Leave a Comment