Cómo implementar ViewBinding en Android paso a paso

Trabajar con vistas en Android ya no será complicado. Hoy te mostraremos cómo usar una herramienta con la que podrás vincular vistas de forma segura y sin tardarte demasiado. Aprenderás a implementar ViewBinding en Android con este paso a paso, para que aproveches todas sus ventajas en tus proyectos.

ViewBinding en Android: La forma fácil de acceder a vistas

ViewBinding puedes interactuar con las vistas de una manera mucho más sencilla y sin errores. Lo que hace es generar automáticamente clases para cada archivo de layout de tu proyecto, eliminando la necesidad de métodos como findViewById. Así, puedes acceder a los elementos de tu interfaz con mayor seguridad y menos código.

Diferencias entre ViewBinding, findViewById y Synthetic

• findViewById: Este método clásico permite acceder a las vistas a través de su ID, pero requiere código repetitivo (boilerplate) y puede generar errores.
• Android Synthetic: Esta opción, basada en kotlinx.android.synthetic, simplificaba el acceso a las vistas, pero introducía problemas de manejo de nulos y ha sido deprecada.
• ViewBinding: Combina lo mejor de ambos métodos anteriores, proporcionando acceso seguro a las vistas sin necesidad de código repetitivo y con menos posibilidades de errores.

Configuración de ViewBinding en Android Studio

Solo debes seguir estos pasos para activar ViewBinding en Android:

1. Abre tu archivo build.gradle del módulo app.
2. Dentro del bloque android, agrega lo siguiente:

buildFeatures {
    viewBinding = true
}

3. Guarda el archivo y sincroniza tu proyecto.

Así ya habilitas ViewBinding y Android Studio generará automáticamente clases de vinculación para cada archivo de layout en tu proyecto.

Cómo usar ViewBinding en una Activity

Vamos a suponer que tienes un archivo de layout llamado activity_main.xml. ViewBinding en Android genera de forma automática una clase ActivityMainBinding. Lo puedes implementar así:

1. Declara una variable de binding en tu MainActivity:

private lateinit var binding: ActivityMainBinding

2. Inicializa esta variable en el método onCreate y ajusta el setContentView:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)
}

3. A partir de aquí, puedes acceder a cualquier vista del layout usando binding. Por ejemplo, si tienes un botón llamado btnHello en el layout, lo puedes utilizar así:

binding.btnHello.setOnClickListener {
    Toast.makeText(this, "Hola desde ViewBinding!", Toast.LENGTH_SHORT).show()
}

Cómo usar ViewBinding en un Fragment

Ten en cuenta que la implementación de ViewBinding en Android para Fragments tiene algunas diferencias, ya que se debe liberar la referencia de binding cuando se destruye la vista.

1. Declara una variable de binding en el fragment:

private var _binding: FragmentExampleBinding? = null
private val binding get() = _binding!!

2. Inicializa la variable en el método onCreateView:

override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {
    _binding = FragmentExampleBinding.inflate(inflater, container, false)
    return binding.root
}

3. Utiliza el binding en onViewCreated para interactuar con las vistas:

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    binding.btnFragment.setOnClickListener {
        Toast.makeText(activity, "Click en el Fragment!", Toast.LENGTH_SHORT).show()
    }
}

4. Libera el binding en onDestroyView para evitar problemas de memoria:

override fun onDestroyView() {
    super.onDestroyView()
    _binding = null
}

Cómo usar ViewBinding en un RecyclerView Adapter

Para implementar ViewBinding en Android en un RecyclerView.Adapter, haremos que el ViewHolder maneje el binding del layout de cada elemento.

1. Crea un archivo de layout para los elementos del RecyclerView, como item_example.xml.
2. En tu Adapter, utiliza ItemExampleBinding dentro del ViewHolder:

class ExampleAdapter(private val items: List<String>) : RecyclerView.Adapter<ExampleAdapter.ViewHolder>() {

    inner class ViewHolder(val binding: ItemExampleBinding) : RecyclerView.ViewHolder(binding.root)

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val binding = ItemExampleBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return ViewHolder(binding)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val item = items[position]
        holder.binding.tvItem.text = item
    }

    override fun getItemCount() = items.size
}

En este ejemplo, tvItem es un TextView en item_example.xml. Usando binding, puedes acceder directamente a él en el onBindViewHolder.

Ventajas de usar ViewBinding en Android

Estas son las ventajas de usar ViewBinding :

• Menos errores de NullPointerException: Al eliminar los riesgos de vistas no inicializadas.
• Menos código repetitivo: No necesitas declarar y enlazar cada vista manualmente.
• Más rendimiento y seguridad: Menos margen de error en comparación con findViewById o synthetics.

Ejemplo práctico: Crea una app de contador

Ahora vas a crear una app de contador. La idea es que tengas un TextView que muestre el número actual y un Button para aumentar el contador.

1. Crea un archivo de layout activity_counter.xml con un TextView y un Button:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <TextView
        android:id="@+id/tvCounter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0"
        android:textSize="24sp"/>

    <Button
        android:id="@+id/btnIncrease"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Incrementar"/>

</LinearLayout>

2. En tu CounterActivity, inicializa el binding y configura el botón para aumentar el contador:

class CounterActivity : AppCompatActivity() {

    private lateinit var binding: ActivityCounterBinding
    private var counter = 0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityCounterBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.btnIncrease.setOnClickListener {
            counter++
            binding.tvCounter.text = counter.toString()
        }
    }
}

Te darás cuenta de que cada vez que se presiona el botón, el valor de counter aumenta y se muestra en el TextView tvCounter.

Con ViewBinding en Android logras simplificar tu flujo de trabajo y te conviertes en un desarrollador más eficiente y profesional. Domina otras técnicas avanzadas de desarrollo móvil y construye aplicaciones desde cero en el Bootcamp de Desarrollo de Aplicaciones Móviles iOS & Android de KeepCoding. Tendrás futuro en una industria en crecimiento, con alta demanda y excelentes oportunidades. ¡Inscríbete ahora y prepárate para transformar tu vida y tus habilidades en tecnología!