Android Tip: Styling the onboarding of your application

    When launching your app first screen, you always would like to design it vividly with animations to makes the user feel more enjoyable.. Another approach is making a splash screen which automatic switched after a short time. But this design pattern is used for iOS app, not for Android and it causes some inconvenience for users. So, styling onboarding of the app is the better choice, avoiding cold start like splash screen (see this post for more details).
    In this small tip, I will present the way to make a Login screen (usually is the first screen of app) with some animations, it can be more attractive!

Designing layout (XML file)

    Creating a simple layout for login screen like this:

activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?colorPrimary"
    android:padding="@dimen/activity_horizontal_margin">

    <LinearLayout
        android:id="@+id/container"
        android:layout_marginTop="100dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="vertical"
        tools:ignore="HardcodedText">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="16dp"
            android:alpha="0"
            android:text="This is a Login Activity"
            android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
            android:textColor="@android:color/white"
            android:textSize="22sp"
            tools:alpha="1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="8dp"
            android:alpha="0"
            android:gravity="center"
            android:text="with some Animations"
            android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle.Inverse"
            android:textSize="20sp"
            tools:alpha="1" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="48dp"
            android:hint="user name"
            android:inputType="text"
            android:scaleX="0"
            android:scaleY="0" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:hint="Password"
            android:inputType="textPassword"
            android:scaleX="0"
            android:scaleY="0" />

        <Button
            android:id="@+id/login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:scaleX="0"
            android:scaleY="0"
            android:text="Login"
            android:theme="@style/button_style" />
    </LinearLayout>

    <ImageView
        android:id="@+id/img_logo"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:layout_marginTop="12dp"
        android:contentDescription="@string/app_name"
        android:src="@drawable/logo"
        tools:visibility="gone" />
</FrameLayout>

Set animations in programmatically code

    As you see at xml code above, I have an ImageView is slightly above of the center of the screen, this could be influenced by system bars, I've put a margin top of 12dp which just coincides with the half of the height of the status bar. In the Activity code, making this animation, translates the ImageView that contains the same resource of the <layer-list>:

ViewCompat.animate(logoImageView)
                .translationY(-250)
                .setStartDelay(STARTUP_DELAY)
                .setDuration(ANIM_ITEM_DURATION).setInterpolator(
                new DecelerateInterpolator(1.2f)).start();

    Adding some animation codes for other widget, we have full code for login screen:

LoginActivity.java

package info.devexchanges.onboardingscreen;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.view.ViewCompat;
import android.support.v4.view.ViewPropertyAnimatorCompat;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.DecelerateInterpolator;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;


public class LoginActivity extends AppCompatActivity {
    public static final int STARTUP_DELAY = 300;
    public static final int ANIM_ITEM_DURATION = 1000;
    public static final int EDITTEXT_DELAY = 300;
    public static final int BUTTON_DELAY = 500;
    public static final int VIEW_DELAY = 400;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);

        ImageView logoImageView = (ImageView) findViewById(R.id.img_logo);
        ViewGroup container = (ViewGroup) findViewById(R.id.container);

        ViewCompat.animate(logoImageView)
                .translationY(-250)
                .setStartDelay(STARTUP_DELAY)
                .setDuration(ANIM_ITEM_DURATION).setInterpolator(
                new DecelerateInterpolator(1.2f)).start();

        for (int i = 0; i < container.getChildCount(); i++) {
            View v = container.getChildAt(i);
            ViewPropertyAnimatorCompat viewAnimator;

            if (v instanceof EditText) {
                viewAnimator = ViewCompat.animate(v)
                        .scaleY(1).scaleX(1)
                        .setStartDelay((EDITTEXT_DELAY * i) + 500)
                        .setDuration(500);
            } else if (v instanceof Button) {
                viewAnimator = ViewCompat.animate(v)
                        .scaleY(1).scaleX(1)
                        .setStartDelay((BUTTON_DELAY * i) + 500)
                        .setDuration(500);
            } else {
                viewAnimator = ViewCompat.animate(v)
                        .translationY(50).alpha(1)
                        .setStartDelay((VIEW_DELAY * i) + 500)
                        .setDuration(1000);
            }

            viewAnimator.setInterpolator(new DecelerateInterpolator()).start();
        }
    }
}

    Styles resource for app, this screen has no Action Bar:

styles.xml

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="button_style" parent="Theme.AppCompat">
        <item name="colorControlHighlight">@color/high_light</item>
        <item name="colorButtonNormal">@color/normal</item>
    </style>

</resources>

    Colors resource:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#4bd421</color>
    <color name="normal">#FF4BD421</color>
    <color name="high_light">#FF2B611B</color>
</resources>

Final thoughts

    Running application, you will see this output:

    With this design pattern, making some simple animations, you can avoid the cold start by making the splash screen and your app will look more attractive, users will feel more comfortable. Moreover, this post will guide you create a splash screen in a better way, based on AppCompat theme. From now,  you can visit this tag link to read about Material Design, the official flat design for Android. Finally, you can see my project on @Github.

Author : Hong Thai

Share