How to Post Data to API using Volley in Android using Jetpack Compose?

Last Updated : 10 Mar, 2025

APIs are used within Android Applications to interact with a database to perform various CRUD operations on data within the database such as adding new data, reading the existing data, and updating and deleting existing data. In this article, we will take a look at How to Post data to API in android using Volley in Jetpack Compose.

Steps to Implement POST Data to API with Volley

Step 1: Create a New Project in Android Studio

To create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.

Step 2: Add the below Dependency to your build.gradle.kts File

Below is the dependency for Volley which we will be using to get the data from API. For adding this dependency navigate to the app > Gradle Scripts > build.gradle.kts (Module: app) and add the below dependency in the dependencies section.

dependencies {
    ...
    implementation("com.android.volley:volley:1.2.1")
}

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.

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

Step 4: Working with the MainActivity.kt 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 for further explanation.

MainActivity.kt:

Kotlin

package com.geeksforgeeks.demo

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.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.graphics.*
import androidx.compose.ui.platform.LocalContext
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.android.volley.Response
import com.android.volley.toolbox.*
import com.geeksforgeeks.demo.ui.theme.DemoTheme
import org.json.*

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DemoTheme(dynamicColor = false, darkTheme = false) {
                Surface(color = Color.White) {
                    PostData()
                }
            }
        }
    }
}

@Composable
fun PostData() {
    val context = LocalContext.current

    val userName = remember {
        mutableStateOf(TextFieldValue())
    }
    val job = remember {
        mutableStateOf(TextFieldValue())
    }
    val response = remember {
        mutableStateOf("")
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .fillMaxHeight()
            .fillMaxWidth(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // Email text field
        TextField(
            value = userName.value,
            onValueChange = { userName.value = it },
            placeholder = { Text(text = "Enter your name") },
            singleLine = true
        )

        Spacer(modifier = Modifier.height(5.dp))

        // Job text field
        TextField(
            value = job.value,
            onValueChange = { job.value = it },
            placeholder = { Text(text = "Enter your job") },
            singleLine = true
        )

        Spacer(modifier = Modifier.height(10.dp))

        Button(
            onClick = {
                // API call
                postDataUsingVolley(context, userName, job, response)
            }
        ) {
            Text(text = "Post Data", modifier = Modifier.padding(8.dp))
        }

        Spacer(modifier = Modifier.height(20.dp))

        Text(
            text = response.value,
            color = Color.Black,
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold, modifier = Modifier
                .padding(10.dp)
                .fillMaxWidth(),
            textAlign = TextAlign.Center
        )
    }
}

private fun postDataUsingVolley(
    context: Context,
    userName: MutableState<TextFieldValue>,
    job: MutableState<TextFieldValue>,
    res: MutableState<String>
) {
    // base url
    val url = "https://reqres.in/api/users"

    // create a new variable for a request queue
    val queue = Volley.newRequestQueue(context)

    // string request to update data and
    // pass method as "PUT" to update data.
    val request: StringRequest = object : StringRequest(
        Method.POST,
        url,
        Response.Listener { response ->
            Toast.makeText(context, "Data Posted to API..", Toast.LENGTH_SHORT).show()
            try {
                // extract data from json object and display
                val jsonObject = JSONObject(response!!)
                val result =
                    "User Name : " + jsonObject.getString("name") + "\n" + "Job : " + jsonObject.getString(
                        "job"
                    )
                res.value = result
            } catch (e: JSONException) {
                e.printStackTrace()
            }
        },
        Response.ErrorListener {
            Toast.makeText(context, "Fail to post data..", Toast.LENGTH_SHORT)
                .show()
        }
    ) {
        override fun getParams(): Map<String, String> {
            // map to store values
            val params: MutableMap<String, String> = HashMap()
            params["name"] = userName.value.text
            params["job"] = job.value.text
            return params
        }
    }
    queue.add(request)
}

Output:

Android - Update Data in API Using Volley with Jetpack Compose

chaitanyamunje

Improve

Article Tags :