Android Jetpack Compose Button with Icon and Text Last Updated : 18 May, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report Many times in android applications while using a button we have to display an image along with the text in our button. So that users will get to know about what the button actually does rather than simply displaying icons within the button. In this article, we will take a look at How to combine text and image in a button in an Android application using Jetpack Compose. A sample video is given at the end to get an idea about what we are going to do in this article.Step by Step ImplementationStep 1: Create a New Project in Android StudioTo 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: Working with the MainActivity.kt fileGo 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.MainActivity.kt: Kotlin package com.geeksforgeeks.demo import android.os.Bundle import android.widget.Toast import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.Image import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.* import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.painterResource 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.style.TextAlign import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MaterialTheme { OpenURL() } } } } @Composable fun OpenURL() { // a variable for a context val context = LocalContext.current // create a column Column( // specifying modifier and setting max height and max width modifier = Modifier .fillMaxSize() .fillMaxHeight() .fillMaxWidth() .padding(5.dp), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { // define the button Button( colors = ButtonDefaults.buttonColors(containerColor = Color.Black), onClick = { Toast.makeText(context, "Welcome to Geeks for Geeks", Toast.LENGTH_SHORT).show() }, shape = RoundedCornerShape(8.dp) ) { Column( modifier = Modifier.padding(16.dp), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { // add image for the button Image( painter = painterResource(id = R.drawable.gfg_logo), contentDescription = "Image", modifier = Modifier .height(100.dp) .width(100.dp) ) // add text for the button Text( "Android", style = TextStyle(fontWeight = FontWeight.Bold), textAlign = TextAlign.Center, fontSize = 20.sp ) } } } } Output: Comment More infoAdvertise with us Next Article Android Jetpack Compose Button with Icon and Text C chaitanyamunje Follow Improve Article Tags : Kotlin Android Android-Jetpack Similar Reads Button in Android using Jetpack Compose Jetpack Compose is a new toolkit provided by Google. This is useful for designing beautiful UI designs. A Button is a UI component in Android which is used to navigate between different screens. With the help of a button, the user can interact with your app and perform multiple actions inside your a 3 min read Icon Toggle Button in Android using Jetpack Compose Toggle Buttons are used in most applications. These buttons are used to perform multiple operations. Toggle buttons are seen used in many social media applications such as Instagram. In social media apps, we can get to see a heart icon that is used to like the image. We can also unlike that image by 3 min read Switch Button in Android using Jetpack Compose A Switch or a Switch Button in Android is a UI element that is used to switch between two states upon click. It can be assumed as a Boolean button with two different values. Some states where you may find a Switch in your Android device can be WIFI ON and OFF, Bluetooth ON and OFF, Dark Mode and Lig 2 min read Text in Android using Jetpack Compose Jetpack Compose is a new toolkit provided by Google. This is useful for designing beautiful UI designs. Android Text is a simple view in Android which is used to display text inside our App. In this article, we will take a look at the implementation of Text in Android using Jetpack Compose. Importan 5 min read Motion Layout Button in Android Jetpack Compose Motion Layout is a special version of Constraint layout. With the help of motion layout, we can add animations to the widgets within the layout and change the position of that widget dynamically. In this article, we will take a look at How to implement Motion Layout animation on buttons in Android u 8 min read Like