Data Binding in Android: Getting Started

Mar 16 2020 , Kotlin 1.3, Android 10.0, Android Studio 3.5 Kotlin 1.3, Android 10.0, Android Studio 3.5

In this Android Data Binding tutorial, you’ll learn how to link UI components to data in your app using a declarative format. By Evana Margain Puig.

4.9 (21) · 1 Review

Download materials
Save for later
Share
You are currently viewing page 3 of 3 of this article. Click here to view the first page.
Contents

Contents

Hide contents

Data Binding in Android: Getting Started

20 mins

Value Binding

Value Binding refers to the creation of variables for binding classes. With them, when anything changes in your Kotlin code, layouts automatically update as if they were directly observing the results of the code. There are two ways to update values: layout variables and layout expressions.

Layout Variables

Variables within the data tags you added at the top of the layout files describe a property within a data binding layout. If you aren’t sure which are the data tags, open any of the three layout files you modified at the beginning of this tutorial. Here’s a screenshot to help you spot them:

Code with data tags highlighted.

Layout Expressions

You can also write expressions through the so-called expression language. You can handle events in views and update or format the data accordingly.

Note: According to Android’s documentation, layout expressions should be small and simple because they can’t be unit tested and have limited IDE support. Instead, Android recommends using binding adapters. You won’t work with binding adapters in this tutorial; it’s a larger topic that could be its own tutorial.

Now that you’ve learned you can add values between the data tags in your layouts, you can see why the labels in your app stopped working. You’ll fix that next.

Binding Values in Activities

Go to activity_grocery_list.xml and locate your data tags at the top of the file. Add the following code between the data tags:

<variable name="totalAmount" type="String" />

By adding this variable, your Kotlin code now knows what value to observe for the total amount label that disappeared previously.

Locate a TODO at the bottom of the file. Notice android:text="" is empty. Between the quotes, reference the created variable:

android:text="@{totalAmount}"

With this reference, you let the layout know where to place the value of totalAmount.

Next, head back to GroceryListActivity and uncomment the following line:

binding.totalAmount = viewModel.getTotal().toString()

This tells the data binding object to locate the totalAmount you created in the layout and update it with the value returned from the getTotal method in the viewModel.

Find the other commented line and remove the comment so the totalAmount value gets assigned. It should look as follows:

binding.totalAmount = String.format("%.2f", viewModel.getTotal())

The code here also locates totalAmount and formats it to display up to two decimal points.

Build and run. Add an item and notice the total amount is there. Great start, but you still have to get the list labels back. Meanwhile, your app should look like this:

Grocery list screen with total label at the bottom of the screen.

Binding Values in Adapters

The steps for the adapter are similar to the ones in the activity you fixed. The same would be true for any other layout file, for example, a fragment.

First, open grocery_list_item.xml and locate the data tag at the top. Add these variables there:

<variable name="itemName" type="String"/>
<variable name="price" type="String" />

The first references the name of the item you added to your list, like bread or cheese. The second references the unit price, which is a number like 10 or 200.

Now, place the corresponding variables in the text attributes. You can locate them easily because they have TODO comments before them. For the item name, add this code:

android:text="@{itemName}"

The code above references the variable content you created in the data tags.

Do the same for the price:

android:text="@{price}"

In this case, you reference the value of the price variable from the data tags.

Open GroceryAdapter and locate the commented code. In this case, there is no need to change it, so remove the comment. Now it works!

Build and run. Your app is fully functional now!

Play around with it and ensure everything works as expected. As you can see in the screenshot, the user changed their mind about using jam in their sandwiches and switched it to ham. That’s why having an Edit button is handy.

Congratulations on getting here!

Compete grocery list with items, prices and list total.

Where to Go From Here?

Download the completed project files by clicking the Download Materials button at the top or bottom of this tutorial.

Congratulations on converting an existing app to use a more safe, modern approach to app development in Android using data binding.

If you want to learn more on this topic, take a look at:

If you have any suggestions, questions or if you want to show off what you did to improve this project, join the discussion below.