Make your Bottom Nav bar Beautiful with this UI in Jetpack compose! 🤌

So Let’s see how you can make custom and beautiful bottom nav in Jetpack compose.

First of all let’s see the and I will explain each part below.

@Composable
fun BottomBar(modifier: Modifier = Modifier) {

    var navNum by remember {
        mutableStateOf(0)
    }

    Row(
        modifier = modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(topStart = 30.dp, topEnd = 30.dp))
            .background(CardColor)
            .padding(vertical = 15.dp, horizontal = 15.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            if (navNum == 0) {
                IconButton(onClick = { /*TODO*/ }) {
                    Icon(
                        painter = painterResource(id = R.drawable.home_filled),
                        contentDescription = "home",
                        tint = SecondaryColor,
                        modifier = Modifier
                            .size(25.dp)
                    )
                }

            } else {
                IconButton(onClick = { navNum = 0 }) {
                    Icon(
                        painter = painterResource(id = R.drawable.home_light),
                        contentDescription = "home",
                        tint = ThinTextColor,
                        modifier = Modifier
                            .size(25.dp)
                    )
                }
            }


            Spacer(modifier = Modifier.width(8.dp))
            if (navNum == 1) {

                IconButton(onClick = { /*TODO*/ }) {
                    Icon(
                        painter = painterResource(id = R.drawable.calendar_filled),
                        contentDescription = "home",
                        tint = SecondaryColor,
                        modifier = Modifier.size(25.dp)
                    )
                }
            } else {
                IconButton(onClick = { navNum = 1 }) {
                    Icon(
                        painter = painterResource(id = R.drawable.calendar_light),
                        contentDescription = "home",
                        tint = ThinTextColor,
                        modifier = Modifier.size(25.dp)
                    )
                }
            }
        }
        Row(verticalAlignment = Alignment.CenterVertically) {
            if (navNum == 2) {

                IconButton(onClick = { /*TODO*/ }) {
                    Icon(
                        painter = painterResource(id = R.drawable.message_filled),
                        contentDescription = "home",
                        tint = SecondaryColor,
                        modifier = Modifier.size(25.dp)
                    )
                }
            } else {
                IconButton(onClick = { navNum = 2 }) {
                    Icon(
                        painter = painterResource(id = R.drawable.message_light),
                        contentDescription = "home",
                        tint = ThinTextColor,
                        modifier = Modifier.size(25.dp)
                    )
                }
            }
            Spacer(modifier = Modifier.width(8.dp))
            if (navNum == 3) {
                IconButton(onClick = { /*TODO*/ }) {
                    Icon(
                        painter = painterResource(id = R.drawable.user_filled),
                        contentDescription = "home",
                        tint = SecondaryColor,
                        modifier = Modifier.size(25.dp)
                    )
                }
            } else {
                IconButton(onClick = { navNum = 3 }) {
                    Icon(
                        painter = painterResource(id = R.drawable.user_light),
                        contentDescription = "home",
                        tint = ThinTextColor,
                        modifier = Modifier.size(25.dp)
                    )
                }
            }
        }
    }
}

Here we have a Row which will fill max width and will have all the icons in it.

After that we clip it from top-Start and top-end by 30 DP. We will give our background color and padding for vertical and horizontal orientation.

After that we will divide our nav bar in 2 parts where each part have 2 icons and they will be separated and middle of that we will have our FAB(Floating Action Button).

In first row will align our icons vertically center and check whether our icons is selected or not if icon is not selected then we will a icon without filled color and if our icon is selected then we will show it in filled color.

Also make sure that when you click an icon you will update your index with that.

After that we will do same thing with other row and make sure we have space for FAB in middle of a bar.

After that we will wrap our Bottom bar with box and align with center bottom like this :-

Box {
        BottomBar(modifier=Modifier.align(Alignment.BottomCenter))
        IconButton(
            onClick = { /*TODO*/ },
            modifier = Modifier
                .padding(bottom = 35.dp)
                .clip(CircleShape)
                .background(SecondaryColor)
                .align(Alignment.BottomCenter)
                .padding(10.dp)
        ) {
            Icon(
                imageVector = Icons.Default.Add,
                contentDescription = "add",
                tint = Color.Black,
                modifier = Modifier.size(40.dp)
            )
        }
    }

And we will make our FAB in the box with padding values in bottom.

And WoW! our bottom bar is ready.

and if you want to make full UI of it then here is repo link and output of it if you like it then check that out too.

Github:- https://github.com/HeetKanabar/TODO-App-UI

Thank you! Keep enjoy. ~Heet Kanabar.