¿Cómo comunicarse entre fragmentos en Android?

Hoy en día, la mayoría de las aplicaciones tienen tantas funciones que usan múltiples fragmentos en una sola aplicación y la comunicación es una de las partes importantes de las aplicaciones para compartir datos de un fragmento a otro porque dos fragmentos no pueden comunicarse directamente. Un fragmento representa una parte de cualquier interfaz de usuario. Puede haber varios fragmentos dentro de una actividad. Tienen su propio ciclo de vida.

Acercarse

Hay múltiples formas en las que podemos comunicarnos dentro de las aplicaciones:

• Podemos comunicarnos dentro de fragmentos usando ViewModel .
• También podemos comunicarnos entre fragmentos usando Interface.

En este artículo, vamos a explicar la comunicación entre fragmentos usando la interfaz usando Kotlin.

Implementación paso a paso

Paso 1: crea un nuevo proyecto en tu estudio de Android 

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.

Paso 2: crea dos fragmentos en blanco 

Navegue a su archivo de Proyecto donde existe MainActivity.kt . Haga clic derecho en esa carpeta y haga clic en el nuevo paquete y asígnele el nombre fragmentos. Ahora, dentro de esta carpeta recién creada, cree dos fragmentos en blanco y llámelos Fragment1 & Fragment2 .

Paso 3: trabajar con archivos XML

Vaya a la aplicación > res > diseño > fragmento1.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  fragment1.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragments.Fragment1">
 
    <!-- Text View for showing Fragment1 text -->
    <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"/>
   
    <!-- Edit Text for taking user input -->
    <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 for submit user response -->
    <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>

Vaya a la aplicación > res > diseño > fragmento2.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  fragment2.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragments.Fragment2">
 
    <!-- Text View for showing Fragment2 text -->
    <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"/>
 
    <!-- Frame Layout which will replaced by data from Fragment1 -->
    <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>

Paso 4: Crear interfaz

Vuelva a navegar a la carpeta de su proyecto donde se encuentra MainActivity.kt y haga clic con el botón derecho en esa carpeta -> nuevo -> clase/archivo de Kotlin -> Interfaz , asígnele el nombre de Communicator.

package com.mrtechy.gfg
 
interface Communicator {
    fun passData(ediTextInput:String)
}

Paso 5: Trabajar con MainActivity.kt 

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)
 
        // created instance of Fragment1
        val fragment1 = Fragment1()
 
        // Frame manager called to replace Fragment2 frame layout with Fragment1 data
        supportFragmentManager.beginTransaction().replace(R.id.frameLayout,fragment1).commit()
    }
 
    // Override function which we
    // have created in our interface
    override fun passData(ediTextInput: String) {
        val bundle = Bundle()
        bundle.putString("message", ediTextInput)
 
        val transaction = this.supportFragmentManager.beginTransaction()
         
        // Created instance of fragment2
        val fragment2 = Fragment2()
 
        fragment2.arguments = bundle
        transaction.replace(R.id.frameLayout,fragment2)
        transaction.commit()
    }
}

Paso 6: Trabajando con Fragment1 & Fragment file

A continuación se muestra el código de los archivos Fragment1.kt y Fragment2.kt respectivamente. 

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? {
       
        // Inflate the layout for this fragment
        val view = inflater.inflate(R.layout.fragment_1, container, false)
 
        communicator = activity as Communicator
       
        // there are button and edittext id which we have saved
        val button:Button = view.findViewById(R.id.sendBtn)
        val textMessage:EditText = view.findViewById(R.id.messageInput)
 
        // pass data to our interface while
        // button clicked using setOnClickListener
        button.setOnClickListener {
            communicator.passData(textMessage.text.toString())
        }
 
        return view
 
    }
 
}

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() {
 
    // initialised a empty string variable
    var displayMessage:String? =""
 
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
       
        // Inflate the layout for this fragment
        val view = inflater.inflate(R.layout.fragment_2, container, false)
        val displayM:TextView = view.findViewById(R.id.displayMessage)
 
        // get text from interface and send
        // to textView present in Fragment2
        displayMessage = arguments?.getString("message")
        displayM.text = displayMessage
        return view
    }
 
}

Producción:

Producción