Android – Login Form

In this tutorial you will learn how to create a simple login form. To start learning Android Application Development, you will need a computer or laptop and Android Studio, Google’s Integrated Development Environment (IDE). This tutorial makes use of the Kotlin Programming Language. Hence before diving into Android application development, it is recommended to have at least a basic knowledge of the Kotlin Programming Language.

Login Form

We will create a simple login form. Open Android Studio, create an Android app just like we did in Android – Introduction and name the project Sample Login.

In the left of your IDE, double-click on the file build.gradle (Module: Sample_Login.app) to open it. Apply the plugin ‘kotlin-kapt’ above the android { } and inside it, enable data binding.

apply plugin: 'kotlin-kapt'

android {
    compileSdkVersion 30
    buildToolsVersion "30.0.0"

    defaultConfig {
        applicationId "com.example.samplelogin"
        minSdkVersion 16
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    dataBinding {
        enabled = true
    }
}

Select the strings.xml file and copy and paste the following codes:

<resources>
    <string name="app_name">Sample Login</string>
    <string name="txt_email">Email</string>
    <string name="txt_password">Password</string>
    <string name="btn_login">Log In</string>
    <string name="alert_login_title">Login</string>
    <string name="alert_login_message">You have pressed the Log In button! Your email address is %s.</string>
    <string name="alert_login_ok">OK</string>
</resources>

Select the activity_main.xml file and replace the following codes:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <TextView
            android:id="@+id/txtEmail"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="40dp"
            android:layout_marginEnd="20dp"
            android:layout_marginRight="20dp"
            android:text="@string/txt_email"
            android:textSize="15sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/editEmail"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="20dp"
            android:layout_marginRight="20dp"
            android:ems="10"
            android:hint="@string/txt_email"
            android:importantForAutofill="no"
            android:inputType="textEmailAddress"
            android:labelFor="@id/txtEmail"
            android:textSize="15sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.497"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/txtEmail" />

        <TextView
            android:id="@+id/txtPassword"
            android:layout_width="371dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="20dp"
            android:layout_marginRight="20dp"
            android:text="@string/txt_password"
            android:textSize="15sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/editEmail" />

        <EditText
            android:id="@+id/editPassword"
            android:layout_width="371dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="20dp"
            android:layout_marginRight="20dp"
            android:ems="10"
            android:hint="@string/txt_password"
            android:importantForAutofill="no"
            android:inputType="textPassword"
            android:labelFor="@+id/txtPassword"
            android:textSize="15sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/txtPassword" />

        <Button
            android:id="@+id/btnLogin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="40dp"
            android:layout_marginEnd="20dp"
            android:layout_marginRight="20dp"
            android:text="@string/btn_login"
            android:textSize="18sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/editPassword" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Run the project.

Clicking on the LOG IN Button does nothing for now. Let’s add an action to it such that clicking on it, will prompt an alert. Select the MainActivity.kt file and copy and paste the following codes:

package com.example.samplelogin

import android.os.Bundle
import androidx.appcompat.app.AlertDialog
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import com.example.samplelogin.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        binding.btnLogin.setOnClickListener { btnLoginDidPressed() }
    }

    private fun btnLoginDidPressed() {
        var message = resources.getString(R.string.alert_login_message, "unknown")
        val email = binding.editEmail.text

        if (email.isNotEmpty() && email.isNotBlank()) {
            message = resources.getString(R.string.alert_login_message, email)
        }

        val alert = AlertDialog.Builder(this)

        alert.setTitle(R.string.alert_login_title)
        alert.setMessage(message)
        alert.setPositiveButton(R.string.alert_login_ok) { _, _ -> }
        alert.create()
        alert.show()
    }
}

Run the project. You should now have an alert displayed upon clicking on the Log In Button.

Well done! 😀 You created an app with a simple Login Form. Awesome! 😀