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

Subscribe to our newsletter
Subscribe to our newsletter
Sign up here to get the latest news, updates and special offers delivered directly to your inbox.
You can unsubscribe at any time

Leave A Reply

Your email address will not be published.

android 1, android, android studio, android device manager, android pie, android games, android one, android emulator, android versions, android emulator for pc, android apps, android app development, android authority, android apk, android arsenal, android apps on pc, android auto, android activity lifecycle, android app download, android architecture, android codes, android color codes, android central, android cdc driver, android car stereo, android course, android camera, android omponents, android box, android beta, android best games, android beam, android backup, android backup to pc, android basics, android games, android games apk, android games free download, android go, android gamer, android games 2018, android games on pc, android glide, android game development, android emulator online, android emulator download, android emulator for mac, android emulator for windows 10, android file transfer, android file host, android framework, android flash tool, android firmware, android hacking tools, android hd wallpapers, android hard reset, android heavy games, android data recovery, android keyboard, android kitkat, android keyboard apk, android keylogger, android imei check, android multi tools, android manager, android material design, android mobile games, android modded games, android latest version, android lollipop, android nougat, android oreo, android pie, android play store, android pc suite, android pie update, android police, android programming, android questions, android ringtones, android root, android root apk, android root apps, android tv box, android themes, android tools, android wallpapers, android wallpapers hd, android usb driver, android ui design, android update 8.0, android update 9.0, android studio, android sdk manager, android secret codes, android vidmate, android youtube downloader, android youtube downloader apk, android youtube background play, android zapya