Load images from network in Jetpack Compose

Introduction

“Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs”. — Android Developers

As we can see nowadays mobile development changes so fast, and many frameworks and tools now available to create an Android application. Now it’s time when frameworks and tools such as SwiftUI, Flutter, Jetpack Compose which use a declarative way of programming growing so fast.

Despite that Jetpack Compose is still in alpha version, it has made a lot if interest and discussion around it. But also it has a lot of bugs and errors at this moment.

If you want to create a news application with Jetpack Compose you will face an issue that there is no ready solution out of the box to load images from the network. And there are no such enough libraries that were written for Jetpack Compose.

So I decided to create a little library which helps to solve this problem.
It has a very simple usage:

Under hood it uses Picasso library to load images and converts it to mutableState and loads to Image.

Let’s look at it closely:

url — Url to your image

contentScale — Scale type of your image (equal to scaleType in ImageView)

modifier — Set layout params such as height, width, padding and etc.

error — the view which will shown if error happens. By default there a Text

loading — the view which showing while image loading. By default there is CircularProgressIndicator

To add this to your project:

Add this to project level build.gradle

allprojects {
    repositories {
        ...
        maven { url 'https://dl.bintray.com/agarasul/RemoteImage' }
    }
}

Then add this to app level build.gradle

dependencies {
    ...
    implementation 'dev.rasul:remoteimage:1.0.4'
}

This is a sample application which uses RemoteImage

Hope it will be useful for you!

Please give a star if it was helpful for you :)

Feel free to write me if you have any questions or suggestions

Follow me on Twitter: https://twitter.com/a_rasul98

Source code: https://github.com/agarasul/RemoteImage