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