Kotlin extensions of BlurHash for ImageView, Glide, Coil, Piccasso, and fast loading BlurHashDrawable optimized for Android.

Overview

BlurHashExt

Download

Kotlin extensions of BlurHash on Android ImageView, Glide, and Picasso.

Based Blurhash implementation is from https://github.com/woltapp/blurhash.

This implementation focus on optimizing BlurHash for Android development.

BlurHash Sample

How BlurHash works?

In short, BlurHash takes an image, and gives you a short string (only 20-30 characters!) that represents the placeholder for this image. You do this on the backend of your service, and store the string along with the image. When you send data to your client, you send both the URL to the image, and the BlurHash string. Your client then takes the string, and decodes it into an image that it shows while the real image is loading over the network. The string is short enough that it comfortably fits into whatever data format you use. For instance, it can easily be added as a field in a JSON object.

BlurHashExt implements BlurHash Algorithm(request to generate bitmap from the blurHash and convert to drawable) using coroutine. This allows image processing to happen on the IO thread. Call blurHash.clean() to dispose any pending job operation and other cache bitmap. BlurHash uses LRU-Cache to cache drawable bitmap in memory. lruSize can be defined when initializing BlurHash.

In summary:

   

Want to know all the gory technical details? Read the algorithm description.

Download

Gradle:

dependencies {
  implementation 'xyz.belvi.blurHash:blurHash:1.0.4'
}

Usage

Step 1 - Initialize BlurHash

val blurHash: BlurHash = BlurHash(this, lruSize = 20, punch = 1F)

lruSize determines the number of blur drawable that will be cache in memory. The default size is 10

Step 2 - Using BlurHash

With Glide

    Glide.with(this).load(imgUrl)
    .blurPlaceHolder(blurHashString, imageView, blurHash)
    {
        requestBuilder ->
        requestBuilder.into(imageView)
    }

or

   Glide.with(this).load(imgUrl)
   .blurPlaceHolder(blurHashString, width = 200, height= 200, blurHash = blurHash)
   {
       requestBuilder ->
       requestBuilder.into(imageView)
   }

With Picasso

    Picasso.get().load(imgUrl)
    .blurPlaceHolder(blurHashString, imageView, blurHash)
    {
        request ->
        request.into(imageView)
    }

or

   Picasso.get().load(imgUrl)
   .blurPlaceHolder(blurHashString, width = 200, height= 200, blurHash = blurHash)
   {
       request ->
       request.into(imageView)
   }

With Coil

// Handle the result. }.blurPlaceHolder(blurHashString, imageView, blurHash = blurHash) {coilImageBuilder -> coilImageBuilder.build() } ">
val request = ImageRequest.Builder(context)
    .data("https://www.example.com/image.jpg")
    .target { drawable ->
        // Handle the result.
        
    }.blurPlaceHolder(blurHashString, imageView, blurHash = blurHash)
    {coilImageBuilder ->
      coilImageBuilder.build()
    }

or

coilImageBuilder.build() } transformations(CircleCropTransformation()) } ">
imageView.load("https://www.example.com/image.jpg") {
   crossfade(true)
   blurPlaceHolder(blurHashString, imageView, blurHash = blurHash)
   {coilImageBuilder ->
     coilImageBuilder.build()
   }
   transformations(CircleCropTransformation())
}

In an ImageView

This is useful for loading a placeholder before makeing a call to load the actual Image

        imageView.placeHolder(blurHashString, blurHash)
        {
            imageView.setImageURI(imgUrl)
        }

Just interested in getting the blurHash Drawabe ?

This is useful for getting blurHasdDrablw asynchronously.

    blurHashDrawable(blurHashString, imageView, blurHash)
    {
        drawable ->
        // do something with drawable or use whatver imageloading library you want. blurDrawable is ready to be used as error image or placeholder
    }

or

   blurHashDrawable(blurHashString, width = 200, height = 200,  blurHash)
   {
       drawable ->
       // do something with drawable or use whatver imageloading library you want. blurDrawable is ready to be used as error image or placeholder
   }

Step 3 - Finally, Disposing

On onDestroy, do not forget to clean cached bitmap and tell BlurHash to cancel any pending coroutine transaction. Here's how :

    override fun onDestroy() {
        super.onDestroy()
        blurHash.clean()
    }

What is the punch parameter in some of these implementations?

It is a parameter that adjusts the contrast on the decoded image. 1 means normal, smaller values will make the effect more subtle, and larger values will make it stronger. This is basically a design parameter, which lets you adjust the look.

Technically, what it does is scale the AC components up or down.

Contributing

Contributions are welcomed even to blurHash base library!

You can also contribute by reporting issues or helping to resolve issues listed here issue tracker or file a pull request.

You might also like...
Customizable Android full screen image viewer for Fresco library supporting
Customizable Android full screen image viewer for Fresco library supporting "pinch to zoom" and "swipe to dismiss" gestures. Made by Stfalcon

This project is no longer supported. If you're able to switch from Fresco to any other library that works with the Android's ImageView, please migrate

Dali is an image blur library for Android. It contains several modules for static blurring, live blurring and animations.
Dali is an image blur library for Android. It contains several modules for static blurring, live blurring and animations.

Dali Dali is an image blur library for Android. It is easy to use, fast and extensible. Dali contains several modules for either static blurring, live

An Android project containing image recognition and object detection models.
An Android project containing image recognition and object detection models.

An Android project containing image recognition and object detection models. Users can input images into the deep learning model by taking photos, opening photo albums, and real-time previews on the Android side. After the calculation on the Android side is completed, the model will output the prediction result and show it to the user.

Android Camera Application for Exposure Fusion Algorithm and more
Android Camera Application for Exposure Fusion Algorithm and more

Android Camera Application for Exposure Fusion Algorithm and more

An Android library for scanning documents based on CameraX API and a tiny version of OpenCV

Document Scanner with tiny OpenCV example1.mp4 Document Scanner is an Android library (kotlin based) for scanning documents based on CameraX API and a

Pixel Boom is a Java-based Android software, featuring image super-resolution and colorization

Pixel Boom is a Java-based Android software, featuring image super-resolution and colorization.

Add curve at bottom of image views and relative layouts.
Add curve at bottom of image views and relative layouts.

Crescento Android library that adds a curve at the below of image views and relative layouts. CrescentoImageView and CrescentoContainer are the image

Add curve at bottom of image views and relative layouts.
Add curve at bottom of image views and relative layouts.

Crescento Android library that adds a curve at the below of image views and relative layouts. CrescentoImageView and CrescentoContainer are the image

Awesome Image Picker library will pick images/gifs with beautiful interface. Supports image or gif, Single and Multiple Image selection.

Awesome Image Picker Awesome Image Picker library will pick images/gifs with beautiful interface. Supports image or gif, Single and Multiple Image sel

Comments
  • blurhash doesn't seem to work w/ Coil 1.0

    blurhash doesn't seem to work w/ Coil 1.0

    Calling it with:

               image.load(it.imageUrls.small) {
                    crossfade(true)
                    blurPlaceHolder(it.blurHash, image, blurHash = blurHashHandler)
                    { coilImageBuilder ->
                        coilImageBuilder.build()
                    }
                }
    

    blurHashHandler is initialized in the fragment like so:

    val blurHashHandler = BlurHash(requireContext(), lruSize = 20, punch = 1F)
    

    The images pop into view w/o showing the blurhash placeholder.

    opened by kenyee 2
  • Reduce dependencies/ Divide into separate libraries

    Reduce dependencies/ Divide into separate libraries

    Hi, It's a good utility. A very big issue with this is if anyone uses this, they will get all the libraries in their project which is not at all needed (Glide, Picasso, Coil) as no one uses all the libraries and don't want unwanted libraries in their project.

    A good approach would be to make a core library and divide others in separate libraries.

    opened by amankgo 0
Releases(v1.0.0)
Owner
Nosakhare Belvi
Software Engineer
Nosakhare Belvi
🌲BlurHash - a compact representation of a placeholder for an image

BlurHash is a compact representation of a placeholder for an image. Backdrop uses Glide and coroutines to show blured placeholder while image is loading.

Ranbir Singh 6 Jun 24, 2022
Crop and Rounded Corners added to an ImageView.

SuperImageView Extra features for your ImageView provided in a modularized way Documentation for v2 coming this week. CropImageView An ImageView that

César Díez Sánchez 658 Dec 1, 2022
Custom shaped android imageview components

Shape Image View Provides a set of custom shaped android imageview components, and a framework to define more shapes. Implements both shader and bitma

Siyamed SINIR 2.6k Jan 3, 2023
Image loading library for Android

Image Loader Image loader library for Android. Deprecated. See Glide. Features Image transformations Automatic memory and storage caching Ability to l

Yuriy Budiyev 19 May 28, 2022
An image loading library for android.

Bilder Download Add following to your project's build.gradle allprojects { repositories { ... maven { url 'https://jitpack.io' } } }

Kshitij Sharma 4 Jan 1, 2022
🎨 Modern image loading library for Android. Simple by design, powerful under the hood.

Simple Image Loader Modern image loading library for Android. Simple by design, powerful under the hood. Kotlin: Simple Image Loader is Kotlin-native

Igor Solkin 8 Nov 21, 2022
Library to save image locally and shows options to open and share !

Image Save and Share Library to save image locally and shows options to open and share ! Download Demo APK from HERE Kindly use the following links to

Prabhakar Thota 27 Apr 18, 2022
An implementation of a gif decoder written 100% in Kotlin, plus an associated Drawable for Android

An implementation of a gif decoder written 100% in Kotlin, plus an associated Drawable for Android

Benoît Vermont 41 Nov 19, 2022
Generate Mermaid graphs from docker-compose files (in kotlin).

docker-compose-viz with Mermaid Generate Mermaid graphs from docker-compose files (in kotlin). Inspired from https://github.com/pmsipilot/docker-compo

Lucy Linder 12 Nov 22, 2022
Android widget for cropping and rotating an image.

Cropper The Cropper is an image cropping tool. It provides a way to set an image in XML and programmatically, and displays a resizable crop window on

Edmodo 2.9k Nov 14, 2022