15 July 2016

Quick tip: Enabling data binding

Say you have a simple layout file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:orientation="vertical">

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

</LinearLayout>
And say you want to finally give data binding a try. So you watch Yigit's I/O talk on data binding and follow the steps on implementation.

You enable it in Gradle:
android {
    dataBinding {
        enabled = true
    }
}

You wrap your existing layout in <layout> tags.
<layout>
      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:orientation="vertical">

        ...

      </LinearLayout>
<layout>

Then life started sucking. Your app won't compile. Well, we can fix it in two easy steps!

Step 1: Add namespace declaration to your root tag:
<layout xmlns:android="http://schemas.android.com/apk/res/android">

This still won't compile! If you look at the logs you will see somewhere there: "Error:(7) Error parsing XML: duplicate attribute"

Step 2: Remove xmlns declaration in the now-non-root layout.

And that's it. Add your variables and happy data binding!


Here's a complete layout file for your perusal:
<layout xmlns:android="http://schemas.android.com/apk/res/android">
      <data>
        <variable
            name="listing"
            type="com.zdominguez.blog.samples.Listing"/>
    </data>

      <LinearLayout 
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:orientation="vertical">

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{listing.address}" />

        <TextView
            android:id="@+id/description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:text="@{listing.agency}" />

      </LinearLayout>
<layout>