How to create custom data binding in android? (android studio)

Question

I want to implement custom functions to download image from ImageView like this app:imageUrl="@{status.imageUrl}" in the below code:

 <?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="status"
          type="com.databinding.data.Status" />

      </data>

      <RelativeLayout
        android:id="@+id/status_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
          android:id="@+id/status_avatar"
          android:layout_width="64dp"
          android:layout_height="64dp"
          android:layout_alignParentLeft="true"
          android:layout_alignParentStart="true"
          android:layout_alignParentTop="true"
          android:contentDescription="@null"
          app:imageUrl="@{status.imageUrl}"/>

      </RelativeLayout>
    </layout>

How to write this function which can download image automate from a @{status.imageUrl} ? Use this library com.android.databinding.

Answer 1

For this work, you need to a lib like android databinding lib.
In this library, first add below scripts to build.gradle of project:

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.5.0'
        classpath 'com.android.databinding:dataBinder:1.0-rc4'
    }
}

And add this codes to top the build.gradle of module file:

apply plugin: 'com.android.databinding'

And create your class for example: class BindingCustom and write this codes:

public class BindingCustom {

    @BindingAdapter({"imageUrl"})
    public static void loadImage(final ImageView view, String url) {

        Picasso.with(view.getContext()).load(url).into(view);

    }
}

In the BindingCustom class you have loadImage method to download image from URL by your interested way, but I use the Picasso library because it's a common lib for this job and you can change it to your codes.

This is a helpful link for more information

Answer 2

below is what i prefer:

first make a custom class extended form image view

import android.annotation.TargetApi;
import android.content.Context;
import android.os.Build;
import android.util.AttributeSet;
import android.widget.ImageView;

public class MyImageView extends ImageView {
    public MyImageView(Context context) {
        super(context);
        downloader(null);
    }

    public MyImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        downloader(attrs);
    }

    public MyImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        downloader(attrs);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public MyImageView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
         downloader(attrs);
    }

    private void downloder(AttributeSet attr){
    // TAKE THE LINK AND DOWNLOAD IMAGE HERE
    }
}

second declare a styleable in your res folder

<declare-styleable name="MyImageView">
    <attr name="imageUrl" format="string"/>
</declare-styleable>

at last lets make our downloader function

private void downloader(AttributeSet attrs) {
    if (attrs!=null) {
        TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.MyImageView);
        String url = a.getString(R.styleable.MyImageView_imageUrl);
        // First check whether we have such a property then
        // DOWNLOAD IT WITH ANY LIBRARY YOU LIKE
        // in this case i used IMAGE LOADER
        if(url!=null)
            ImageLoader.getInstance().displayImage(url,this);
    }
}

now you can easily add the link in your xml

 <com.raianraika.example.MyImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:imageUrl="www.google.com"/>