Introduction to DataBinding -2

In the last Blog we talked about, What is DataBinding and How to Implement it in our Android Project? If you don't know the answer to these 2 questions then I recommend you to have a look at Introduction to DataBinding , this is going to be a 5 min read.

Ok now, Let's move to the next step. In this blog we are going to set some data to our widgets(TextView), using DataBinding.

We will create a details screen of a student, we will show Student's name, age, standard, photo and blood group. So I have created a Student Class 

	package com.example.databindingintroduction;
	import android.databinding.BindingAdapter;
	import android.support.v4.content.ContextCompat;
	import android.view.View;
	import android.widget.ImageView;
	public class Student {
	private String name, standard,bloodGroup;
	private int age, photo;
	public Student(String name,int age, String standard, String bloodGroup, int photo){
	this.name = name;
	this.age = age;
	this.standard = standard;
	this.bloodGroup = bloodGroup;
	this.photo = photo;
	}
	public String getName() {
	return name;
	}
	public int getAge() {
	return age;
	}
	public String getStandard() {
	return standard;
	}
	public String getBloodGroup() {
	return bloodGroup;
	}
	public int getPhoto() {
	return photo;
	}
	@BindingAdapter("android:loadImage")
	public static void loadImage(ImageView view, int image){
	view.setImageResource(image);
	}
	}

view raw Student.java hosted with ❤ by GitHub

Our layout activity_main.xml will look like this :

	<?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"
	tools:context=".MainActivity">
	<data>
	<variable
	name="student"
	type="com.example.databindingintroduction.Student" />
	</data>
	<RelativeLayout
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	<ImageView
	android:id="@+id/photo"
	android:layout_width="100dp"
	android:layout_height="100dp"
	android:layout_marginTop="20dp"
	android:loadImage="@{student.photo}"
	android:layout_centerHorizontal="true"/>
	<TextView
	android:id="@+id/name"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:hint="Name"
	android:textColor="@android:color/black"
	android:textSize="18sp"
	android:text="@{student.name}"
	android:layout_marginTop="20dp"
	android:layout_centerHorizontal="true"
	android:layout_below="@id/photo"/>
	<TextView
	android:id="@+id/age"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:hint="Age"
	android:textColor="@android:color/black"
	android:textSize="18sp"
	android:text="@{String.valueOf(student.age)}"
	android:layout_below="@id/name"
	android:layout_centerHorizontal="true"
	android:layout_marginTop="15dp"/>
	<TextView
	android:id="@+id/standard"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_below="@id/age"
	android:textAlignment="center"
	android:layout_centerHorizontal="true"
	android:layout_marginTop="15dp"
	android:hint="Standard"
	android:text="@{student.standard }"
	android:textColor="@android:color/black"
	android:textSize="18sp" />
	<TextView
	android:id="@+id/blood_group"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:hint="Blood Group"
	android:text="@{student.bloodGroup }"
	android:textColor="@android:color/black"
	android:textSize="18sp"
	android:textAlignment="center"
	android:layout_below="@id/standard"
	android:layout_centerHorizontal="true"
	android:layout_marginTop="15dp"/>
	<Button
	android:id="@+id/showDetails"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_below="@id/blood_group"
	android:layout_centerHorizontal="true"
	android:layout_marginTop="50dp"
	android:textAllCaps="false"
	android:text="Show Details"/>
	</RelativeLayout>
	</layout>

view raw activity_main.xml hosted with ❤ by GitHub

If you notice in our xml, this does not look like a regular xml.

	<data>
	<variable
	name="student"
	type="com.example.databindingintroduction.Student" />
	</data>

view raw data.xml hosted with ❤ by GitHub

To use our Object class we create a variable of object class under <variable> tag.

android:text="@{student.name}"
If you see the [student.name], this works like name.setText(student.getName()). This is a nice and neat way of doing in DataBinding and it avoids memory leaks and null pointer  exception and runtime.

We are done here in our layout file. Let's move to our MainActivity Class.

	public class MainActivity extends AppCompatActivity {
	ActivityMainBinding binding;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	binding = DataBindingUtil.setContentView(this,R.layout.activity_main);
	//setContentView(R.layout.activity_main);
	binding.showDetails.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	Student student = new Student("Aayush",12,"6th","B+",R.drawable.fido);
	binding.setStudent(student);
	}
	});
	}
	}

view raw ActivityMain.java hosted with ❤ by GitHub

Here we have created our layout using Databinding object. 

Using our databinding object, setting the clickListener at the button. Well, the is another way to do so in databinding but we will discuss this further.

So in our click function, we are creating a new Object of our Student Class and passing the value to the constructor and setting these object to our binding variable and DataBinding will take care of the rest.

Note: Here our setStudent() is the setter method of our variable that we have declared in our xml inside <variable> tag. If variable name changes then its setter method name will also change accordingly.
  
Finally let's talk about, how to get a set image using DataBinding in android. This works a little different than setText().

Here we are gonna use annotation processing or in our word we are gonna use databinding property and create our own custom attribute to set Image. 

If you see our Student Class,
 @BindingAdapter("android:loadImage"

public static void loadImage(ImageView view, int image){

view.setImageResource(image);

}
here we are passing the two argument the image and the view. Here the image is a student's image and the view is our imageview widget and use this as attribute in our <ImageView> xml.

That's it.....

In this discussion, we have learnt how to bind our object and set the values using DataBinding.

There is so much more in DataBinding and we will talk about that further till then 

Keep Learning,  Keep Coding... 😄😄!!