Surviving w/ Android - Step by Step guide aboutAndroid and Internet of things

Develop Android App And Internet Of Things Projects With Step By Step Tutorial, Tips And In-DepthCode Description.

Topics covered

Android data binding

How to use @Bindable

data binder

Android Data Binding TutorialBy Francesco Azzola , August 25, 2015 0 Comments

Android data binding is a way to connect UI layout to the underlying

data model

This post describes one of the most interesting feature inAndroid recently introduced and still in beta version:Android Data Binding. Using data binding, you create alink between the presentation layer (the app UI) and theunderlying data model that holds the information youwant to show. The UI widgets content like TextView,EditText and so on are somehow bound to the data stored in java class. Every time the datachanges the UI widget bound to it is updated, so that you don't have to worry anymoreto update the UI by yourself. If the app does not use Android data binding, it is necessary tofind the view and update the content. At the end of this tutorial, you will create an app like this

!

"

Home About me Contact me Advertise

Setup Android Data BindingAs told before, this feature is still in beta version, so as the first thing let's set the rightdependencies in the top level build.gradle:

by the way, make sure you downloaded gradle 2.4. Now the dependencies are ready and it istime to modify build.gradle in the app:

How To Use Android Data BindingNow that the environment is ready, it is possible to code our Android app. As example, we willcreate a simple weather app that shows the temperature and other information, in this case toshow to data the app will use the data binding. As the first thing, we create the layout, that will be very simple but it will contains someimportant things we should notice:

1234

dependencies { classpath "com.android.tools.build:gradle:1.3.0" classpath "com.android.databinding:dataBinder:1.+"}

1 apply plugin: 'com.android.databinding'

?

?

123456789

1011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071

<layout xmlns:android="http://schemas.android.com/apk/res/android" <data> <variable name="data" type="survivingwithandroid.com.androiddatabinding.model.Data" </data> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:background="@color/primary" android:elevation="4dp" app:theme="@style/ThemeOverlay.AppCompat.Dark"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="10dp" android:layout_below="@id/toolbar" android:text="@{data.city}" android:textSize="18dp" android:id="@+id/weather_icon"/> <ImageView android:layout_width="60dp" android:layout_height="60dp" android:layout_centerInParent="true" android:src="@{data.icon}" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:text="@{data.descr}" android:layout_marginTop="10dp" android:layout_below="@id/weather_icon"/> <GridLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_alignParentBottom="true" android:layout_marginBottom="15dp" android:rowCount="1" android:columnCount="4" android:layout_centerHorizontal="true" android:layout_centerVertical="true"> <TextView android:id="@+id/temp" android:layout_width="60dp" android:layout_height="60dp" android:text="@{data.temp}" android:layout_row="0" android:layout_column="0" android:layout_gravity="center" />

?

As root of the app UI layout there is the layout, and then the variable we want to use in ourlayout are declared (line 3-5). It is important to declare these variables because they will beused in the binding process. At line 4, it is stated that the variable data is the type ofsurvivingwithandroid.com.androiddatabinding.model.Data that contains the data we want toshow. In other world this class is a POJO that is bound the UI. In the TextView widgets, thevalue of each field of the POJO class is bound to the corresponding android:text so the value isshown automatically.

Binding Variable To The ObjectNow the layout is ready and it is possible to bind the class field to the UI widget. In onCreatemethod we get the reference to the current layout of the Activity in a different way compared tothe usual way :

where data is defined as:

72737475767778798081828384858687888990919293949596979899

100101

<TextView android:id="@+id/press" android:layout_width="60dp" android:layout_height="60dp" android:text="@{data.pressure}" android:layout_row="0" android:layout_column="1" android:layout_gravity="center" /> <TextView android:id="@+id/hum" android:layout_width="60dp" android:layout_height="60dp" android:text="@{data.humidity}" android:layout_row="0" android:layout_column="2" android:layout_gravity="center" /> <TextView android:id="@+id/wind" android:layout_width="60dp" android:layout_height="60dp" android:text="@{data.wind}" android:layout_row="0" android:layout_column="3" android:layout_gravity="center" /> </GridLayout></RelativeLayout></layout>

12345678

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //setContentView(R.layout.activity_main); binding = DataBindingUtil.setContentView(this, R.layout.activity_main); binding.setData(data); .... }

?

Notice that at line 5 we set the activity layout and then we resolve the variable used in thelayout. If we run the app in this way, we notice that the UI data is updated only once at thebeginning, when the underlaying class field, bound to the UI, changes the UI does not reflectthe change. This happen because it is necessary create a listener between the UI and the datafield.The first step is that the our POJO Data class extends BaseObservable:

Now it is necessary to bind the single class field to the UI, for example for temperature field:

The @Bindable annotation is used to make a reference between the UI and the field andthe notifyPropertyChanged informs the listener that the underlaying filed ischanged and it is necessary to update the view. Running an example, using the Android databinding the result is:

1 private Data data = new Data(); //survivingwithandroid.com.androiddatabinding.model.Data;

123

public class Data extends BaseObservable { ....}

123456789

10111213

public class Data extends BaseObservable {.. @Bindable public String getTemp() { return temp; } public void setTemp(String temp) { this.temp = temp; notifyPropertyChanged(BR.temp); } ..}

?

?

?

ConclusionAs we have noticed Android data binding is a very interesting and powerful feature and itcan simplify a lot app building. Anyway it is still in beta version and there are some smallproblems: for example even if i tried to update the ImageView using the same way and settingthe resource id it did not work. Is it my mistake?!!

Source code available @github

2190

27

8

283

Google +

0

7

DZone

0

302

Reddit

0

Copyright © 2015 Surviving with android | All Rights Reserved. Design ByTemplateclueTemplateclue

Thank you for printing our content.