How to add an image to a button in jetpack compose/kotlin

Question

I am trying to code a button, and so far have created a separate function called DefaultButton with the parameters string and an onclick function. I also wanted to add an image to this button but have not been able to successfully add it as a parameter. Is there another way to do this and add an image to the button?

I tried this below, with the function Default Button, and the default button in a different function.

fun DefaultButton(
    image: Image,
    text: String,
    onClick: () -> Unit
) {
    Spacer(modifier = Modifier.height(5.dp))
    Button(
        onClick = onClick,
        modifier = Modifier.size(width = 200.dp, height = 70.dp)) {
        Text(text, fontSize = 40.sp)

    }
}

@Composable
fun HomeScreen(
    navigateToProfile: (Int, Boolean) -> Unit,
    navigateToSearch: (String) -> Unit,
    navigateToSettings: (String) -> Unit,
    popBackStack: () -> Unit,
    popUpToLogin: () -> Unit,
) {
    Column (
     modifier = Modifier.fillMaxWidth(),
     horizontalAlignment = Alignment.CenterHorizontally) {
     Text("Home Screen", fontSize = 40.sp)

DefaultButton(
         text = "Favourites",
         onClick = { navigateToSearch("Hello") }
     )

I can't find a way to successfully add an image (R.drawable) to the parameter without an error message. Should I insert an image without adding it as a parameter? How would I do this? Should I use 'icon' instead? What's the difference?

Answer 1

In Jetpack Compose, you can add an image to a button by using the icon parameter in the Button composable. The icon parameter allows you to specify an ImageVector or a Painter that represents the image you want to display on the button. You don't need to pass it as a separate parameter to your DefaultButton function.

In Jetpack Compose, you can add an image to a button by using the icon parameter in the Button composable. The icon parameter allows you to specify an ImageVector or a Painter that represents the image you want to display on the button. You don't need to pass it as a separate parameter to your DefaultButton function.

Here's how you can modify your DefaultButton function to include an image using the icon parameter:

    @Composable
    fun DefaultButton(
        icon: Painter, // Use Painter for the image
        text: String,
        onClick: () -> Unit
    ) {
        Spacer(modifier = Modifier.height(5.dp))
        Button(
            onClick = onClick,
            modifier = Modifier.size(width = 200.dp, height = 70.dp),
            content = {
                // Specify the icon using the icon parameter
                Image(painter = icon, contentDescription = null)
                Spacer(modifier = Modifier.width(8.dp)) // Adjust spacing
                Text(text, fontSize = 40.sp)
            }
        )
    }
    @Composable
    fun HomeScreen(
        navigateToProfile: (Int, Boolean) -> Unit,
        navigateToSearch: (String) -> Unit,
        navigateToSettings: (String) -> Unit,
        popBackStack: () -> Unit,
        popUpToLogin: () -> Unit
    ) {
        Column (
            modifier = Modifier.fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Home Screen", fontSize = 40.sp)
    
            DefaultButton(
                icon = painterResource(id = R.drawable.your_image_resource), // Provide your image resource
                text = "Favourites",
                onClick = { navigateToSearch("Hello") }
            )
        }
    }

Answer 2

If you want to add a drawable as a parameter, do this

@DrawableRes val imageRes: Int

instead of image: Image and to use the drawable do:

Image(
    modifier = Modifier,
    painter = painterResource(id = imageRes))