Monday, December 17, 2018

android kotlin - TextInputLayout and TextInputEditText example

MainActivity.kt

package com.cfsuman.jetpack

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.transition.TransitionManager
import android.util.Patterns
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        // Button click listener
        btnSignin.setOnClickListener {
            if (isValidForm()){
                Toast.makeText(this,"Login success",Toast.LENGTH_SHORT).show()
            }
        }
    }

    // Custom method to validate form inputted data
    private fun isValidForm():Boolean{
        var isValid = true

        val email = etEmail.text.toString().trim()
        val password = etPassword.text.toString().trim()

        TransitionManager.beginDelayedTransition(rootLayout)
        if (!email.isValidEmail()){
            layoutEmail.isErrorEnabled = true
            layoutEmail.error = "input your email"
            isValid = false
        }else{
            layoutEmail.isErrorEnabled = false
        }

        if (password.isNullOrEmpty()){
            layoutPassword.isErrorEnabled = true
            layoutPassword.error = "Input password"
            isValid = false
        }else{
            layoutPassword.isErrorEnabled = false
        }

        return isValid
    }
}

// Extension function to validate email address
fun String.isValidEmail(): Boolean
        = !this.isNullOrEmpty() &&
        Patterns.EMAIL_ADDRESS.matcher(this).matches()
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/rootLayout"
        tools:context=".MainActivity">

    <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/layoutEmail"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginTop="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
        <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/etEmail"
                android:hint="Email"/>
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/layoutPassword"
            android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/layoutEmail"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="8dp"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="8dp"
            style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
        <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/etPassword"
                android:hint="Password"
                android:inputType="textPassword"
        />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.button.MaterialButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btnSignin"
            android:text="Signin"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/layoutPassword"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
    />

</androidx.constraintlayout.widget.ConstraintLayout>
res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>
gradle dependencies

// Material components theme
implementation 'com.google.android.material:material:1.0.0'
More android examples