Making a Splash and Login screen on AndroidStudio — Kotlin

In this post, I’m showing you how to create your splash and login screen for your Android mobile app using AndroidStudio and Kotlin language.

First of all, a splash screen is the first screen visible when the app is launched. That screen displays an animation or the app logo for a few seconds to maybe load some data and then it switches to the login screen. The splash screen is mostly very simple to be made and it gives a more professional look to your application.

And the login screen will be where the users are going to be able to access their account in the application.

1. Creating the splash screen

style.xml

style.xml is already existent when a Kotlin Project is created. You only need to make those modifications!

colors.xml

colors.xml is also already existent when the Kotlin Project is created. Here you can choose all the color configurations you prefer and like.

grad-bg.xml

The grad-bg.xml file was created to organize how the colors I choose will look like in the app.

acitivity_main.xml for the splash screen

main_activity.xml file holds all the components for both splash and login screen. On the above image are the components for the splash.

ic_heartbeat.xml

.xml file that represents the logo icon of the app

main_activity.xml for the login screen

The images above show how the components are set for the login screen. That screen is quite simple with components of Username and Password, and also a Password Reminder and Register bottoms.

MainActivity.kt

the MainActivity.kt file is the one that debugs the project and shows the final result of what you have coded.

2. Final results

Splash screen

Login screen

So as you can see, the final results are two minimal and clean look screens, both with a blue ‘degradé’ that presents the logo and name of the application. And the Login screen has components to insert your Username and Password and also, bottoms to recuperate your forgotten password and to Register Now in case you’re a new user.

In case you’re curious about this in-progress project, here is my GitHub profile: https://github.com/annycmg/clinify-app

All the posts about this app will work as a journal for my BSc Computer Science thesis, I really would like to read your feedback and suggestions in the comments.

I hope I’ve helped you with the first step to create your application!