In this guide, we will explore how to integrate an API within a Jetpack Compose Android app using the MVVM pattern. Retrofit will handle network calls, LiveData will manage data updates, and Compose will construct the UI. We’ll use an API supplying credit card detail.
Prerequisites:
Familiarity with Jetpack Compose, MVVM principles, and Retrofit basics.
Step 1: Configure the Project
Begin by configuring your Android project. Add these dependencies to your app-level build.gradle file:
implementation ‘androidx.activity:activity-compose:1.4.0’
implementation ‘androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07’
implementation ‘androidx.compose.runtime:runtime-livedata:1.0.4’
// Retrofit for network requests
implementation ‘com.squareup.retrofit2:retrofit:2.9.0’
implementation ‘com.squareup.retrofit2:converter-gson:2.9.0’
// Coroutines for asynchronous programming
implementation ‘org.jetbrains.kotlinx:kotlinx-coroutines-android:1.5.1’
Repository: https://gist.github.com/dheeraj-bhadoria/d97b0af1592cc24cd0b912dcbae38eaf#file-build-gradle
Step 2: Build the Data Model
Create a CreditCard data class to model your credit card object. Inside a new CreditCard.kt file, add this code:
val id: String,
val bank: String,
val number: String,
val cvv: String,
val type: String
)
https://gist.github.com/dheeraj-bhadoria/42cc69848f821ddd1f2b5b11b3e03e60#file-creditcard-kt
Step 3: Set up Retrofit
Build a Retrofit service interface to specify API endpoints. Make a new Kotlin file named CreditCardService.kt and add the code.
@GET(“credit_cards”)
suspend fun getCreditCards(): List<CreditCard>
https://gist.github.com/dheeraj-bhadoria/bc1be647d040bc5fc1eeae825ddbc273#file-creditcardservice-kt
Now, build a Retrofit instance for network requests. Make a new Kotlin file named RetrofitInstance.kt and add this code:
private const val BASE_URL = “https://random-data-api.com/api/v2/”
private val retrofit: Retrofit by lazy {
Retrofit.Builder()
.baseUrl(BASE_URL)
.addConverterFactory(GsonConverterFactory.create())
.build()
}
val creditCardService: CreditCardService by lazy {
retrofit.create(CreditCardService::class.java)
}
}
https://gist.github.com/dheeraj-bhadoria/e32ef92cda80d120ccb4690517b99cd9#file-retrofitinstance-kt
Step 4: Build Data Repository
Generate a repository class to manage data actions. Form a new Kotlin file titled CreditCardRepository.kt. Include the following code:
private val creditCardService = RetrofitInstance.creditCardService
suspend fun getCreditCards(): List<CreditCard> {
return creditCardService.getCreditCards()
}
}
Step 5: Build the ViewModel
Create a ViewModel class to handle data within your Composable UI. Make a new Kotlin file named CreditCardViewModel.kt and insert this code:
private val repository = CreditCardRepository()
private val _creditCards = MutableLiveData<List<CreditCard>>()
val creditCards: LiveData<List<CreditCard>> = _creditCards
fun fetchCreditCards() {
viewModelScope.launch {
try {
val cards = repository.getCreditCards()
_creditCards.value = cards
} catch (e: Exception) {
// Handle error
}
}
}
}
Step 6: Build the Composable UI
Construct your Composable UI. Generate a fresh Kotlin file (e.g., CreditCardScreen.kt) and insert the following code:
fun CreditCardScreen(viewModel: CreditCardViewModel) {
val creditCards by viewModel.creditCards.observeAsState(emptyList())
LaunchedEffect(Unit) {
viewModel.fetchCreditCards()
}
Column {
if (creditCards.isEmpty()) {
// Show loading indicator or placeholder
Text(text = “Loading…”)
} else {
// Display the list of credit cards
LazyColumn {
items(creditCards) { creditCard ->
Text(text = creditCard.bank)
Text(text = creditCard.number)
Text(text = creditCard.type)
Divider() // Add a divider between items
}
}
}
}
}
https://gist.github.com/dheeraj-bhadoria/5585712c22e9f8cf6ced92a83b775d82#file-creditcardscreen-kt
Step 7: Configure Entry Point
In your app’s activity or entry point, use the setContent function to initialize the Composable UI. Example (MainActivity.kt):
private val viewModel: CreditCardViewModel by viewModels()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
CreditCardScreen(viewModel)
}
}
}
https://gist.github.com/dheeraj-bhadoria/154eea7dd32528f2376e7405eb7a6ba5#file-mainactivity-kt
Step 8: Grant Internet Permission
In your AndroidManifest.xml file, add the internet permission to enable network access:
Output
In this tutorial, we have successfully integrated the given API into a Jetpack Compose-based Android app using the MVVM architecture. We set up Retrofit for network requests, LiveData for data observation, and Compose for building the UI. The ViewModel handles data retrieval and state management, and the Composable UI displays the list of credit cards fetched from the API. This architecture provides a structured and efficient way to handle network requests and update the UI in a reactive manner.
Sample Repository:
https://github.com/dheeraj-bhadoria/Compose-MVVM-Retrofit-ViewMode-LiveData-Complete-Example-Android-App.git
