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…