increase size of icon inside a button in compose

user_70942 0
Viewed 118

I have the following button composable

@Composable
fun AppleLoginButton(onLoginClicked: () -> Unit) {
    Button(
        modifier = Modifier.size(44.dp),
        contentPadding = ButtonDefaults.ContentPadding,
        onClick = {
            onLoginClicked()
    },
        colors = ButtonDefaults.buttonColors(backgroundColor = Color.Black, contentColor = Color.White)
    ) {
        Icon(
            modifier = Modifier.fillMaxSize(),
            painter = painterResource(id = R.drawable.ic_apple_logo), contentDescription = "Apple logo")
    }
}

But I want to increase the size of the apple logo as its too small.

I have tried

modifier = Modifier.size(100.dp)
modifier = Modifier.fillMaxSize()

enter image description here

android-jetpack-compose android
1 Answers

You can use either increase size of Button or not a height. Because it uses contentPadding which is 16.dp on both sides and leaves space. You can set it as contentPadding = PaddingValues(0.dp), have a button with no size modifier, or bigger modifier or use IconButton.

Text("Button")
Button(
    modifier = Modifier.size(48.dp),
    onClick = {
    },
    shape = RoundedCornerShape(10.dp),
    colors = ButtonDefaults.buttonColors(
        backgroundColor = Color.Black,
        contentColor = Color.White,
    ),
    contentPadding = PaddingValues(0.dp)
) {
    Icon(
        modifier = Modifier
            .fillMaxSize(),
        painter = painterResource(id = R.drawable.ic_baseline_star_12),
        contentDescription = "Apple logo"
    )
}

Text("IconButton")

IconButton(
    modifier = Modifier
        .size(48.dp)
        .background(Color.Black, RoundedCornerShape(8.dp)),
    onClick = {

    }
) {
    Icon(
        modifier = Modifier
            .fillMaxSize(),
        painter = painterResource(id = R.drawable.ic_baseline_star_12),
        contentDescription = "Apple logo",
        tint = Color.White
    )
}

Text("IconButton clip or shadow with clip=true ,0.dp elevation")
IconButton(
    modifier = Modifier
        .clip(RoundedCornerShape(8.dp))
//        .shadow(0.dp, RoundedCornerShape(8.dp), clip = true)
        .size(48.dp)
        .background(Color.Black),
    onClick = {

    }
) {
    Icon(
        modifier = Modifier
            .fillMaxSize(),
        painter = painterResource(id = R.drawable.ic_baseline_star_12),
        contentDescription = "Apple logo",
        tint = Color.White
    )
}
user_54578530
Related