Monday 2 April 2018

Login Screen handle with text watcher in multiple textinputedittext and validate username and password in Kotlin and handle button onclick xml with function

Login Screen handle with text watcher in multiple textinputedittext and validate username and password in Kotlin and handle button Onclick XML with function



1: Create activity_main.xml to design login form fields as username, password, and button

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
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"  
android:layout_width="match_parent"
android:layout_height="match_parent"    
tools:context="www.paymonk.com.kridhankotlin.MainActivity">

<android.support.v7.widget.CardView        
android:id="@+id/cardView"        
android:layout_width="match_parent"        
android:layout_height="wrap_content"        
android:layout_centerHorizontal="true"        
android:layout_centerVertical="true"        
android:layout_margin="25dp"        
app:cardCornerRadius="5dp"        
app:cardElevation="1dp"        
app:cardUseCompatPadding="true">

<LinearLayout            
android:layout_width="match_parent"            
android:layout_height="match_parent"            
android:orientation="vertical">

<android.support.design.widget.TextInputLayout
android:id="@+id/usernamewrapper"                
android:layout_width="match_parent"                
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:id="@+id/et_username"                    
android:layout_width="match_parent"                    
android:layout_height="wrap_content"                    
android:hint="Username" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/passwordwrapper"            
android:layout_width="match_parent"               
android:layout_height="wrap_content">

<android.support.design.widget.TextInputEditText  
android:id="@+id/et_password"                   
android:layout_width="match_parent"                    
android:layout_height="wrap_content"                    
android:hint="Password" />
</android.support.design.widget.TextInputLayout>

<Button                
android:id="@+id/btn_login"                
android:layout_width="wrap_content"                
android:layout_height="wrap_content"                
android:layout_gravity="center"                
android:onClick="login"                
android:text="Login" />

</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>



2: Create MainActivity.kt 

class MainActivity : AppCompatActivity() {


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

3: Validate fields using validate function

fun validate() {
    var userName = et_username.text.toString()
    var password = et_password.text.toString()

if (userName.equals("") || userName.equals(null)) {
usernamewrapper.error = "Username is not null"        
usernamewrapper.isErrorEnabled = true    
} else if (password.equals("") || password.equals(null)) {
passwordwrapper.error = " Password is not null"        
passwordwrapper.isErrorEnabled = true    
} else {
usernamewrapper.isErrorEnabled = false        
passwordwrapper.isErrorEnabled = false        
Toast.makeText(this, " Login successfully : username-> " 
+ userName + " password-> " 
+ password, 
Toast.LENGTH_SHORT).show()
    }
}

4: onclick xml in create function onclick="login"

fun login(v: View) {
    validate()
}

5: Textwatcher handle multiple textinputedittext by id

inner class Textwatcher(var v: View) : TextWatcher {

    override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
        //do something    }

    override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
        //do something    }

    override fun afterTextChanged(s: Editable?) {
        when (v.getId()) {
            R.id.et_username -> if (!s.isNullOrEmpty()) {
                usernamewrapper.setErrorEnabled(false)
            }

            R.id.et_password -> if (!s.isNullOrEmpty()) {
                passwordwrapper.setErrorEnabled(false)
            }
        }
    }

}


6:Then complete MainActivity.kt

package www.abhishek.com.kotlin

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.text.Editable
import android.text.TextWatcher
import android.view.View
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*


/** * Created by abhishek * https://abhiandroidknowledge.blogspot.com/2018/04/login-screen-handle-with-text-watcher.html
 * */
class MainActivity : AppCompatActivity() {


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

        initialise()
    }

    fun initialise() {
        et_username.addTextChangedListener(Textwatcher(et_username))
        et_password.addTextChangedListener(Textwatcher(et_password))
    }

    fun login(v: View) {
        validate()
    }

    fun validate() {
        var userName = et_username.text.toString()
        var password = et_password.text.toString()

if (userName.equals("") || userName.equals(null)) {
usernamewrapper.error = "Username is not null"            
usernamewrapper.isErrorEnabled = true        
} else if (password.equals("") || password.equals(null)) {
passwordwrapper.error = " Password is not null"            
passwordwrapper.isErrorEnabled = true        
} else {
usernamewrapper.isErrorEnabled = false            
passwordwrapper.isErrorEnabled = false            
Toast.makeText(this, " Login successfully : username-> " 
+ userName + " password-> " 
+ password, 
Toast.LENGTH_SHORT).show()
        }
    }

    inner class Textwatcher(var v: View) : TextWatcher {

        override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
            //do something        }

        override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
            //do something        }

        override fun afterTextChanged(s: Editable?) {
            when (v.getId()) {
                R.id.et_username -> if (!s.isNullOrEmpty()) {
                    usernamewrapper.setErrorEnabled(false)
                }

                R.id.et_password -> if (!s.isNullOrEmpty()) {
                    passwordwrapper.setErrorEnabled(false)
                }
            }
        }

    }

}

7:Complete login form and validate the form and textwatcher watch the error

Thank you

In kotlin difference between var and val

In Kotlin difference between VAR and VAL


VAR : Var is mutable variable in Kotlin i.e var is read and write value. We can change value many times or assigned value in class.

Example:


var x = 25
//first inialised the value of x
print(x)

 x= 26
//change the value x in many times in class 
print(x)


   

VAL : Val is immutable in Kotlin i.e val is read only. Val is like final value in java. We can use val where I use final in java. Val is constant variable.

Example:


val x = 25
//first inialised the value of x
print(x)

//can not change the value of x because x is immutable
 x= 26
// compile time error Val cannot be reassigned
print(x)

Output:
Error : Kotlin:  Val cannot be reassigned