Thread
#compose
    bohregard

    bohregard

    2 years ago
    What’s the easiest way to bottom align something
    Box(
        modifier = Modifier.fillMaxSize(),
        gravity = Alignment.BottomEnd
    ) {
        Column(modifier = Modifier.fillMaxHeight()) {
            ....
        }
        val icon = vectorResource(id = R.drawable.ic_home)
        FloatingActionButton(
            onClick = {
            }, modifier = Modifier.padding(20.dp)
        ) {
            Image(asset = icon, modifier = Modifier.preferredSize(24.dp))
        }
    }
    Is there a better way than the above?
    v

    Val Salamakha

    2 years ago
    It depends on your view. You can use the following:
    @Composable
    fun HomeScreen(
        scaffoldState: ScaffoldState = remember { ScaffoldState() }
    ) {
        Column {
            Scaffold(
                scaffoldState = scaffoldState,
                topAppBar = {
                    TopAppBar(
                        title = { Text(text = "Title") },
                        navigationIcon = {
                            IconButton(onClick =  { },
                            icon = {Icon(asset = <http://Icons.Default.Menu|Icons.Default.Menu>) }
                    )
                 })                
               },
               bodyContent = { modifier ->
                ...
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick =  {  },
                        icon =  { Icon(asset = Icons.Default.Add)
                    })
                }
            )
        }
    }
    Mihai Popa

    Mihai Popa

    2 years ago
    Are you trying to bottom align the FAB? If so, you can also make it part of the Column, and do something like this:
    Column {
            ....
       
        val icon = vectorResource(id = R.drawable.ic_home)
        FloatingActionButton(
            onClick = {
            }, modifier = Modifier.fillMaxHeight().wrapContentHeight(Alignment.Bottom).padding(20.dp)
        ) {
            Image(asset = icon, modifier = Modifier.preferredSize(24.dp))
        }
     }
    fillMaxHeight().wrapContentHeight
    will fill the remaining available space and allow the fab to be "wrap content" height with Alignment.Bottom being used to position the fab in the available space