How To Make Login Screen In Kotlin: Android Studio Example

Login Screen in Android is one of the most used features in application development. Almost every application has a Login and Register functionality in it. In this Kotlin Android login example, I am going to tell you how you can make a simple and attractive Login Screen for your android applications. So let’s start with how to make login screen in Kotlin Language using Android Studio.

 

KOTLIN LOGIN EXAMPLE

 

 

How To Make Login Screen In Kotlin:

To make a Kotlin login page, first of all, open your Android Studio and make a new Project. Name it “LoginApp” or give any name of your choice. Select KOTLIN as the default language for your project.

Before start coding first define these colors in your “colors.xml” file. You can find this file in your “res” folder under the “values” directory.

 

 

Now we need to add some images for the email and password fields. Right-click on the drawable folder and select New then select Vector Asset. Select your desired icon from the list and press OK. Repeat the same procedure again and select another icon of your choice for the password field. Take one more icon “cancel” or “remove” whatever you like from the list. We will display it on the right side of the Text fields to remove the text. Now you can see all the three icons inside your drawable folder. Double click on the icon and it will open the vector properties for that icon. Here you have to change the property android:tint with android:tint=”#9e9e9e”.

 

Android Login

activity_main.xml

 

Come to the activity_main.xml file and first of all change the default Constraint Layout to Relative Layout. We will add some views in our activity_main.xml file. These views are:

1- Toolbar

2-EditText

3-TextView

4-Button

5-Radio Button

First, we will design our Toolbar. For doing so first go to the styles.xml file under the values folder. Change the default with this one.

 

 

We give an id for the toolbar and define its height and width. After adding text and some other properties our toolbar will be like this.

 

 

Similarly, we will create other views and give them their respective ids, height/width, and other properties. The final activity_main.xml file will look like this.

 

 

Login Android Example

MainActivity.kt

 

In MainActivity.kt file first define the toolbar above onCreate method.

 

 

Initialize the toolbar in the onCreate method and set the default icons for our Email and Password fields.

 

Note: email and password are the ids of our EditText in XML and message and password are the names of vector icons we created in the beginning.

Now what we are going to do here is that our Text fields icons will change their color if the Text fields are not empty. If they have some text the icons will appear blue otherwise for the empty Text field its icon color will be transparent. For achieving this we will apply addTextChangedListener with TextWatcher on both of our EditText. It has three methods.

1- beforeTextChanged.

2- onTextChanged.

3- afterTextChanged.

In our case, we are dealing with the afterTextChanged method. We apply addTextChangedListener with TextWatcher on our email EditText like this.

 

 

For our password EditText, we apply addTextChangedListener with TextWatcher like this.

 

 

Now we can see that after the above code whenever a user enters something in any Text field the icon color changes. Also, a small “cancel” image appears on the right end of the EditText. Now, will code for that “cancel” icon so that whenever the user presses that icon it will clear the Text box. This is how you can do that with the help of setOnTouchListener. In the case of our email Text field like this.

 

 

For our password Text field. Like this.

 

 

Radio Button

Now, we have a radio button in our activity_main.xml file. Here it doesn’t do anything because of that we put a simple code to check and uncheck the radio button when pressed. This is how to do that.

 

Note: remember_password is the id of our radio button in XML

 

If you notice we have used TextWatcher before to change the colors of our icons if the fields are empty/not empty. We need TextWatcher again but this time as a value because we have to change the color of the Button if any of the Text fields is empty. We will do it outside our onCreate method like this.

 

TextWatcher as val

 

 

After that, add this TextWatcher value ( loginTextWatcher ) with addTextChangedListener method for both EditText inside onCreate method like this.

 

 

Finally, when the app starts it’s obvious that our EditText(s) are empty. Because of this we apply a condition in our onStart method. It will display our Button as not enabled when the app starts. Override the onStart method like this.

 

 

Our complete final MainActivity.kt file is like this.

 

 

So now here we complete our code. And I hope that you like this simple but beautiful Kotlin Login Screen for your android applications. Still, if you’re facing issues in understanding Android Kotlin Login Example then ask in the comments section. Have fun 🙂

 

OUTPUT

 

 

 

 

 

People Also Read

• Software Engineering MCQs
• Android Custom Toolbar In KOTLIN
• Enable OR Disable Wifi in Android Programmatically Using Kotlin
• Kotlin Text to Speech Working Example
• How to check Internet connection in Android Programmatically