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.
- We need to show a BookIcon for 5 seconds on screen.
- After 5 seconds, animate the BookIcon to the top of the screen.
- 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.
Thank you for being here and keep reading…
ERROR: Plugin with id ‘com.android.application’ not found.
any help ?
Hey Abraham,
Please check out this link.
For hours, i’m trying to build that project in my android studio 3.4
after the apk installed, it open and closed directly,
i don’t know what’s the problem
please help
Is the xml files are the same as java xml? i’m using the java file in your github
Hey MJ,
Can you please show send me the error log on my eamil.
Could you please give a java variant for this?
Hey Dioptre,
I added the same the MainActivity for java in GitHub project. Here is the link.