Retrofit Integration with Jetpack Compose: A Complete Example

In this story, we will learn how to use the retrofit API in Android for fetching the data from the API and loading that data to the compose Ui. Please follow along with the story and write code to complete the exercise.

Folder Structure

We need to add the dependency for the API in the build. gradle file.

dependencies {

    implementation(libs.androidx.core.ktx)
    implementation(libs.androidx.lifecycle.runtime.ktx)
    implementation(libs.androidx.activity.compose)
    implementation(platform(libs.androidx.compose.bom))
    implementation(libs.androidx.ui)
    implementation(libs.androidx.ui.graphics)
    implementation(libs.androidx.ui.tooling.preview)
    implementation(libs.androidx.material3)

    // Image loading with Coil in Compose
    implementation( libs.coil.kt.coil.compose)
    // Retrofit for network requests
    implementation(libs.squareup.retrofit)
    implementation(libs.converter.gson)


    implementation(libs.androidx.foundation)// Foundation utilities for Compose

    // ViewModel
    implementation(libs.androidx.lifecycle.viewmodel.ktx)
    // ViewModel utilities for Compose
    implementation(libs.androidx.lifecycle.viewmodel.compose)
    implementation(libs.androidx.lifecycle.runtime.ktx)

    // Testing libraries it only for unittest and ui test,can be removed if not in use
    testImplementation(libs.junit)
    androidTestImplementation(libs.androidx.junit)
    androidTestImplementation(libs.androidx.espresso.core)
    androidTestImplementation(platform(libs.androidx.compose.bom))
    androidTestImplementation(libs.androidx.ui.test.junit4)
    debugImplementation(libs.androidx.ui.tooling)
    debugImplementation(libs.androidx.ui.test.manifest)
}

After that, we need to add internet permission in the Android Manifest file.

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

Now, we set up the API Changes.

ApiClient.kt

The ApiClient object initializes a Retrofit instance to communicate with an API here we are using it https://reqres.in/ as a sample API, It provides a method getUserApiService() to access the ApiService interface for making network requests.

object ApiClient {…