Fragment to Fragment Communication in Android using Shared ViewModel
If there are two or more fragments in an activity, they need to communicate and share the data between them. The traditional way of sharing the data between the two fragments is implementing the callback using an interface that is cumbersome and may throw exceptions. But the modern way of doing that is using shared ViewModel. So in this article, it’s been demonstrated how the shared ViewModel can be used to communicate between the fragments. Have a look at the following image to get an overview of the discussion.
Note: This discussion is implemented in Kotlin programming language.
Steps to implement the communication between fragments
Step 1: Create an empty activity project
Create an empty activity Android Studio project, and select Kotlin as the programming language. Refer to Android | How to Create/Start a New Project in Android Studio?.
Step 2: Adding required dependencies
The dependencies include the ViewModel and the LiveData. So, in the app level Gradle file add the following dependencies and sync the project.
// lifecycle_version and architecture versions may vary
def lifecycle_version = “2.3.1”
def arch_version = “2.1.0”
// Lifecycles only (without ViewModel or LiveData)
// architecture Lifecycle extensions
Step 3: Working with activity_main.xml file
The main layout of the application contains the two FrameLayouts which hold the two fragments. To implement the same invoke the following code inside the activity_main.xml file.
Step 4: Implementing Shared ViewModel
In the SharedViewModel.kt file there are there is one MutableLiveData of CharSequence for setting the data for EditTexts. Two functions setData and getData for updating that mutable live data as soon as the data inside the EditTexts changes.
To implement the same invoke the following code.
Step 5: Creating 2 Fragments
- Create two Fragments with their own layouts naming Fragment1.kt and Fragment2.kt.
- For each of the fragment’s layouts, it contains one EditText to get the data to send for fragment 2 and one button, when clicked it shares the data to another fragment.
- To implement the layout for Fragment 1, invoke the following code inside the fragment_1.xml file
To implement the layout for Fragment 2, invoke the following code inside the fragment_2.xml file.
Step 6: Creating instances of shared view model inside the Fragment.kt files
- There is a need to create the instance of the ViewModel of the type ShareViewModel when the Activity is created.
- So one needs to override the onActivityCreated() method inside each of the Fragments.
- This is so because when we see the lifecycle of the fragments the views are created and updated after the onCreateView() is called and onAcrivityCreated() callback is called after the onCreateView() is executed. So the LiveData can keep track of UI elements for which elements they have updated. Have a look at the following chart for the activity lifecycle of the fragment.
To implement the same in both fragments invoke the, following code inside Fragment1.kt.
And same goes with the Fragment2.kt file, invoke the following code.
Step 7: Populate the fragment holders using MainActivity.kt file
Inside the MainActivity.kt file, one needs to populate the fragment holders from the activity_main.xml, with both fragments. To implement the same invoke the following code inside the MainActivity.kt file.