Jetpack LiveData en Android con ejemplo

Android Jetpack es un conjunto de bibliotecas para ayudar a los desarrolladores a seguir las mejores prácticas, reducir el código repetitivo y escribir código que funcione de manera consistente en todas las versiones y dispositivos de Android para que los desarrolladores puedan concentrarse en el código que les interesa. Aquí, vamos a implementar Jetpack Live Data en Android Studio.

¿Qué vamos a construir en este artículo?

A continuación se muestra un video de muestra de lo que vamos a construir en este artículo. Tenga en cuenta que vamos a implementar este proyecto en el lenguaje Java.

Implementación paso a paso

Paso 1. Crear un nuevo proyecto

• Abra un nuevo proyecto.
• Estaremos trabajando en Actividad vacía con lenguaje como Java. Deje todas las demás opciones sin cambios.
• Asigne un nombre a la aplicación a su conveniencia.
• Habrá dos archivos predeterminados llamados activity_main.xml y MainActivity.java.

Si no sabe cómo crear un nuevo proyecto en Android Studio, puede consultar ¿ Cómo crear/iniciar un nuevo proyecto en Android Studio?  

Paso 2. Agregar dependencias requeridas

Navegue a Gradle scripts> build.gradle (módulo) y use las siguientes dependencias en él:

implementation 'androidx.lifecycle:lifecycle-extensions:2.2.0'

Paso 3. Trabajando en archivos XML

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical"
    android:paddingTop="16dp"
    tools:context=".MainActivity">
 
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/et_text"
        android:hint="Enter Text"
        android:paddingTop="12dp"
        android:background="@android:drawable/editbox_background"/>
   
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/frame_layout"
        android:layout_marginTop="16dp"/>
 
</LinearLayout>

Navegue a la aplicación> haga clic con el botón derecho> nuevo> fragmento> fragmento en blanco. Nómbrelo como MainFragment y use el siguiente código en el archivo fragment_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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=".MainFragment">
 
   <TextView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:id="@+id/tv_result"
       android:textSize="40sp"
       android:textStyle="bold"
       android:gravity="center"/>
 
</FrameLayout>

Paso 4. Trabajando en archivos Java

Navegue hasta el archivo MainActivity.java y use el siguiente código en él. Se agregan comentarios al código para tener una mejor comprensión.

package com.example.jetpacklivedata;
 
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.ViewModelProvider;
import androidx.lifecycle.ViewModelProviders;
 
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.EditText;
 
public class MainActivity extends AppCompatActivity {
 
    // Initialize variables
    EditText editText;
    MainViewModel mainViewModel;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // Assign variables
        editText=findViewById(R.id.et_text);
 
        // Initialize view model
        mainViewModel= ViewModelProviders.of(MainActivity.this)
                .get(MainViewModel.class);
 
        editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
 
            }
 
            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                // When text change
                // Update view model text
                mainViewModel.setText(String.valueOf(charSequence));
            }
 
            @Override
            public void afterTextChanged(Editable editable) {
 
            }
        });
 
        // Initialize fragment
        Fragment fragment=new MainFragment();
         
        // Open Fragment
        getSupportFragmentManager().beginTransaction().replace(R.id.frame_layout,fragment).commit();
    }
}

Navegue hasta el archivo MainFragment.java y use el siguiente código en él. Se agregan comentarios al código para tener una mejor comprensión.

package com.example.jetpacklivedata;
 
import android.os.Bundle;
 
import androidx.fragment.app.Fragment;
import androidx.lifecycle.Observer;
import androidx.lifecycle.ViewModelProviders;
 
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
 
 
public class MainFragment extends Fragment {
 
    // Initialize variable
    TextView tvResult;
    MainViewModel mainViewModel;
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Initialize view
        View view=inflater.inflate(R.layout.fragment_main, container, false);
 
        // Assign variable
        tvResult=view.findViewById(R.id.tv_result);
 
        // Check condition
        if(getActivity()!=null){
            // When activity is not null
            // Initialize view model
            mainViewModel= ViewModelProviders.of(getActivity())
                    .get(MainViewModel.class);
 
            // Set observer on get text method
            mainViewModel.getText().observe(getActivity(), new Observer<String>() {
                @Override
                public void onChanged(String s) {
                    // When text change
                    // set result text on text view
                    tvResult.setText(s);
                }
            });
        }
 
        // return view
        return view;
    }
}

Vaya a aplicación > nueva > Clase Java. Nómbrelo como MainViewModel y use el siguiente código en el archivo MainViewModel.java .

package com.example.jetpacklivedata;
 
import androidx.lifecycle.MutableLiveData;
import androidx.lifecycle.ViewModel;
 
public class MainViewModel extends ViewModel {
 
    // Initialize variable
    MutableLiveData<String> mutableLiveData
        = new MutableLiveData<>();
 
    // Create set text method
    public void setText(String s)
    {
        // Set value
        mutableLiveData.setValue(s);
    }
 
    // Create get text method
    public MutableLiveData<String> getText()
    {
        // return value
        return mutableLiveData;
    }
}

Aquí está el resultado final de nuestra aplicación.

Producción: