Data Binding in android fragments with Kotlin

In this quick snippet, we will develop code that can be used to quickly set up the data binding feature into the fragment class you may be using in android with Kotlin.

Step 1- First of all, remember to add/enable the data binding into your android app project, for this open the build.gradle file inside the app module and update it — like below,

android {
    compileSdkVersion 30
    buildToolsVersion "30.0.1"
    dataBinding {
        enabled true
    }
  //your other application configurations goes below...

Step 2- Open the layout file of your fragment class — say for example — fragment_food_list.xml. This layout holds the code of your fragment class, and we need to “enclose” all the layout inside this file with <layout> tag,

<layout
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <EditText
            android:id="@+id/edit_food_name"
            android:layout_width="271dp"
            android:layout_height="54dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="32dp"
            android:gravity="center_horizontal|center_vertical"
            android:hint="Enter food name here..."
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/image_add_food"
            android:layout_width="67dp"
            android:layout_height="52dp"
            android:layout_marginStart="40dp"
            android:layout_marginTop="32dp"
            android:src="@drawable/ic_add_black_24dp"
            app:layout_constraintStart_toEndOf="@+id/edit_food_name"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

As you can see above, the <layout> tag will help us generate Binding class which we can later use in the Fragment class’s Kotlin code. Focus on the 2 IDs of the 2 UI views (Button and Image ) — they will come into picture later.

I am using 2 sample android widgets here for illustration but the concept explained here can be used for any complex UI View hierarchy

Step 3- Inside your Fragment class, typically in the onCreateView() method, you need to “inflate” the view. Below is the sample code,

override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {
    val binding = FragmentFoodListBinding.inflate(layoutInflater, container, false)
    binding.imageAddFood.setOnClickListener {
        println("The CLICK###")
    }
    return binding.root
}

FragmentFoodListBinding class is “generated” class for you by the data binding library. This is the “glue” that will allow your Fragment class’s code in Kotlin to access the views which are part of your xml layout file.

Next, the binding variable can now access the imageAddFood — which is nothing but the ID of the image declared inside the XML file.

Yes, no need of findViewByID — because we are using data binding here and that tool is helping us locating all the views inside our layout.

The last line return binding.root is very important — this ensures that all the clicks/events of your view correctly works when app is running.

Conclusion : Use of data binding in fragment is relatively straight forward but these things are not all that well documented in 1 place — hopefully this snippet will help someone if they are planning to use data binding + fragment