Beautiful Login Screen For Android With Example

Almost in every app, you have the Login screen for the user to enter the credentials. In most cases, the Login Activity referred to the welcome screen or user first screen for Application. 

In this article, we’re going to make a Login screen for Android App. To create a Login screen, I’m going to take this design from the dribble.

You see the design is very basic. There are a couple of animation for BookIcon and the content of Login screen itself. So, let’s create an app for the above design.

Android App Coding:

Before starting the coding add the following dependency to build.gradle file.

implementation 'com.android.support:design:27.1.1'

If you’ve carefully seen the design there are only three things to do to make the above design.

1. We need to show a BookIcon for 5 seconds on screen.
2. After 5 seconds, animate the BookIcon to the top of the screen.
3. Show the Login Screen content.

I’m going to use CountDownTimer to show the BookIcon only for 5 seconds and timer completes, we can animate the BookIcon to the top of the view. Below is the sample code how to show the icon only for 5 seconds and then animate.

Login Activity

object : CountDownTimer(5000, 1000) {
            override fun onFinish() {
                bookITextView.visibility = View.GONE
                loadingProgressBar.visibility = View.GONE
                rootView.setBackgroundColor(ContextCompat.getColor(this@MainActivity, R.color.colorSplashText))
                bookIconImageView.setImageResource(R.drawable.background_color_book)
                startAnimation()
            }

            override fun onTick(p0: Long) {}
        }.start()

The onFinish method is called when the 5 seconds completed. You see in an onFinish method, I’m doing some pre-work and then call the startAnimation method. Below is the startAnimation method code.

Protip: You can also use Handler with delayed or Observable.timer for the timer.

private fun startAnimation() {
    bookIconImageView.animate().apply {
        x(50f)
        y(100f)
        duration = 1000
    }.setListener(object : Animator.AnimatorListener {
        override fun onAnimationRepeat(p0: Animator?) {

        }

        override fun onAnimationEnd(p0: Animator?) {
            afterAnimationView.visibility = VISIBLE
        }

        override fun onAnimationCancel(p0: Animator?) {

        }

        override fun onAnimationStart(p0: Animator?) {

        }
    })
}

To animate the view, I’m going to use ViewPropertyAnimator class. You can set the listener for when the animation start, end, cancel, etc… Now the LoginActivity code is complete let’s see the xml code.

With Android-ktx animation package you can add animation listener only which you want like below.

bookIconImageView.animate().apply {
            x(50f)
            y(100f)
            duration = 1000
        }.addListener(onEnd = {
             afterAnimationView.visibility = VISIBLE
        })

You see with kotlin extensions the code looks much concise.

Note: All of the above code will be placed in Activity class.

LoginActivity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rootView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorBackground"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/bookIconImageView"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerInParent="true"
        android:contentDescription="@null"
        android:src="@drawable/white_book_icon" />

    <TextView
        android:id="@+id/bookITextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/bookIconImageView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dp"
        android:text="@string/booki"
        android:textColor="@color/colorSplashText"
        android:textSize="16sp" />

    <ProgressBar
        android:id="@+id/loadingProgressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="12dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="-4dp"
        android:foregroundGravity="bottom"
        android:indeterminate="true"
        android:padding="0dp"
        android:theme="@style/ProgressBarStyle" />

    <RelativeLayout
        android:id="@+id/afterAnimationView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginEnd="20dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="130dp"
        android:orientation="vertical"
        android:visibility="gone">

        <TextView
            android:id="@+id/WelcomeTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/welcome_back"
            android:textColor="@color/colorBackground"
            android:textSize="25sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/readItTogetherTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/WelcomeTextView"
            android:layout_marginTop="10dp"
            android:text="@string/read_it_together"
            android:textColor="@color/colorAccent"
            android:textSize="15sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/loginButton"
            android:layout_below="@+id/readItTogetherTextView"
            android:gravity="center"
            android:orientation="vertical">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/emailEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/email"
                android:textColor="@color/colorTextView"
                android:textColorHint="@color/colorAccent"
                android:textSize="15sp" />

            <android.support.design.widget.TextInputEditText
                android:id="@+id/passwordEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="25dp"
                android:hint="@string/password"
                android:textColor="@color/colorTextView"
                android:textColorHint="@color/colorAccent"
                android:textSize="15sp" />

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:padding="5dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/sign_up"
                    android:textColor="@color/colorTextView"
                    android:textSize="14sp"
                    android:textStyle="bold" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end|center_vertical"
                    android:text="@string/forget_password"
                    android:textColor="@color/colorTextView"
                    android:textSize="14sp"
                    android:textStyle="bold" />

            </FrameLayout>

        </LinearLayout>

        <Button
            android:id="@+id/loginButton"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:layout_above="@+id/skipTextView"
            android:layout_marginBottom="5dp"
            android:background="@drawable/button_drawable"
            android:text="@string/login"
            android:textAllCaps="false"
            android:textColor="@color/colorAccent"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/skipTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="10dp"
            android:background="?android:attr/selectableItemBackground"
            android:clickable="true"
            android:focusable="true"
            android:gravity="center"
            android:padding="12dp"
            android:text="@string/skip"
            android:textColor="@color/colorTextView"
            android:textSize="15sp" />


    </RelativeLayout>

</RelativeLayout>

Now your Login screen is ready. Launch your app.

You can get the complete source code of the above app from GitHub. If you’ve any queries regarding this post, please do comment below.

Download Complete Code

Thank you for being here and keep reading…