Load Image from URL with Shimmer Effect in Jetpack Compose

Hello Developers, welcome to Techpass Master, In this post, you will learn how to Load Image from URL with Shimmer Effect in Jetpack Compose with Kotlin in Android Studio, this post will help you to load an image with shimmer in a simple way. So without any further discussion let’s get started!

Load Image from URL with Shimmer Effect in Jetpack Compose

-Demo-

Implement Library

implementation "com.github.skydoves:landscapist-glide:1.3.6"

Add Internet Permission

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

Use GlideImage to load Image with shimmer effect.

GlideImage(
        imageModel = imageUrl,
        contentScale = ContentScale.Crop,
        circularReveal = CircularReveal(duration = 100),
        alignment = Alignment.Center,
        shimmerParams = ShimmerParams(
                baseColor = MaterialTheme.colors.background,
                highlightColor = Color.Gray,
                durationMillis = 500,
                dropOff = 0.55f,
                tilt = 20f
        )
)

-Complete Code-

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.techpassmaster.jetpackcomposecourse">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.JetpackComposeCourse">
        <activity
            android:name="com.techpassmaster.jetpackcomposecourse.MainActivity"
            android:exported="false"
            android:label="@string/title_activity_image_with_shimmer"
            android:theme="@style/Theme.JetpackComposeCourse" />

        <activity
            android:name="com.techpassmaster.jetpackcomposecourse.LoadImageShimmerActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.JetpackComposeCourse">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

build.gradle (Module)

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    compileSdk 32

    defaultConfig {
        applicationId "com.taiyabali.jetpackcomposecourse"
        minSdk 21
        targetSdk 32
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary true
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion compose_version
    }
    packagingOptions {
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
}

dependencies {

    implementation 'androidx.core:core-ktx:1.8.0'
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
    implementation 'androidx.activity:activity-compose:1.3.1'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"

//    Glide with Shimmer Effect
    implementation "com.github.skydoves:landscapist-glide:1.3.6"

}

LoadImageShimmerActivity.kt

package com.techpassmaster.jetpackcomposecourse

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.skydoves.landscapist.CircularReveal
import com.skydoves.landscapist.ShimmerParams
import com.skydoves.landscapist.glide.GlideImage
import com.techpassmaster.jetpackcomposecourse.ui.theme.JetpackComposeCourseTheme

class LoadImageShimmerActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeCourseTheme {
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background) {
                    GetImageWithShimmerEffect()
                }
            }
        }
    }
}

@Composable
private fun GetImageWithShimmerEffect() {
    val imageUrl = "https://techpassmaster.com/wp-content/uploads/2021/11/Get-Current-Location-in-Android-Studio-using-Kotlin-Thumblain-768x512.png"

    Surface(modifier = Modifier
        .fillMaxWidth()
        .padding(
            start = 4.dp,
            end = 4.dp,
            top = 16.dp
        ),
        shape = RoundedCornerShape(corner = CornerSize(15.dp))) {

        Text(
            text = "Load Image from URL with Shimmer Effect in Jetpack Compose",
            style = MaterialTheme.typography.h5,
            color = MaterialTheme.colors.primaryVariant,
            textAlign = TextAlign.Center,
        )

        Surface(Modifier
            .wrapContentWidth()
            .wrapContentHeight()) {

            Column(modifier = Modifier.height(300.dp),
                verticalArrangement = Arrangement.Top,
                horizontalAlignment = Alignment.CenterHorizontally) {

                Surface(modifier = Modifier
                    .fillMaxWidth()
                    .padding(5.dp),
                    shape = RoundedCornerShape(corner = CornerSize(15.dp))) {

                    GlideImage(
                        imageModel = imageUrl,
                        contentScale = ContentScale.Crop,
                        circularReveal = CircularReveal(duration = 100),
                        alignment = Alignment.Center,
                        shimmerParams = ShimmerParams(
                            baseColor = MaterialTheme.colors.background,
                            highlightColor = Color.Gray,
                            durationMillis = 500,
                            dropOff = 0.55f,
                            tilt = 20f
                        )
                    )
                }
            }
        }
    }
}

Congratulations, all steps are done, now run and test the application.

You May Also Like:

I hope you liked the post. If you have any questions regarding this post. Feel free to comment and share the post with other developers.

Happy Learning 🙂

Techpass Master

Techpass Master is a website for free Android App Development, Java, Kotlin, Jetpack Compose, Firebase, & other tech tips & tricks tutorials. We focus on posting the article at Android App Development. Apart from App development tutorials, we also occasionally post other technology tips and tricks, which can be very helpful for you. Stay tuned with Techpass Master for more updates.
View All Articles

Leave a Reply

Your email address will not be published.