Open In App

Android Jetpack Compose Button with Icon and Text

Last Updated : 18 May, 2025
Comments
Improve
Suggest changes
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 Implementation

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: 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 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:



Next Article
Article Tags :

Similar Reads