In the previous post, you've learned some basic features of Data Binding Library - a mechanism to make a bridge between Presentation layer and Model layer. Today, we will take a look at Image loading with data binding. I will use Picasso - a powerful library to load Bitmap from an url.
In order to understanding this post, you should take a glance to:
Define a POJO class extended from
Create a class called
Your main activity layout is look like this:
There is nothing special in activity Java code, binding some "default data" like previous project and after click the
Before running app, make sure you provide Internet permission in AndroidManifest.xml for your app because it load data (bitmap) from an url:
Through this post, I hope that you've learned an another features of data binding library: loading online data by combining wit Picasso. You also can try with another libraries like UniversalImageLoader, Glide,... Finally, you can take my project from @Github.
Read more:
In order to understanding this post, you should take a glance to:
- My previous post about "Getting Started with Data Binding" to understand how to integrate Data Binding library and how to use it in layout file.
- My previous post about Picasso to learn how to use this library in your project.
apply plugin: 'com.android.application'
android {
compileSdkVersion 24
buildToolsVersion "24.0.2"
defaultConfig {
applicationId "info.devexchanges.picassodatabinding"
minSdkVersion 14
targetSdkVersion 24
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
dataBinding {
enabled = true
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:24.2.0'
compile 'com.squareup.picasso:picasso:2.5.2'
}
ImageView after click a Button.
Create a POJO class
BaseObservable like previous project with some variables and getters/setters:
Cat.java
When dealing with third party libraries along with Data Binding, we require binding between those libraries. So we will create a class which first bind package info.devexchanges.picassodatabinding;
import android.databinding.BaseObservable;
import android.databinding.Bindable;
public class Cat extends BaseObservable {
private String name;
private String imageUrl;
public Cat(String name, String imageUrl) {
this.name = name;
this.imageUrl = imageUrl;
}
@Bindable
public String getName() {
return name;
}
@Bindable
public void setName(String name) {
this.name = name;
notifyPropertyChanged(info.devexchanges.picassodatabinding.BR.name);
}
@Bindable
public String getImageUrl() {
return imageUrl;
}
@Bindable
public void setImageUrl(String imageUrl) {
this.imageUrl = imageUrl;
notifyPropertyChanged(info.devexchanges.picassodatabinding.BR.imageUrl);
}
}
ImageView with Picasso and ImageView with Data Binding.Create a class called
ImageBindingAdapter and put this code:
ImageBindingAdapter.java
Here if you noticed, we used package info.devexchanges.picassodatabinding;
import android.databinding.BindingAdapter;
import android.widget.ImageView;
import com.squareup.picasso.Picasso;
public class ImageBindingAdapter {
@BindingAdapter({"bind:imageUrl"})
public static void loadImage(ImageView imageView, String url) {
if (!url.equals("")) {
Picasso.with(imageView.getContext()).load(url).resize(200, 200).into(imageView);
}
}
}
@BindingAdapter({"bind:imageUrl"}). This code tells Data Binding library that this is custom setter which you can get in layout with property tag named imageUrl. Lets use that imageUrl in our layout file.
Defining activity layout (XML) file
activity_main.xml
As you can see, provide which property of your POJO class will be used with <?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>
<import type="android.view.View" />
<variable
name="cat"
type="info.devexchanges.picassodatabinding.Cat" />
<variable
name="handlers"
type="info.devexchanges.picassodatabinding.MainActivity.OnClickHandler" />
</data>
<LinearLayout
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="info.devexchanges.picassodatabinding.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cat Name:" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@{cat.name}" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Cat Image:" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:contentDescription="@null"
app:imageUrl="@{cat.imageUrl}" />
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/activity_horizontal_margin"
android:onClick="@{handlers.onUpdateCat}"
android:text="Load Image" />
</LinearLayout>
</layout>
app:imageUrl of ImageView. In this case it is cat.imageUrl.
Activity programmatically code
Button, TextView will be updated and app will load an image bitmap from the url:
MainActivity.java
package info.devexchanges.picassodatabinding;
import android.databinding.DataBindingUtil;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Toast;
import info.devexchanges.picassodatabinding.databinding.ActivityMainBinding;
public class MainActivity extends AppCompatActivity {
private Cat cat;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
cat = new Cat("Tom", "");
binding.setCat(cat);
OnClickHandler handlers = new OnClickHandler();
binding.setHandlers(handlers);
}
public class OnClickHandler {
public void onUpdateCat(View view) {
cat.setName("Super Tom");
cat.setImageUrl("http://i.imgur.com/6zgawxz.jpg");
Toast.makeText(MainActivity.this, "Cat name updated, loading image...", Toast.LENGTH_SHORT).show();
}
}
}
Running application
<uses-permission android:name="android.permission.INTERNET"/>
Conclusions
Read more:
- Using Data Binding with RecyclerView
