Data Binding Example

Data Binding in Android.

Android Data Binding is a powerful library that allows developers to bind UI elements in an application to data sources. This means that the data is automatically updated when the data source changes. This makes it easier for developers to manage the UI and data flow in a more efficient manner. In this article, we will discuss how to use Data Binding in Android.

Setting up Data Binding

To enable Data Binding in your application, you need to add the following code to your app's build.gradle file:

android {
    ...
    dataBinding {
        enabled = true
    }
}

Creating a Data Binding layout

To use Data Binding in your layout, you need to create a Data Binding layout. This is done by wrapping your layout in the <layout> tag. For example:

<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        ...
    </LinearLayout>
</layout>

Binding data to a View

To bind data to a View, you need to create a binding object that represents the layout. This is done using the DataBindingUtil class. For example:

val binding: MainBinding = DataBindingUtil.setContentView(this, R.layout.main)

In this example, we are using DataBindingUtil.setContentView() to inflate the layout and create a binding object. The MainBinding class is generated automatically by the Data Binding library based on the name of the layout file.

Once you have the binding object, you can access any View in the layout using the findViewById() method. For example:

binding.textView.text = "Hello World"

In this example, we are setting the text of a TextView in the layout.

Binding data to a data object

To bind data to a data object, you need to create a data class that represents the data. For example:

data class User(val name: String, val age: Int)

Once you have the data class, you can create an instance of it and set it as the data object for the binding. For example:

val user = User("John Doe", 30)
binding.user = user

In this example, we are setting the user object as the data object for the binding. Once the data object is set, any View in the layout can access its properties using the binding object. For example:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@{user.name}" />

In this example, we are binding the name property of the user object to the text of a TextView.

Binding data to a list

To bind data to a list, you need to create an ObservableList that represents the list. For example:

val users = ObservableArrayList<User>()
users.add(User("John Doe", 30))
users.add(User("Jane Doe", 25))
binding.users = users

In this example, we are setting the users list as the data object for the binding. Once the data object is set, any View in the layout can access its properties using the binding object. For example:

<RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:users="@{users}" />

In this example, we are binding the users list to a RecyclerView using the app:users attribute.

More Examples

Step 1: Create Project

Start by creating an empty Android Studio project.

Step 2: Dependencies

No external library is needed for this project. However we need to enable data binding as follows:

1. Go to your app/build.gradle.
2. Go inside the android{} closure and enable data binding by adding the following code:

android {
    compileSdkVersion compileSdkVer
    defaultConfig {
        applicationId "com.developers.databinding"
        minSdkVersion minSdkVer
        targetSdkVersion targetSdkVer
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }

    //add the following
    dataBinding {
        enabled = true
    }

Step 3: Design Layout

Design layout as follows:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

        <variable
            name="user"
            type="com.developers.databinding.User"/>
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.name}"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:layout_margin="5dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{String.valueOf(user.age)}"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:layout_margin="5dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.email}"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:layout_margin="5dp" />

    </LinearLayout>

</layout>

Step :4 Create Data class

User.kt

data class User(val name: String, val age: Int, val email: String)

Step : Bind data

MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import com.developers.databinding.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding: ActivityMainBinding = DataBindingUtil
                .setContentView(this, R.layout.activity_main)
        val user = User("Amanjeet Singh", 21, "amanjeetsingh150@gmail.com")
        binding.setVariable(BR.user, user)
    }
}

Run

Copy the code or download it in the link below, build and run.

Reference

Here are the reference links:

Number	Link
1.	Download Example
2.	Follow code author
3.	Code: Apache 2.0 License

Conclusion

Data Binding is a powerful library that allows developers to bind UI elements in an application to data sources. In this article, we discussed how to use Data Binding in Android and provided code examples in Kotlin. By using Data Binding, developers can manage the UI and data flow in a more efficient manner, making it easier to create high-quality Android applications.