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! 😀
Zakh Codelabs 
You must be logged in to post a comment.