How to Communicate Between Fragments in Android?
Now a day most apps have so many features so for that they use multiple fragments in a single app and communication is one of the important parts of apps for sharing data from one fragment to another because two fragments can’t communicate directly. A Fragment represents a portion of any user interface. There can be a number of fragments within one activity. They have their own life cycle.
Approach
There are multiple ways in which we can communicate within apps:
- We can communicate within fragments using the ViewModel.
- We can also communicate between fragments using Interface.
In this article, we are going to explain communicating within between fragments using the Interface using Kotlin.
Step by Step Implementation
Step 1: Create a New Project in your android studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.
Step 2: Create two blank fragments
Navigate to your Project file where MainActivity.kt exists. Right-click on that folder and click on the new package and name it fragments. Now inside this newly created folder create two blank fragments and name them Fragment1 & Fragment2.
Step 3: Working with XML files
Navigate to the app > res > layout > fragment1.xml and add the below code to that file. Below is the code for the fragment1.xml file.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".fragments.Fragment1" >
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:text = "Fragment 1"
android:textSize = "40sp"
android:layout_centerHorizontal = "true"
android:gravity = "center"
android:layout_marginTop = "20dp"
android:textColor = "@color/black" />
< EditText
android:id = "@+id/messageInput"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:text = "Enter text to Pass"
android:layout_marginTop = "200dp"
android:gravity = "center"
android:layout_marginLeft = "30dp"
android:layout_marginRight = "30dp"
android:textSize = "30sp" />
< Button
android:id = "@+id/sendBtn"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_below = "@+id/etText"
android:text = "Submit"
android:backgroundTint = "#0F9D58"
android:textSize = "20sp"
android:textAllCaps = "false"
android:layout_marginLeft = "30dp"
android:layout_marginRight = "30dp"
android:layout_marginTop = "20dp" />
</ RelativeLayout >
|
Navigate to the app > res > layout > fragment2.xml and add the below code to that file. Below is the code for the fragment2.xml file.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".fragments.Fragment2" >
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:text = "Fragment 2"
android:textSize = "40sp"
android:layout_centerHorizontal = "true"
android:gravity = "center"
android:layout_marginTop = "20dp"
android:textColor = "@color/black" />
< FrameLayout
android:id = "@+id/frameLayout"
android:layout_width = "match_parent"
android:layout_height = "wrap_content" >
< TextView
android:id = "@+id/displayMessage"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:text = "Text"
android:textSize = "30sp"
android:layout_centerHorizontal = "true"
android:gravity = "center"
android:layout_marginTop = "300dp"
android:textColor = "@color/black" />
</ FrameLayout >
</ RelativeLayout >
|
Step 4: Create Interface
Again navigate to your Project folder where MainActivity.kt exists and right-click on that folder -> new -> Kotlin class/file -> Interface them name it as Communicator.
Kotlin
package com.mrtechy.gfg
interface Communicator {
fun passData(editTextInput:String)
}
|
Step 5: Working With the MainActivity.kt
Kotlin
package com.mrtechy.gfg
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.mrtechy.gfg.fragments.Fragment1
import com.mrtechy.gfg.fragments.Fragment2
class MainActivity : AppCompatActivity(), Communicator {
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val fragment1 = Fragment1()
supportFragmentManager.beginTransaction().replace(R.id.frameLayout,fragment1).commit()
}
override fun passData(editTextInput: String) {
val bundle = Bundle()
bundle.putString( "message" , editTextInput)
val transaction = this .supportFragmentManager.beginTransaction()
val fragment2 = Fragment2()
fragment2.arguments = bundle
transaction.replace(R.id.frameLayout,fragment2)
transaction.commit()
}
}
|
Step 6: Working With Fragment1 & Fragment file
Below is the code for the Fragment1.kt and Fragment2.kt files respectively.
Kotlin
package com.mrtechy.gfg.fragments
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import android.widget.EditText
import com.mrtechy.gfg.Communicator
import com.mrtechy.gfg.R
class Fragment1 : Fragment() {
private lateinit var communicator: Communicator
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val view = inflater.inflate(R.layout.fragment_1, container, false )
communicator = activity as Communicator
val button:Button = view.findViewById(R.id.sendBtn)
val textMessage:EditText = view.findViewById(R.id.messageInput)
button.setOnClickListener {
communicator.passData(textMessage.text.toString())
}
return view
}
}
|
Kotlin
package com.mrtechy.gfg.fragments
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import com.mrtechy.gfg.R
class Fragment2 : Fragment() {
var displayMessage:String? = ""
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val view = inflater.inflate(R.layout.fragment_2, container, false )
val displayM:TextView = view.findViewById(R.id.displayMessage)
displayMessage = arguments?.getString( "message" )
displayM.text = displayMessage
return view
}
}
|
Output:
Output
Last Updated :
10 Nov, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...