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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
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.
1 2 3 4 5 6 7 8 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?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> |
Step 4 : Finally in your activity class set view with DataBindingUtils.
1 2 3 4 5 6 7 8 9 10 |
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.
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.
Latest posts by Ravi Rupareliya (see all)
- Dialogflow Entities With Actions on Google - May 7, 2020
- Actions on Google Using Cloud Functions - February 3, 2020
- Create WhatsApp Stickers Android Application - April 19, 2019