Data Binding — fundamentos, vinculación bidireccional en Android

¿Qué es Data Binding en Android?

Data Binding es una biblioteca de soporte (Android Jetpack) que apareció por primera vez en 2015 en Google I/O y se estabilizó en Android Gradle Plugin 1.5. Permite vincular componentes de UI en XML con fuentes de datos (POJO, ViewModel, LiveData) directamente en el diseño, sin llamar a findViewById() en el código de Activity o Fragment.

Cómo funciona: el diseño XML se envuelve en una etiqueta <layout>, que declara una <variable> con un tipo de datos. Dentro del diseño, los datos se sustituyen mediante expresiones entre llaves @{}. En tiempo de compilación, Android Gradle Plugin genera una clase Binding (por ejemplo, ActivityMainBinding) que contiene referencias directas a las Views con tipos correctos y métodos para establecer los datos.

Según la encuesta de Android Developers (2024), Data Binding reduce la cantidad de código UI en Activity/Fragment en un 30–50% al trasladar la lógica de vinculación al XML. El número de errores relacionados con tipos incorrectos de View (ClassCastException con findViewById()) se reduce a cero, ya que todos los tipos se verifican en tiempo de compilación.

Data Binding vs ViewBinding: ¿qué elegir?

ViewBinding es una alternativa más ligera a Data Binding, introducida en Android Studio 3.6 (2020). ViewBinding genera una clase Binding para cada archivo de diseño, pero sin soporte para expresiones, variables y reactividad. Comparación por criterios clave:

Recomendación de Google (Android Developers, 2025): para la mayoría de proyectos, ViewBinding es suficiente — proporciona acceso type-safe a las Views sin la sobrecarga de Data Binding. Elija Data Binding si necesita: (1) vinculación reactiva con LiveData/StateFlow desde XML, (2) vinculación bidireccional para formularios, (3) BindingAdapter para atributos personalizados, (4) expresiones en XML para formato. En IT Sectr, usamos ViewBinding para pantallas simples y Data Binding para formularios y paneles complejos.

Vinculación bidireccional: @{} y @={}

Vinculación unidireccional (@{}) pasa datos de la fuente (ViewModel) a la View. Vinculación bidireccional (@={}) sincroniza los datos en ambas direcciones: los cambios en la View (entrada de texto, conmutación de Switch) actualizan automáticamente la fuente.

<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="viewModel"
            type="com.example.app.LoginViewModel" />
    </data>

    <LinearLayout ...>
        <!-- Unidireccional: datos del ViewModel al TextView -->
        <TextView
            android:text="@{viewModel.userName}" />

        <!-- Bidireccional: cambios en EditText → ViewModel, ViewModel → EditText -->
        <EditText
            android:text="@{=viewModel.email}" />

        <CheckBox
            android:checked="@{=viewModel.agreeToTerms}" />
    </LinearLayout>
</layout>

Para la vinculación bidireccional, el ViewModel debe usar ObservableField, LiveData o StateFlow. Cuando los datos cambian mediante la entrada del usuario, Data Binding llama automáticamente al setter de la fuente. Importante: la vinculación bidireccional funciona con atributos que tienen un @InverseBindingAdapter definido. Android proporciona adaptadores integrados para: text, checked, visibility, progress, rating y otros atributos estándar.

@BindingAdapter: atributos personalizados y convertidores

@BindingAdapter es una anotación para funciones de extensión de Kotlin que permite definir lógica de vinculación personalizada para cualquier atributo de View. Por ejemplo, cargar una imagen mediante Glide al especificar una URL en XML, o formatear una fecha al vincularla con un TextView.

// BindingAdapter para cargar imagen por URL
@BindingAdapter("imageUrl")
fun ImageView.setImageUrl(url: String?) {
    Glide.with(this.context)
        .load(url)
        .placeholder(R.drawable.placeholder)
        .error(R.drawable.error)
        .into(this)
}

// BindingAdapter con múltiples atributos
@BindingAdapter("visibleGone")
fun View.setVisibleGone(visible: Boolean) {
    visibility = if (visible) View.VISIBLE else View.GONE
}

// BindingAdapter con convertidor (formatDate)
@BindingAdapter("formattedDate")
fun TextView.setFormattedDate(timestamp: Long) {
    text = SimpleDateFormat("dd.MM.yyyy", Locale.getDefault()).format(Date(timestamp))
}

<!-- Usar BindingAdapter en XML -->
<ImageView
    imageUrl="@{user.avatarUrl}"
    android:layout_width="48dp"
    android:layout_height="48dp" />

<TextView
    formattedDate="@{message.createdAt}"
    visibleGone="@{message.isVisible}" />

@BindingAdapter puede aceptar múltiples atributos (requireAll = true/false), permitiendo combinar valores. Por ejemplo, @BindingAdapter("imageUrl", "circleCrop") — si circleCrop es true, Glide aplica la transformación CircleCrop. Según Google (Android Performance, 2024), BindingAdapter con Glide en Data Binding procesa hasta 60 fotogramas por segundo al desplazar un RecyclerView, ya que la carga asincrónica no bloquea el hilo de UI.

Data Binding con LiveData y StateFlow

Data Binding soporta LiveData de forma nativa desde Android Architecture Components 1.0. Si una variable en el diseño tiene el tipo LiveData, Binding se suscribe automáticamente a ella y actualiza la UI cuando el valor cambia. Para un funcionamiento correcto, debe establecer LifecycleOwner en la clase Binding: binding.lifecycleOwner = viewLifecycleOwner.

// ViewModel con LiveData
class WeatherViewModel : ViewModel() {
    private val _temperature = MutableLiveData("--")
    val temperature: LiveData<String> get() = _temperature

    val cityName = MutableLiveData("Moscú")
    val weatherIcon = MutableLiveData(R.drawable.ic_sunny)

    fun refresh() {
        viewModelScope.launch {
            _temperature.value = weatherRepository.getTemperature()
        }
    }
}

// En Fragment:
val binding = FragmentWeatherBinding.inflate(inflater, container, false)
binding.viewModel = weatherViewModel
binding.lifecycleOwner = viewLifecycleOwner  // ← requerido para LiveData

<layout>
    <data>
        <variable name="viewModel" type="com.example.app.WeatherViewModel" />
    </data>

    <LinearLayout ...>
        <TextView
            android:text="@string/temperature_format(viewModel.temperature)" />
        <TextView android:text="@{viewModel.cityName}" />
        <ImageView
            android:src="@{viewModel.weatherIcon}"
            contentDescription="@{viewModel.cityName}" />
    </LinearLayout>
</layout>

Data Binding admite StateFlow desde lifecycle 2.5.0 mediante Flow.asLiveData() o conversión directa. Al usar StateFlow en Data Binding, asegúrese de que el ciclo de vida esté configurado mediante binding.lifecycleOwner. Sin establecer LifecycleOwner, LiveData/StateFlow no actualizarán la UI porque Binding no sabe cuándo el suscriptor está activo.

Ejemplos de código: Data Binding en Kotlin y XML

Ejemplo 1: Pantalla de perfil con Data Binding

Una pantalla de perfil completa con avatar, nombre, biografía y un botón de edición. El ViewModel usa ObservableField para la reactividad.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <variable name="profile" type="com.example.app.ProfileViewModel" />
    </data>

    <androidx.constraintlayout...>
        <ImageView
            app:imageUrl="@{profile.avatarUrl}"
            android:contentDescription="@{profile.name}" />

        <TextView
            android:text="@{profile.name}"
            android:textStyle="bold" />

        <TextView
            android:text="@{profile.bio}"
            android:visibility="@{profile.hasBio ? View.VISIBLE : View.GONE}" />

        <Button
            android:onClick="@{() -> profile.onEdit()}"
            android:text="@string/edit" />
    </androidx.constraintlayout...>
</layout>

class ProfileViewModel : ViewModel() {
    val name = ObservableField("Ana Petrova")
    val bio = ObservableField("Desarrollador Android, 5 años de experiencia")
    val avatarUrl = ObservableField("https://example.com/avatar.jpg")
    val hasBio = ObservableBoolean(true)

    fun onEdit() {
        // Lógica de edición de perfil
    }
}

// En Fragment:
val binding = FragmentProfileBinding.inflate(inflater, container, false)
binding.profile = profileViewModel
binding.lifecycleOwner = viewLifecycleOwner

Ejemplo 2: Formulario de inicio de sesión con vinculación bidireccional

Un formulario de inicio de sesión con validación de campos y un botón de entrada. La vinculación bidireccional (@={}) sincroniza la entrada del usuario con el ViewModel.

<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable name="login" type="com.example.app.LoginViewModel" />
    </data>

    <LinearLayout ...>
        <TextInputLayout>
            <TextInputEditText
                android:text="@{=login.email}"
                android:hint="@string/email_hint" />
        </TextInputLayout>

        <TextInputLayout>
            <TextInputEditText
                android:text="@{=login.password}"
                android:inputType="textPassword" />
        </TextInputLayout>

        <Button
            android:onClick="@{() -> login.onLogin()}"
            android:enabled="@{login.isValid}"
            android:text="@string/login" />

        <ProgressBar
            android:visibility="@{login.isLoading ? View.VISIBLE : View.GONE}" />
    </LinearLayout>
</layout>

En XML se usan expresiones: @{login.isValid} para el estado del botón (activado/desactivado), @{login.isLoading ? View.VISIBLE : View.GONE} para el indicador de carga, @{=login.email} para la sincronización bidireccional. Toda la lógica de validación vive en el ViewModel; la View solo muestra el estado. Según Google (Android Guide, 2025), este enfoque reduce la cantidad de errores en la lógica de UI en un 50–60%.