_edited.png){kind=small}
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
Comments