What is ViewModel and How to design and implement Login Screen with ViewModel Pattern using Kotlin.
Last updated Jan 07, 2022In this android example tutorial, we will see What is ViewModel and how to implement viewmodel pattern in Android Login Screen Kotlin code.
What is ViewModel?
In Android, the ViewModel class is intended to store and handle UI-related data in a lifecycle-aware manner. The ViewModel class enables data to persist via configuration changes such as screen rotations.
ViewModel Implementation in Login Screen:
Step 1: Create a new Project in android studio.
Go to File > New > New Project > Empty Activity > Next > Enter Name > Select Language Kotlin > Finish |
Step 2: Open build.gradle(app) file and add the following code
Add ViewModel and LiveData Lifecycle dependency inside dependencies..
// ViewModel |
Add the kotlin-kapt inside plugins
id 'kotlin-kapt' |
Enable the DataBinding inside android...
buildFeatures{ |
Step 3: Create LoginUser Model
Create a new kotlin file (LoginUser.kt) and add the following code:
class User(private var email: String, private var password: String) : BaseObservable() { fun getPassword(): String { fun getEmail(): String { fun setEmail(email: String) { fun setPassword(password: String) { } |
Step 4: Create a Interface
Create a new kotlin file (LoginResultCallBacks.kt) which has two function onSuccess and onError be like:
interface LoginResultCallBacks { |
Step 5: Implement ViewModel
Create a new kotlin file (LoginViewModel.kt) and add the following code:
class LoginViewModel(private val listener: LoginResultCallBacks) : ViewModel() { init { val emailTextWatcher: TextWatcher override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) { override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) { } }
override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) { } override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) { } } fun onLoginClicked(v: View) { } |
TextWatcher: The Android Developer API has a useful class called TextWatcher. It can be used to keep an eye on an input text field and rapidly update data in other views. It can be handy for immediately counting the number of characters input in the text field and measuring password strength when entering, among other things.
Methods of TextWatcher
abstract void |
afterTextChanged(Editable s) |
abstract void |
beforeTextChanged(CharSequence s, int start, int count, int after) |
abstract void |
onTextChanged(CharSequence s, int start, int before, int count) |
Create a new file of Kotlin (LoginViewModelFactory.kt) and add the following code:
We need to pass some input data to the constructor of the viewModel , we need to create a factory class for viewModel.
class LoginViewModelFactory (private val listener: LoginResultCallBacks):ViewModelProvider.NewInstanceFactory() { override fun create(modelClass: Class): T { |
Step 6: Open activity_main.xml file and add the following xml code.
<?xml version="1.0" encoding="utf-8"?> <data> <variable <LinearLayout <TextView <EditText <EditText <Button |
Above layout file gives you output as below:
![]() |
Step 7: Go to MainActivity.kt file
Bind the view with activity, add the following code below setContentView(R.layout.activity_main).
val activityMainBinding = DataBindingUtil.setContentView activityMainBinding.viewModel = ViewModelProviders.of(this,LoginViewModelFactory(this)).get(LoginViewModel::class.java) |
Implement the LoginResultCallBacks Interface in MainActivity.kt file
class MainActivity : AppCompatActivity(), LoginResultCallBacks { |
Implement the methods of LoginResultCallBacks onSuccess() and onError()
override fun onSuccess(message: String) { override fun onError(message: String) { |
Final Code of MainActivity.kt file,
class MainActivity : AppCompatActivity(), LoginResultCallBacks { override fun onError(message: String) { override fun onCreate(savedInstanceState: Bundle?) { val activityMainBinding = DataBindingUtil.setContentView(this,R.layout.activity_main) |
Step 8: Now run the app in your emulator or real device, you will get the given output:
When the field is empty:
![]() |
When we typed wrong email address:
![]() |
When we entered password value less than 6 digits:
![]() |
When everthing is Okay then it shows you success message:
![]() |
Complete Source Code of Login with ViewModel Example:
activity_main.xml file
<?xml version="1.0" encoding="utf-8"?> <data> <variable <LinearLayout <TextView <EditText <EditText <Button |
MainActivity.kt file
import androidx.appcompat.app.AppCompatActivity class MainActivity : AppCompatActivity(), LoginResultCallBacks { override fun onError(message: String) { override fun onCreate(savedInstanceState: Bundle?) { val activityMainBinding = DataBindingUtil.setContentView(this,R.layout.activity_main) |
LoginUser.kt file
import android.text.TextUtils
fun getPassword(): String { fun getEmail(): String { fun setEmail(email: String) { fun setPassword(password: String) { } |
LoginResultCallBacks.kt file
interface LoginResultCallBacks { |
LoginViewModel.kt file
import android.text.Editable class LoginViewModel(private val listener: LoginResultCallBacks) : ViewModel() { init { val emailTextWatcher: TextWatcher override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) { override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) { } }
override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) { } override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) { } } fun onLoginClicked(v: View) { } |
LoginViewModelFactory.kt file
import androidx.lifecycle.ViewModel class LoginViewModelFactory (private val listener: LoginResultCallBacks):ViewModelProvider.NewInstanceFactory() { override fun create(modelClass: Class): T { |
build.gradle(app) file
plugins { } android { defaultConfig { testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" buildFeatures{ dependencies { implementation 'androidx.core:core-ktx:1.7.0' |
Conclusion: In this example we have covered what is Android Jetpack ViewModel and how to implement Login Screen with ViewModel in Android Studio using Kotlin Language.
Article Contributed By :
|
|
|
|
2352 Views |