Litho image from remote URL

Question

I am trying to load an image from remote URL into Litho Image widget but Litho widget has "drawable" as the only prop to set image. Have any one tried to set image from remote URL inside Litho Image widget?

Answer 1

If you really want to use Litho, you can download the image, and convert it to a Drawable object.

public static Drawable drawableFromUrl(String url) throws IOException {
    Bitmap b = null;

    HttpURLConnection connection = (HttpURLConnection) new URL(url).openConnection();
    connection.connect();
    InputStream input = connection.getInputStream();

    b = BitmapFactory.decodeStream(input);

    return new BitmapDrawable(b);
}

Note that you need to call this method in a seperate Thread or AsyncTask since this is a network operation.

Answer 2

Litho-Fresco does not have support for remote image. You have to add implementation 'com.facebook.fresco:fresco:1.13.0' alongwith implementation 'com.facebook.litho:litho-fresco:0.31.0' in your gradle. And then you can load remote images by following way :

@LayoutSpec
object MovieComponentSpec {

fun getImageController(imageUrl : String) = Fresco.newDraweeControllerBuilder()
    .setUri(imageUrl)
    .build()


@JvmStatic
@OnCreateLayout
internal fun onCreateLayout(
    c: ComponentContext,
    @Prop title: String,
    @Prop imageUrl: String
): Component {

    return Column.create(c)
        .paddingDip(ALL, 16f)
        .backgroundColor(Color.WHITE)
        .child(
            FrescoImage.create(c).controller(getImageController(imageUrl))
        )
        .child(
            Text.create(c)
                .text(title)
                .textSizeSp(10f)
        )
        .build()
    }

}

Answer 3

You can use a FrescoComponent that will use the Fresco image loading library to download and render the image. In alternative you can use the integration with Glide: https://github.com/pavlospt/litho-glide/tree/master/litho-glide