Android Kotlin with Data Binding

Android DataBinding with Kotlin

Hey Binding Lovers,

Hope you all are playing well with Data Binding Library. As we know, Data Binding Library offers both flexibility and broad compatibility - it’s a support library, so you can use it with all Android platform versions back to Android 2.1 (API level 7+).

As I have started to learn about Kotlin, I had created sample demo for Hello Kotlin, shared in my previous article Hey Kotlin, Its My First Example.

I thought to bind data in Kotlin using Data Binding Library as I used to with Data Binding.

It will make me feel proud to share with you also. Hope it will helps you.

First of all add plugin kotlin-kapt in app level build.gradle.

apply plugin: 'kotlin-kapt'

Now use following code snippet to configure data binding:

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

Now, Its time to create model class, Here I am creating Data.kt

/**
 * Created by Pratik Butani on 14/06/17.
 */
data class Data(val name: String, val langName: String)

What about layout? May you know about `<layout>` tag.

Data-binding layout files are slightly different and start with a root tag of layout followed by a data element and a view root element.

our layout.xml file looks like:

<?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="item"
            type="com.pratikbutani.kotlin.Data" />
    </data>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.pratikbutani.kotlin.MainActivity">

        <TextView
            android:id="@+id/textViewName"
            style="@style/Base.TextAppearance.AppCompat.Large"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{String.format(@string/string_hey_title, item.name)}"
            tools:text="@string/string_hey_title" />

        <TextView
            android:id="@+id/textViewLanguage"
            style="@style/Base.TextAppearance.AppCompat.Large"
            android:text="@{String.format(@string/welcome_to_kotlin_world, item.langName)}"
            tools:text="@string/welcome_to_kotlin_world" />
    </RelativeLayout>
</layout>

Note: I used formatted string instead of simple string. You can use `@{user.firstName}` for simple string.

Your MainActivity.kt looks like this:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        /**
         * Binding layout file
         */
        val binding: ActivityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        setSupportActionBar(binding.toolbar)

        /**
         * Creating Object of Data class
         */
        val data = Data("Pratik", "Kotlin")

        // Setting Variables and their values.
        binding.setVariable(BR.item, data)
        binding.executePendingBindings()
    }
}

What will be the output?

You can download this project from github.

Hope it will be helpful.

If you like this article, appreciate by click on ❤ below.

Happy Coding.