Skip to main content

Exploring Kotlin's LiveData | Part I | Android | V4ALL

Good day!!!


As Per Android Developer documentation, LiveData is an observable data holder class. Unlike a regular observable, LiveData is lifecycle-aware, meaning it respects the lifecycle of other app components, such as activities, fragments, or services. This awareness ensures LiveData only updates app component observers that are in an active lifecycle state.

Let's explore this statement with an simple example.

Create our own observer which notifies if any changes available in an username.

Create a Basic Application in Android Studio using File → New → New Project and Choose Basic Activity template. [I used Android Studio 4.0], and finish project setup.


Create a kotlin file and name it as UserModel.kt and copy paste following codes,
package com.example.basicapplication
interface UserObserver {
    fun onUsernameChanged(username: String)
}

object UserHolder {
    private var username: String = ""
    private val userObservers = mutableSetOf<userobserver>()

    fun addObservers(observer: UserObserver) {
        userObservers.add(observer)
    }

    fun setUsername(username: String) {
        this.username = username
        userObservers.forEach { it.onUsernameChanged(username) }
    }
}
Replace the first_fragment.xml with following content,
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".FirstFragment">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tlUsername"
        app:errorEnabled="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/username"
        app:layout_constraintBottom_toTopOf="@id/btnSet"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10" />
    </com.google.android.material.textfield.TextInputLayout>

    <Button
        android:id="@+id/btnSet"
        style="@style/Widget.MaterialComponents.Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/set_value"
        app:layout_constraintBottom_toTopOf="@+id/button_first"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tlUsername" />

    <Button
        android:id="@+id/button_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/next"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btnSet" />
</androidx.constraintlayout.widget.ConstraintLayout>
Replace the FirstFragment.kt with following content, 
package com.example.basicapplication
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import androidx.fragment.app.Fragment
import androidx.navigation.fragment.findNavController
import kotlinx.android.synthetic.main.fragment_first.*

class FirstFragment : Fragment(), UserObserver {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_first, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        UserHolder.addObservers(this)

        btnSet.setOnClickListener {
            val userName = tlUsername.editText?.text.toString()
            if (userName.isEmpty()) {
                tlUsername.error = "Please enter username"
                return@setOnClickListener
            }
            UserHolder.setUsername(userName)
        }
        button_first.setOnClickListener {
            findNavController().navigate(R.id.action_FirstFragment_to_SecondFragment)
        }
    }

    override fun onUsernameChanged(username: String) {
        val userName = tlUsername.editText?.text.toString()
        if (userName.isEmpty()) {
            tlUsername.error = "Please enter username"
            return
        }
        Toast.makeText(requireContext(), "$userName : From FirstFragment", Toast.LENGTH_LONG).show()
    }
}
Replace the second_fragment.xml with following content, 
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".SecondFragment">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tlUsername"
        app:errorEnabled="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/username"
        app:layout_constraintBottom_toTopOf="@id/btnSet"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10" />
    </com.google.android.material.textfield.TextInputLayout>

    <Button
        android:id="@+id/btnSet"
        style="@style/Widget.MaterialComponents.Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/set_value"
        app:layout_constraintBottom_toTopOf="@+id/button_second"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tlUsername" />

    <Button
        android:id="@+id/button_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/previous"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btnSet" />
</androidx.constraintlayout.widget.ConstraintLayout>
Replace the SecondFragment.kt with following content, 
package com.example.basicapplication

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import androidx.fragment.app.Fragment
import androidx.navigation.fragment.findNavController
import kotlinx.android.synthetic.main.fragment_second.*
import kotlinx.android.synthetic.main.fragment_second.btnSet
import kotlinx.android.synthetic.main.fragment_second.tlUsername

class SecondFragment : Fragment(), UserObserver {

    override fun onCreateView(
            inflater: LayoutInflater, container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_second, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        UserHolder.addObservers(this)

        btnSet.setOnClickListener {
            val userName = tlUsername.editText?.text.toString()
            if (userName.isEmpty()) {
                tlUsername.error = "Please enter username"
                return@setOnClickListener
            }
            UserHolder.setUsername(userName)
        }

        button_second.setOnClickListener {
            findNavController().navigate(R.id.action_SecondFragment_to_FirstFragment)
        }
    }

    override fun onUsernameChanged(username: String) {
        val userName = tlUsername.editText?.text.toString()
        if (userName.isEmpty()) {
            tlUsername.error = "Please enter username"
            return
        }
        Toast.makeText(requireContext(), "$userName : From FirstFragment", Toast.LENGTH_LONG).show()
    }
}
Now run your app, and if you test like following video, app will get crashed with report java.lang.IllegalStateException: tlUsername must not be null on FirstFragment, because our observer notifies FirstFragment which is dead while we are in SecondFragment, 

  


Ofcourse we can handle this manually in several ways, but we can simply fix this crash by using LiveData as following way,
Just Replace the UserModel.kt with following content, 
import androidx.lifecycle.MutableLiveData

var username = MutableLiveData<String>()
    get() = field
    set(value) {field = value}
And Your FirstFragment.kt will be 
package com.example.basicapplication

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import androidx.fragment.app.Fragment
import androidx.lifecycle.Observer
import androidx.navigation.fragment.findNavController
import kotlinx.android.synthetic.main.fragment_first.*

class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_first, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        btnSet.setOnClickListener {
            val userName = tlUsername.editText?.text.toString()
            if (userName.isEmpty()) {
                tlUsername.error = "Please enter username"
                return@setOnClickListener
            }
            username.value = userName
        }
        username.observe(viewLifecycleOwner, Observer {
            Toast.makeText(requireContext(), "$it : From FirstFragment", Toast.LENGTH_LONG).show()
        })
        button_first.setOnClickListener {
            findNavController().navigate(R.id.action_FirstFragment_to_SecondFragment)
        }
    }
}
And Your SecondFragment.kt will be 
package com.example.basicapplication

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import androidx.fragment.app.Fragment
import androidx.lifecycle.Observer
import androidx.navigation.fragment.findNavController
import kotlinx.android.synthetic.main.fragment_second.*
import kotlinx.android.synthetic.main.fragment_second.btnSet
import kotlinx.android.synthetic.main.fragment_second.tlUsername

class SecondFragment : Fragment() {

    override fun onCreateView(
            inflater: LayoutInflater, container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_second, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        btnSet.setOnClickListener {
            val userName = tlUsername.editText?.text.toString()
            if (userName.isEmpty()) {
                tlUsername.error = "Please enter username"
                return@setOnClickListener
            }
            username.value = userName
        }
        username.observe(viewLifecycleOwner, Observer {
            Toast.makeText(requireContext(), "$it : From SecondFragment", Toast.LENGTH_LONG).show()
        })
        button_second.setOnClickListener {
            findNavController().navigate(R.id.action_SecondFragment_to_FirstFragment)
        }
    }
}
Run the application now, and you will see the output without any crash like following video. 


Thank You, Share your thought as comments.

Comments

Post a Comment

Popular posts from this blog

Simple example of using Spinner in Kotlin | Android

Though Kotlin has lot massive features to speedup the development time, here is the simple way of using Spinner in Android. In Kotlin we don't need to declare and initialize Spinner. We can simply access the id of Spinner from xml. Ex : import android.os.Bundle import android.support.v7.app.AppCompatActivity import android.view.View import android.widget.AdapterView import android.widget.ArrayAdapter import android.widget.Toast import android.widget.Toast.LENGTH_LONG import kotlinx.android.synthetic.main.activity_main.* class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) //String array. val myStrings = arrayOf("One", "Two", "Three", "Four", "Five") //Adapter for spinner mySpinner.adapter = ArrayAdapter(this, android.R.layout.simple_spinner_dropdown_i...
183 comments
Read more

Simple example of OCRReader in Android.

Hi Friends, Maybe you all heard/used text scanning using camera feature or extracting text from Image. But this sample made it very easy for you. You can made it in very simple line of code. You can download the source code from OCRSample and import the library as a module into your project. Example usage : MainActivity.java public class MainActivity extends AppCompatActivity { private TextView textView; private final int CAMERA_SCAN_TEXT = 0; private final int LOAD_IMAGE_RESULTS = 1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); textView = findViewById(R.id.textView); } @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.menu_main, menu); return super.onCreateOptionsMenu(menu); } @Override public boolean onOptionsItemSele...
34 comments
Read more

Simple RecyclerView example with filter option in Android

Hi Guys, Maybe you all are expert in terms of using RecyclerView in android. This blog is simple example for using filter option with RecyclerView adapter. As for now you will instantiate RecyclerView and set the adapter to RecyclerView as following way. RecyclerView list = (RecyclerView) findViewById(R.id.list); list.setLayoutManager(new LinearLayoutManager(this)); list.setHasFixedSize(true); ArrayList&ltNumber&gt numbers = new ArrayList&lt&gt(); String ONEs[] = {"ZERO", "ONE", "TWO", "THREE", "FOUR", "FIVE", "SIX", "SEVEN", "EIGHT", "NINE", "TEN"}; String TENs[] = {"ZERO", "TEN", "TWENTY", "THIRTY", "FOURTY", "FIFTY", "SIXTY", "SEVENTY", "EIGHTY", "NINETY", "HUNDRED"}; String HUNDREDS[] = {"ZERO", "HUNDRED", "TWO HUND...
58 comments
Read more