Image Loading With DataBinding in Android

We have already seen DataBinding Basics and setting fonts through DataBinding in previous tutorials. Today we will take a look at Image loading with databinding .

Step 1 : Define POJO/Model class

public class PersonModelClass
{
    String name,designation,image_url;

    public PersonModelClass(String name, String designation, String image_url) {
        this.name = name;
        this.designation = designation;
        this.image_url = image_url;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDesignation() {
        return designation;
    }

    public void setDesignation(String designation) {
        this.designation = designation;
    }

    public String getImage_url() {
        return image_url;
    }

    public void setImage_url(String image_url) {
        this.image_url = image_url;
    }
}

public class PersonModelClass

{

String name,designation,image_url;

public PersonModelClass(String name, String designation, String image_url) {

this.name = name;

this.designation = designation;

this.image_url = image_url;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getDesignation() {

return designation;

}

public void setDesignation(String designation) {

this.designation = designation;

}

public String getImage_url() {

return image_url;

}

public void setImage_url(String image_url) {

this.image_url = image_url;

}

Step 2 : Define custom binding class.

public class CustomBindingAdapter
{
    @BindingAdapter({"bind:image_url"})
    public static void loadImage(ImageView imageView,String url)
    {
        Picasso.with(imageView.getContext()).load(url).resize(200,200).into(imageView);
    }
}

public class CustomBindingAdapter

{

@BindingAdapter({"bind:image_url"})

public static void loadImage(ImageView imageView,String url)

{

Picasso.with(imageView.getContext()).load(url).resize(200,200).into(imageView);

}

Here i have used Picasso for image loading, you can replace this code with your own image loader like Glide, UniversaImageLoader etc.

Step 3 : Create layout file and add the new image_url attribute to your ImageView.Custom attributes need to use the app namespace instead of android.

<?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">

    <data>

        <variable
            name="person"
            type="com.androidgig.imageloadingdatabinding.PersonModelClass"></variable>
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:image_url="@{person.image_url}" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{person.name}"
                android:textAppearance="?android:attr/textAppearanceLarge" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{person.designation}" />

        </LinearLayout>
    </LinearLayout>
</layout>

<?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">

<data>

<variable

name="person"

type="com.androidgig.imageloadingdatabinding.PersonModelClass"></variable>

</data>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:orientation="horizontal">

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:image_url="@{person.image_url}" />

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="10dp"

android:orientation="vertical">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@{person.name}"

android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@{person.designation}" />

</LinearLayout>

</layout>

Step 4 : Finally in your activity class set view with DataBindingUtils.

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityMainBinding binding= DataBindingUtil.setContentView(this,R.layout.activity_main);
        PersonModelClass model=new PersonModelClass("Ravi Rupareliya","Android Developer","https://pbs.twimg.com/profile_images/446522135721164800/pdVA44as.jpeg");
        binding.setPerson(model);
    }
}

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

ActivityMainBinding binding= DataBindingUtil.setContentView(this,R.layout.activity_main);

PersonModelClass model=new PersonModelClass("Ravi Rupareliya","Android Developer","https://pbs.twimg.com/profile_images/446522135721164800/pdVA44as.jpeg");

binding.setPerson(model);

}

Here it is, you are done with image loading from url.

Author
Recent Posts

Follow me

Ravi Rupareliya

He is author of Android Gig. He loves to explore new technologies and have worked on Android, React Native, Action on Google and Flutter.

Image Loading With DataBinding in Android

Step 1 : Define POJO/Model class

Step 2 : Define custom binding class.

Step 3 : Create layout file and add the new image_url attribute to your ImageView.Custom attributes need to use the app namespace instead of android.

Step 4 : Finally in your activity class set view with DataBindingUtils.

Ravi Rupareliya

Latest posts by Ravi Rupareliya (see all)