How to Implement Bottom App Bar in Compose

If you’re building an Android app with Jetpack Compose, you may be wondering how to implement a bottom app bar. This tutorial will guide you through the steps to create a bottom app bar in Jetpack Compose, including adding icons and handling user interactions.

What is a Bottom App Bar?

A bottom app bar is a navigation bar that is located at the bottom of the screen in an Android app. It typically contains icons that allow users to navigate between different sections of the app, as well as a floating action button (FAB) for performing common actions. The bottom app bar is a popular design pattern in modern Android apps, as it provides easy access to navigation and actions without taking up too much screen real estate.

Setting up the Project and Dependencies.

Before we can start implementing the bottom app bar in Jetpack Compose, we need to set up our project and dependencies.

First, make sure you have the latest version of Android Studio installed. Then, create a new project and add the necessary dependencies to your build.gradle file.

We will be using the Material Design Components library, which includes the BottomAppBar and FloatingActionButton components we need for our app bar. Once you have added the dependencies, sync your project and we can move on to the next step.

    implementation "androidx.compose.ui:ui:$compose_ui_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
    implementation 'androidx.compose.material:material:1.1.1'

Creating the Bottom App Bar.

Now that we have set up our project and added the necessary dependencies, we can start creating the bottom app bar in Jetpack Compose. First, we need to create a Scaffold composable, which is a container that holds all the necessary components for our app screen. Within the Scaffold, we can add the BottomAppBar component and customize it to our liking. We can also add a FloatingActionButton to the app bar if needed. With just a few lines of code, we can easily implement a bottom app bar in Jetpack Compose.

@Composable
fun BottomAppBarCompose(context: Context) {
  val selected = remember { mutableStateOf(BottomIcons.MENU) }

  BottomAppBar(modifier = Modifier.fillMaxWidth(), backgroundColor = Color(0xFFF0E7BC),
    //contentColor = Color.Red,
    cutoutShape = CircleShape,
    //elevation = 20.dp,
    //contentPadding = AppBarDefaults.ContentPadding,
    content = {
      Row(
        modifier = Modifier.fillMaxWidth(1f),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
      ) {
        // Add Bottom app bar UI here 
      }
    })
}

Adding Icons to the Bottom App Bar.

Once you have created the BottomAppBar component in Jetpack Compose, you can add icons and text to it to make it more functional and user-friendly.

To add icons, you can use the Icon composable and specify the icon you want to use. You can also add text to the app bar by using the Text composable and specifying the text you want to display.

By combining these elements, you can create a bottom app bar that is both visually appealing and easy to use.

 BottomAppBar(modifier = Modifier.fillMaxWidth(), backgroundColor = Color(0xFFF0E7BC),
    //contentColor = Color.Red,
    cutoutShape = CircleShape,
    //elevation = 20.dp,
    //contentPadding = AppBarDefaults.ContentPadding,
    content = {
      Row(
        modifier = Modifier.fillMaxWidth(1f),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
      ) {

        Row() {
          IconButton(onClick = { selected.value = BottomIcons.FAV }) {
            Icon(
              Icons.Default.Favorite,
              contentDescription = null,
              tint = if (selected.value == BottomIcons.FAV) Color.Red else Color.Black
            )
          }
          IconButton(onClick = { selected.value = BottomIcons.SHARE }) {
            Icon(
              Icons.Default.Share,
              contentDescription = null,
              tint = if (selected.value == BottomIcons.SHARE) Color.Red else Color.Black
            )
          }
          IconButton(onClick = { selected.value = BottomIcons.DELETE }) {
            val delete = painterResource(id = R.drawable.ic_delete)
            Icon(
              painter = delete,
              contentDescription = null,
              tint = if (selected.value == BottomIcons.DELETE) Color.Red else Color.Black
            )
          }
        }
        Row() {
          IconButton(onClick = { selected.value = BottomIcons.MENU }) {
            val menu = painterResource(id = R.drawable.ic_menu)
            Icon(
              painter = menu,
              contentDescription = null,
              tint = if (selected.value == BottomIcons.MENU) Color.Red else Color.Black
            )
          }
        }
      }
    })

Handling Click Events on the Bottom App Bar.

In order to make your bottom app bar functional, you’ll need to handle click events on the icons and text you’ve added. To do this, you can use the clickable modifier on each element.

For example, if you want to handle a click event on an icon, you can wrap the Icon composable in a clickable modifier and specify the action you want to take when the icon is clicked.

Similarly, if you want to handle a click event on text, you can wrap the Text composable in a clickable modifier and specify the action you want to take when the text is clicked. By handling click events in this way, you can create a bottom app bar that is not only visually appealing but also highly functional and user-friendly.

package com.bottomappbarcompose

import android.content.Context
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.BottomAppBar
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Share
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource

enum class BottomIcons {
  MENU, SHARE, FAV, DELETE
}

@Composable
fun BottomAppBarCompose(context: Context) {
  val selected = remember { mutableStateOf(BottomIcons.MENU) }

  BottomAppBar(modifier = Modifier.fillMaxWidth(), backgroundColor = Color(0xFFF0EDDD),
    /**
     * uncomment this line for change content color 
     */
    //contentColor = Color.Red, 
    /**
     * Change cutout shape Circle, Rounded React etc 
     */
    cutoutShape = CircleShape,
    //elevation = 20.dp,
    /**
     * uncomment this line for change padding
     */
    //contentPadding = AppBarDefaults.ContentPadding,
    content = {
      Row(
        modifier = Modifier.fillMaxWidth(1f),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
      ) {

        Row() {
          IconButton(onClick = {
            selected.value = BottomIcons.FAV
            makeToast(context, "FAV clicked")
          }) {
            Icon(
              Icons.Default.Favorite,
              contentDescription = null,
              tint = if (selected.value == BottomIcons.FAV) Color.Red else Color.Black
            )
          }
          IconButton(onClick = {
            selected.value = BottomIcons.SHARE
            makeToast(context, "SHARE clicked")
          }) {
            Icon(
              Icons.Default.Share,
              contentDescription = null,
              tint = if (selected.value == BottomIcons.SHARE) Color.Red else Color.Black
            )
          }
          IconButton(onClick = {
            selected.value = BottomIcons.DELETE
            makeToast(context, "DELETE clicked")
          }) {
            val delete = painterResource(id = R.drawable.ic_delete)
            Icon(
              painter = delete,
              contentDescription = null,
              tint = if (selected.value == BottomIcons.DELETE) Color.Red else Color.Black
            )
          }
        }
        Row() {
          IconButton(onClick = {
            selected.value = BottomIcons.MENU
            makeToast(context, "MENU clicked")
          }) {
            val menu = painterResource(id = R.drawable.ic_menu)
            Icon(
              painter = menu,
              contentDescription = null,
              tint = if (selected.value == BottomIcons.MENU) Color.Red else Color.Black
            )
          }
        }
      }
    })
}

Expert UI enhancement on the Bottom app bar

The following param we can customize in the BottomApp bar

cutoutShape – the shape of the cutout that will be added to the BottomAppBar
elevation – the elevation of this BottomAppBar.

backgroundColor – The background color for the BottomAppBar.
contentPadding – the padding applied to the content of this BottomAppBar

backgroundColor – The background color for the BottomAppBar.
contentPadding – the padding applied to the content of this BottomAppBar

How to use BottomBar with Compose Scaffold

Create a Scaffold for using the bottom bar and also add FloatingActionButton also.

package com.bottomappbarcompose

import android.content.Context
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import com.bottomappbarcompose.ui.theme.BottomAppBarComposeTheme

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      BottomAppBarComposeTheme {
        // A surface container using the 'background' color from the theme
        Surface(modifier = Modifier.fillMaxSize(), color = Color(0xFFF0E7CD)) {
          ComposeScaffold()
        }
      }
    }
  }
}

@Composable
fun ComposeScaffold() {
  val context = LocalContext.current
  val scaffoldState = rememberScaffoldState()
  Scaffold(bottomBar = { BottomAppBarCompose(context) },
    floatingActionButton = { FabCompose(context) },
    floatingActionButtonPosition = FabPosition.Center,
    isFloatingActionButtonDocked = true,
    scaffoldState = scaffoldState
  ) {
    // Add Main UI
    Column(
      modifier = Modifier
        .fillMaxWidth()
        .fillMaxHeight()
        .background(Color(0xFFFFFCF3))
    ) {

    }
  }
}

fun makeToast(ctx: Context, msg: String) {
  Toast.makeText(ctx, msg, Toast.LENGTH_SHORT).show()
}

@Composable
fun FabCompose(context: Context) {
  FloatingActionButton(modifier = Modifier,
    interactionSource = remember { MutableInteractionSource() },
    // shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 16)),
    backgroundColor = Color(0xFFE7E5B5),
    contentColor = Color.Black,
    //elevation = FloatingActionButtonDefaults.elevation(),
    onClick = {
      makeToast(context, "Floating action button clicked")
    }) {
    Icon(Icons.Default.Edit, contentDescription = null)
  }
}

Conclusion

In this tutorial, we have learned, how to create a Bottom bar for the app, Keep in touch for the latest tutorial on Jetpack compose for Android. If you have any queries please reach out to me using the comment box, I will try to answer that as soon as possible.

How to Implement Bottom App Bar in Compose

What is a Bottom App Bar?

Setting up the Project and Dependencies.

Creating the Bottom App Bar.

Adding Icons to the Bottom App Bar.

Handling Click Events on the Bottom App Bar.

Expert UI enhancement on the Bottom app bar

How to use BottomBar with Compose Scaffold

Conclusion

Write A Comment Cancel Reply

ExoPlayer in RecyclerView in Android

Play Youtube Video in ExoPlayer

Automatic SMS Verification Android

Foreground Service Android Example

How to Implement Bottom App Bar in Compose

What is a Bottom App Bar?

Setting up the Project and Dependencies.

Creating the Bottom App Bar.

Adding Icons to the Bottom App Bar.

Handling Click Events on the Bottom App Bar.

Expert UI enhancement on the Bottom app bar

How to use BottomBar with Compose Scaffold

Conclusion

Related Posts

Create a splash screen in Android without using an extra activity

Create a Dropdown Menu in Jetpack Compose

Create a Scrollable Column in Jetpack Compose

Write A Comment Cancel Reply