Note: If you are seeking Java code for Jetpack Compose, please note that Jetpack Compose is only available in Kotlin. It uses features such as coroutines, and the handling of @Composable annotations is handled by a Kotlin compiler. There is no method for Java to access these. Therefore, you cannot use Jetpack Compose if your project does not support Kotlin.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.
Step 2: Add the below dependency to your build.gradle File
Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.
// below dependency for using the retrofit
implementation ‘com.squareup.retrofit2:retrofit:2.9.0’
implementation ‘com.squareup.retrofit2:converter-gson:2.5.0’
After adding this dependency sync your project and now move towards the AndroidManifest.xml part.
Step 3: Adding Internet Permissions in the AndroidManifest.xml File
Navigate to the app > AndroidManifest.xml and add the below code to it.
<!--permissions for INTERNET-->
<uses-permission android:name="android.permission.INTERNET"/>
Step 4: Adding a New Color in the Color.kt File
Navigate to app > java > your app’s package name > ui.theme > Color.kt file and add the below code to it.
import androidx.compose.ui.graphics.Color
val Purple200 = Color(0xFF0F9D58)
val Purple500 = Color(0xFF0F9D58)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)
// on below line we are adding different colors.
val greenColor = Color(0xFF0F9D58)
Step 5: Creating a Model Class for Storing Our Data
Navigate to the app > java > your app’s package name > Right-click on it > New > Kotlin class and name it as DataModel and add the below code to it. Comments are added inside the code to understand the code in more detail.
data class DataModel(
// on below line we are creating variables for name and job
var name: String,
var job: String
)
Step 6: Creating an Interface Class for Our API Call
Navigate to the app > java > your app’s package name > Right-click on it > New > Kotlin class select it as Interface and name the file as RetrofitAPI and add below code to it. Comments are added inside the code to understand the code in more detail.
import retrofit2.Call
import retrofit2.http.Body
import retrofit2.http.GET
import retrofit2.http.POST
import retrofit2.http.PUT
interface RetrofitAPI {
// as we are making a post request to post a data
// so we are annotating it with post
// and along with that we are passing a parameter as users
@POST("users")
fun // on below line we are creating a method to post our data.
postData(@Body dataModel: DataModel?): Call<DataModel?>?
}
Step 7: Working with the MainActivity.java file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
import android.app.Activity
import android.content.Context
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.*
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.*
import com.example.newcanaryproject.ui.theme.*
import retrofit2.Call
import retrofit2.Callback
import retrofit2.Response
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory
import java.util.*
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
NewCanaryProjectTheme {
// on below line we are specifying background color for our application
Surface(
// on below line we are specifying modifier and color for our app
modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background
) {
// on the below line we are specifying the theme as the scaffold.
Scaffold(
// in scaffold we are specifying top bar.
topBar = {
// inside top bar we are specifying background color.
TopAppBar(backgroundColor = greenColor,
// along with that we are specifying title for our top bar.
title = {
// in the top bar we are specifying tile as a text
Text(
// on below line we are specifying text to display in top app bar.
text = "Retrofit POST Request in Android",
// on below line we are specifying modifier to fill max width.
modifier = Modifier.fillMaxWidth(),
// on below line we are specifying text alignment.
textAlign = TextAlign.Center,
// on below line we are specifying color for our text.
color = Color.White
)
})
}) {
// on the below line we are calling the pop window dialog method to display ui.
postData()
}
}
}
}
}
}
@Composable
fun postData() {
val ctx = LocalContext.current
val userName = remember {
mutableStateOf(TextFieldValue())
}
val job = remember {
mutableStateOf(TextFieldValue())
}
val response = remember {
mutableStateOf("")
}
// on below line we are creating a column.
Column(
// on below line we are adding a modifier to it
// and setting max size, max height and max width
modifier = Modifier
.fillMaxSize()
.fillMaxHeight()
.fillMaxWidth(),
// on below line we are adding vertical
// arrangement and horizontal alignment.
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
// on below line we are creating a text
Text(
// on below line we are specifying text as
// Session Management in Android.
text = "Retrofit POST Request in Android",
// on below line we are specifying text color.
color = greenColor,
fontSize = 20.sp,
// on below line we are specifying font family
fontFamily = FontFamily.Default,
// on below line we are adding font weight
// and alignment for our text
fontWeight = FontWeight.Bold, textAlign = TextAlign.Center
)
//on below line we are adding spacer
Spacer(modifier = Modifier.height(5.dp))
// on below line we are creating a text field for our email.
TextField(
// on below line we are specifying value for our email text field.
value = userName.value,
// on below line we are adding on value change for text field.
onValueChange = { userName.value = it },
// on below line we are adding place holder as text as "Enter your email"
placeholder = { Text(text = "Enter your name") },
// on below line we are adding modifier to it
// and adding padding to it and filling max width
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(),
// on below line we are adding text style
// specifying color and font size to it.
textStyle = TextStyle(color = Color.Black, fontSize = 15.sp),
// on below line we are adding single line to it.
singleLine = true,
)
// on below line we are adding spacer
Spacer(modifier = Modifier.height(5.dp))
// on below line we are creating a text field for our email.
TextField(
// on below line we are specifying value for our email text field.
value = job.value,
// on below line we are adding on value change for text field.
onValueChange = { job.value = it },
// on below line we are adding place holder as text as "Enter your email"
placeholder = { Text(text = "Enter your job") },
// on below line we are adding modifier to it
// and adding padding to it and filling max width
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(),
// on below line we are adding text style
// specifying color and font size to it.
textStyle = TextStyle(color = Color.Black, fontSize = 15.sp),
// on below line we ar adding single line to it.
singleLine = true,
)
// on below line we are adding spacer
Spacer(modifier = Modifier.height(10.dp))
// on below line we are creating a button
Button(
onClick = {
// on below line we are calling make payment method to update data.
postDataUsingRetrofit(
ctx, userName, job, response
)
},
// on below line we are adding modifier to our button.
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
// on below line we are adding text for our button
Text(text = "Post Data", modifier = Modifier.padding(8.dp))
}
// on below line we are adding a spacer.
Spacer(modifier = Modifier.height(20.dp))
// on below line we are creating a text for displaying a response.
Text(
text = response.value,
color = Color.Black,
fontSize = 20.sp,
fontWeight = FontWeight.Bold, modifier = Modifier
.padding(10.dp)
.fillMaxWidth(),
textAlign = TextAlign.Center
)
}
}
private fun postDataUsingRetrofit(
ctx: Context,
userName: MutableState<TextFieldValue>,
job: MutableState<TextFieldValue>,
result: MutableState<String>
) {
var url = "https://reqres.in/api/"
// on below line we are creating a retrofit
// builder and passing our base url
val retrofit = Retrofit.Builder()
.baseUrl(url)
// as we are sending data in json format so
// we have to add Gson converter factory
.addConverterFactory(GsonConverterFactory.create())
// at last we are building our retrofit builder.
.build()
// below the line is to create an instance for our retrofit api class.
val retrofitAPI = retrofit.create(RetrofitAPI::class.java)
// passing data from our text fields to our model class.
val dataModel = DataModel(userName.value.text, job.value.text)
// calling a method to create an update and passing our model class.
val call: Call<DataModel?>? = retrofitAPI.postData(dataModel)
// on below line we are executing our method.
call!!.enqueue(object : Callback<DataModel?> {
override fun onResponse(call: Call<DataModel?>?, response: Response<DataModel?>) {
// this method is called when we get response from our api.
Toast.makeText(ctx, "Data posted to API", Toast.LENGTH_SHORT).show()
// we are getting a response from our body and
// passing it to our model class.
val model: DataModel? = response.body()
// on below line we are getting our data from model class
// and adding it to our string.
val resp =
"Response Code : " + response.code() + "\n" + "User Name : " + model!!.name + "\n" + "Job : " + model!!.job
// below line we are setting our string to our response.
result.value = resp
}
override fun onFailure(call: Call<DataModel?>?, t: Throwable) {
// we get error response from API.
result.value = "Error found is : " + t.message
}
})
}
Summary
In this tutorial you've learned how to post data to API using Retrofit in Android using Jetpack Compose.
Do you have further questions on this topic or about Retrofit in general? Let us leave a comment below.
Enjoy coding & make it rock!
