Email Login & Sign in UI and Program in Kotlin

 Creating an email login and sign-in UI in Kotlin involves designing the user interface using XML for the layout and writing the logic in Kotlin. Below is a step-by-step guide to creating a simple email login and sign-in UI in Android using Kotlin.

---

1. Create the UI in XML

The UI will consist of two EditText fields for email and password, and two Button elements for login and sign-in.

activity_login.xml

xml

Copy

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <!-- Email Input -->
    <EditText
        android:id="@+id/etEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email"
        android:inputType="textEmailAddress" />

    <!-- Password Input -->
    <EditText
        android:id="@+id/etPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="textPassword" />

    <!-- Login Button -->
    <Button
        android:id="@+id/btnLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Login"
        android:layout_marginTop="16dp" />

    <!-- Sign Up Button -->
    <Button
        android:id="@+id/btnSignUp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Sign Up"
        android:layout_marginTop="8dp" />

    <!-- Status Message -->
    <TextView
        android:id="@+id/tvStatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Status: Not logged in"
        android:textSize="16sp" />

</LinearLayout>

Run HTML

---

2. Write the Kotlin Logic

In the LoginActivity.kt file, handle the button clicks and validate the email and password.

LoginActivity.kt

kotlin

Copy

package com.example.emailauth

import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class LoginActivity : AppCompatActivity() {

    private lateinit var etEmail: EditText
    private lateinit var etPassword: EditText
    private lateinit var btnLogin: Button
    private lateinit var btnSignUp: Button
    private lateinit var tvStatus: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_login)

        // Initialize views
        etEmail = findViewById(R.id.etEmail)
        etPassword = findViewById(R.id.etPassword)
        btnLogin = findViewById(R.id.btnLogin)
        btnSignUp = findViewById(R.id.btnSignUp)
        tvStatus = findViewById(R.id.tvStatus)

        // Login Button Click Listener
        btnLogin.setOnClickListener {
            val email = etEmail.text.toString().trim()
            val password = etPassword.text.toString().trim()

            if (validateInputs(email, password)) {
                // Simulate a successful login
                tvStatus.text = "Status: Logged in"
                Toast.makeText(this, "Login Successful!", Toast.LENGTH_SHORT).show()
            }
        }

        // Sign Up Button Click Listener
        btnSignUp.setOnClickListener {
            val email = etEmail.text.toString().trim()
            val password = etPassword.text.toString().trim()

            if (validateInputs(email, password)) {
                // Simulate a successful sign-up
                tvStatus.text = "Status: Signed up"
                Toast.makeText(this, "Sign Up Successful!", Toast.LENGTH_SHORT).show()
            }
        }
    }

    // Function to validate email and password inputs
    private fun validateInputs(email: String, password: String): Boolean {
        if (email.isEmpty()) {
            etEmail.error = "Email is required"
            return false
        }

        if (password.isEmpty()) {
            etPassword.error = "Password is required"
            return false
        }

        if (!android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
            etEmail.error = "Invalid email format"
            return false
        }

        if (password.length < 6) {
            etPassword.error = "Password must be at least 6 characters"
            return false
        }

        return true
    }
}

---

3. Explanation

• UI Components:

  • EditText for email and password input.

  • Button for login and sign-up actions.

  • TextView to display the login/sign-up status.

• Kotlin Logic:

  • validateInputs() ensures the email is valid and the password meets the minimum length requirement.

  • btnLogin and btnSignUp simulate login and sign-up actions.

  • Toast is used to display success messages.

---

4. Run the App

• Connect an Android device or use an emulator.

• Build and run the app in Android Studio.

• Enter an email and password, then click the login or sign-up button to see the result.

---

5. Next Steps

• Integrate with a backend (e.g., Firebase Authentication) for real email/password authentication.

• Add error handling for network issues or invalid credentials.

• Improve the UI with animations, themes, and better error messages.