Android Jetpack Compose - Floating Action Button of custom image

Question

I write this code.

    Image (
        painter = painterResource(id = R.drawable.image),
        contentDescription = "fab",
        modifier = Modifier
            .size(80.dp)
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = rememberRipple(true),
                onClick = { /* TODO */ }
            )
    )

But, I use Scaffold. So I want to use floating action button or extended floating action button. How can I use floating action button and custom image. I have a circular photo to use for the button.

    Scaffold(
        topBar = {},
        content = {},
        floatingActionButton = {
            Image {
                /* How can I wrire */
            }
        }
    )

Gabriele Mariotti · Answer 1 · 2022-01-30T11:49:18.607

8

You can use something like:

Scaffold(
    topBar = {},
    content = {},
    floatingActionButton = {
        FloatingActionButton(onClick = { /*TODO*/ }) {
            Image (
                painter = painterResource(id = R.drawable.xxxx),
                contentDescription = "fab",
                contentScale = ContentScale.FillBounds
            )
        }
    }
)

edited Jan 30 '22 at 11:49

answered Jan 29 '22 at 22:07

Gabriele Mariotti

320,139
94
887
841

Thank you very much! But, there is a margin around this image. – vr_min_chan Jan 30 '22 at 03:17
@vr_min_chan Add an appropriate contentScale (check the updated answer) – Gabriele Mariotti Jan 30 '22 at 11:50

score 0 · Answer 2 · answered Aug 30 '23 at 18:00

 FloatingActionButton(
                        backgroundColor = Color(0xFFF7FAFF),
                        onClick = { **TODO** },
                        modifier = Modifier.align(Alignment.BottomEnd).padding(start = 15.dp, top = 15.dp, end = 8.dp, bottom = 15.dp).background(Color.Transparent)) 
                        {
                        Image(painter = painterResource(id = R.drawable.icon_fab_btn), contentDescription = "fab", contentScale = ContentScale.FillBounds,)
                        }

Android Jetpack Compose - Floating Action Button of custom image

2 Answers2