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 Images from URLs 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 the Image with the 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:

• Kotlin tutorial for beginners.
• How To Make An Android App For Beginners
• Android Interview Questions For Fresher.
• Install & Setup Android Studio Java JDK & SDK.
• Shimmer Effect Android Using Kotlin.
• Top 5 Things To Avoid While Developing Android Apps.
• 5 Best GitHub Repositories For Android Developer.
• 15 Best Useful Sites For Online Learning.

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 🙂