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.

Overview

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"
                )
            }
      }
    
You might also like...
Demo project for a bug in coil:2.0.0-alpha06
Demo project for a bug in coil:2.0.0-alpha06

Demo Project for Coil alpha06 issue This is a demo project for an issue in coil:

An example concepts of MVVM and Kotlin. Display, Filter & Sort the given restaurants from assets with Jetpack Compose and AAC
Kotlin, MVVM, Navigation Component, Hilt, Jetpack Compose, Retrofit2

What is this project? This course will replace my old java mvvm introduction: https://codingwithmitch.com/courses/rest-api-mvvm-retrofit2/. Watch the

Android Sample Kotlin+ MVI + Jetpack compose + Coroutines + Retrofit + Hilt  + Room + Navigation component
Android Sample Kotlin+ MVI + Jetpack compose + Coroutines + Retrofit + Hilt + Room + Navigation component

MVIComposeSample Android Sample app to show user latest movies implementing MVI + Clean Architecture using kotlin & Jetpack compose following solid an

Icontent - Jetpack Compose component to show all random content sended by Inmersoft guide backend

icontent IContent is a library that allows loading audio visual content generica

❤️ A heart-shaped toggle switch component built using Jetpack Compose
❤️ A heart-shaped toggle switch component built using Jetpack Compose

heart-switch A heart-shaped toggle switch component built using Jetpack Compose. Inspired by Tore Bernhoft's I heart toggle Dribbble shot and Anatoliy

A Coordinator Layout-like component in Jetpack Compose.
A Coordinator Layout-like component in Jetpack Compose.

CollapsingToolbarInCompose Branches master: Initial code. column_version: Resulting code using a Column. 🚧 lazycolumn_version: Resulting code using a

Jetpack Compose component box.
Jetpack Compose component box.

Jetpack Compose Component Box About The Project ℹ️ This project is a project where you can find and use custom components in Jetpack Compose. Our goal

A Jetpack Compose component used for displaying Markdown-formatted text.
A Jetpack Compose component used for displaying Markdown-formatted text.

MarkdownText A library for displaying Markdown contents within Jetpack Compose. Uses Coil Current limitations Lists that are annotated with the * must

Comments
  • Can I only display the blurred image always displayed?

    Can I only display the blurred image always displayed?

    I'm asking if I can use this library to keep the blurred image displayed because I need to achieve this scenario:

    I need to display a blurred image in the background and in the front of it the real image.

    opened by ahmed-shehataa 2
Releases(2.1.0)
Owner
Orlando Novas Rodriguez
Android Developer && Frontend | Kotlin | Java | ReactJS | HTML | CSS | JavaScript and coffee lover. Android Developer at @inmersoft-dev
Orlando Novas Rodriguez
Luis David Orellana 3 Jun 20, 2022
Jenci - a project that includes necessary actions for Jenkins developed with Android Jetpack Compose.

Jenci is a project that includes necessary actions for Jenkins developed with Android Jetpack Compose. Jenci, Jenkis API services include some actions

Resul Silay 14 May 25, 2022
An MVI project setup using Jetpack compose. This would be a good place to start learning Model View Intent (MVI) architecture for Android.

Compose-MVI An MVI project setup using Jetpack compose. This would be a good place to start learning Model View Intent (MVI) architecture for Android.

null 6 Jul 28, 2022
Examples of ParallaxView and ParallaxScrollEfect are in the repo. You can find the necessary titles and outputs in the continuation of the Readme file. 🪞

Parallax Examples : Examples of ParallaxView and ParallaxScrollEfect are in the repo. You can find the necessary titles and outputs in the continuatio

Nisa Efendioğlu 5 Jul 29, 2022
A sample project in Kotlin to demonstrate Jetpack Compose, MVVM, Coroutines, Hilt, Room, Coil, Retrofit, Moshi, Leak Canary and Repository pattern

Jetpack-Compose-Boilerplate This repository contains a sample project in Kotlin to demonstrate Jetpack Compose, MVVM, Coroutines, Hilt, Room, Coil, Re

Areg Petrosyan 14 Dec 12, 2022
Android -MVVM-Jetpack Compose-Kotlin Flows-Dagger Hilt-Retrofilt2-Coil

android-mvvm-jetpack-compose-kotlin-flows Android -MVVM-Jetpack Compose-Kotlin Flows-Dagger Hilt-Retrofilt2-Coil A sample project that presents a mode

Emad Seliem 8 Jul 27, 2022
🗻 Unopinionated, easy-to-use, and customizable Badge component for Jetpack Compose

Cobadge ?? Unopinionated, easy-to-use, and customizable Badge component for Jetpack Compose Getting started In this section I will walk you through th

Michael Grigoryan 5 Jun 28, 2022
Jetpack Compose performance testing

Jetpack Compose performance testing ( ?? WIP) ?? Disclaimer This project is not official, and the information is provided as-is. All test cases descri

Sergey Yaremych 16 Jun 17, 2022
Jetpack Compose performance testing

Jetpack Compose performance testing

Sergey Yaremych 16 Jun 17, 2022
An Android imageboard client with the focus on maximum performance, fully written with Jetpack Compose

This project is an experimental playground to try implementing an application entirely with Jetpack Compose without using the old Android UI framework.

Dmitry 31 Dec 30, 2022