compose-image-blurhash

ComposeImageBlurhash is a Jetpack Compose component with the necessary implementation to display a blurred image while the real image is loaded from the internet.
Use blurhash and coil to ensure good performance.

Coil

The Coil library is used to load the images asynchronously

You can find more information here github!

More from Blurhash

BlurHash is a compact representation of a placeholder for an image.

You can also see nice examples and try it out yourself at
blurha.sh!

All blurhash code is here
github!

Users

Who uses ComposeImageBlurhash? :

Inmersoft – At Immersoft we use ComposeImageBlurhash for a better user experience when loading and displaying images to the end user.

#How to use

  • In the AndroidManifest add the permissions to use the Internet

      <uses-permission android:name="android.permission.INTERNET" />

  • In the build.gradle add the necessary dependencies

      implementation 'com.github.orlando-dev-code:compose-image-blurhash:1.0.0-alpha02'

  • Add component as required

      class MainActivity : ComponentActivity() {
  @ExperimentalCoilApi
  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContent {
          TestImageBlurLibraryTheme {
              // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                   TestImageBlurhash(resources)
                }
            }
        }
    }
 }

  @ExperimentalCoilApi
  @Composable
  fun TestImageBlurhash(resources: Resources) {
        val imageUrl = "https://blurha.sh/assets/images/img1.jpg"
        val blurhash = "LEHV6nWB2yk8pyo0adR*.7kCMdnj"
        Card(
            modifier = Modifier
            .height(300.dp)
            .fillMaxWidth()
            .padding(8.dp),
            shape = MaterialTheme.shapes.small
        ) {
          ImageBlur(
                modifier = Modifier.fillMaxSize(),
                blurhash = blurhash,
                imageUrl = imageUrl,
                resources = resources,
                contentDescription = "Image content description"
            )
        }
  }

GitHub

View Github