How to load remote svg files with Picasso library

Question

I'm building an android app that requires downloading svg images from a server. I have tried using Picasso the usual way but it displays nothing.

Picasso.get().load(url).into(imageView)

Is there anyway to display vector images with Picasso?

Answer 1

You can use a library called GlideToVectorYou which uses Glide internally.

fun ImageView.loadSvg(url: String?) {
    GlideToVectorYou
        .init()
        .with(this.context)
        .setPlaceHolder(R.drawable.loading, R.drawable.actual)
        .load(Uri.parse(url), this)
}

or You can also use Coil library to load svg. Just add these lines in build.gradle

// ... Coil (https://github.com/coil-kt/coil)
implementation("io.coil-kt:coil:0.12.0")
implementation("io.coil-kt:coil-svg:0.12.0")

Then Add an extension function

fun AppCompatImageView.loadSvg(url: String) {
    val imageLoader = ImageLoader.Builder(this.context)
        .componentRegistry { add(SvgDecoder(this@loadSvg.context)) }
        .build()

    val request = ImageRequest.Builder(this.context)
        .crossfade(true)
        .crossfade(500)
        .data(url)
        .target(this)
        .build()

    imageLoader.enqueue(request)
}

Then call this method in your activity or fragment

your_image_view.loadSvg("your_file_name.svg")

Answer 2

use coil in kotlin for handle svg files

first add

// Coil
implementation "io.coil-kt:coil-compose:1.3.2"
implementation "io.coil-kt:coil-svg:1.3.2"

then use

fun ImageView.loadImage(imageUri: String, placeholder: Int? = null) {

val imageLoader = ImageLoader.Builder(this.context)
    .componentRegistry { add(SvgDecoder(this@loadImage.context)) }
    .build()

load(uri = imageUri, imageLoader = imageLoader) {
           crossfade(true)
           placeholder(placeholder ?: R.drawable.image_avatar)
       }
   }

Answer 3

My advice, try to move to Glide library. Under hood, lib could load svg and much more things. Here is an examples.