From top to bottom...bars
Tags: android, jetpackcompose
Published: 2021-02-23 15:26:55

Welcome back to the third installment of *(de)composing action bars*. Today we look at something like this:

![A bottom bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46fu3z0l4ikp7ryx7u1v.png)

We used to implement it in xml. First the layout:

```xml
<com.google.android.material.bottomnavigation.BottomNavigationView
  android:id="@+id/bottom_navigation"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintStart_toStartOf="parent"
  app:menu="@menu/bottom_navigation_menu" />
```

Then the content:

```xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:id="@+id/page_home"
    android:enabled="true"
    android:icon="@drawable/ic_baseline_home_24"
    android:title="@string/home"/>
  <item
    android:id="@+id/page_info"
    android:enabled="true"
    android:icon="@drawable/ic_baseline_info_24"
    android:title="@string/info"/>
</menu>
```

According to its [docs](https://developer.android.com/reference/com/google/android/material/bottomnavigation/BottomNavigationView), `BottomNavigationView` represents

> a standard bottom navigation bar for application. 
> It is an implementation of material design bottom
> navigation. 
> 
> Bottom navigation bars make it easy for users to 
> explore and switch between top-level views in a single tap.
> They should be used when an application has three to five
> top-level destinations.

Let's see how to do this with Jetpack Compose. If you start typing `Bottom` you get a plethora of choices:

![Composables and classes starting with Bottom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wcqk8upqeqoumk4xloqz.png)

So there is the `BottomAppBar()` composable, which fits nicely in `Scaffold()`. The [docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#BottomAppBar(androidx.compose.ui.Modifier,%20androidx.compose.ui.graphics.Color,%20androidx.compose.ui.graphics.Color,%20androidx.compose.ui.graphics.Shape,%20androidx.compose.ui.unit.Dp,%20kotlin.Function1)) say:

> A `BottomAppBar` displays actions relating to the current
> screen and is placed at the bottom of the screen. It can
> also optionally display a `FloatingActionButton`, which is
> either overlaid on top of the `BottomAppBar`, or inset, 
> carving a cutout in the `BottomAppBar`.

It may contain:

- Navigation drawer control
- Floating action button (FAB)
- Action icons
- Overflow menu control

Let's bake a simple one:

```kotlin
bottomBar = {
  BottomAppBar {
    IconButton(onClick = { }) {
      Icon(Icons.Filled.Menu, contentDescription = null)
    }
    Spacer(Modifier.weight(1f, true))
    IconButton(onClick = { }) {
      Icon(Icons.Filled.Favorite, contentDescription = null)
    }
    IconButton(onClick = { }) {
      Icon(Icons.Filled.MoreVert, contentDescription = null)
    }
  }
}
```

![A BottomAppBar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yaxs2wm19ln3tviyeqx.png)

You may be wondering why I put in `Spacer(Modifier.weight(1f, true))`, which moves the actions to the end of the `BottomAppBar`.

According to the [Material Design docs](https://material.io/components/app-bars-bottom/#anatomy) bottom app bars have different layouts based on the presence of a floating action button and its position in the bar. They dictate the number of actions that can be included in the bar.

**Centered FAB**

> Use bottom app bars on home screens that feature a
> navigation menu control and a prominent action (such as a
> FAB). A minimum of one and a maximum of two additional 
> actions can be placed on the opposite side of the bar.

**End FAB**

> Use a FAB on secondary screens that require a floating
> action button and three to four additional actions.

**No FAB**

> When no floating action button is needed, the bottom app
> bar can accommodate a navigation menu icon and up to four
> actions aligned on the opposing edge.

While this certainly looks beautiful this is not what my introductory example from the old world did. Please recall it was about toplevel navigation destinations.

There is a `BottomNavigation()` composable. To conclude this post, let's see how it works. According to [the docs](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#BottomNavigation(androidx.compose.ui.Modifier,%20androidx.compose.ui.graphics.Color,%20androidx.compose.ui.graphics.Color,%20androidx.compose.ui.unit.Dp,%20kotlin.Function1))

> `BottomNavigation` is a component placed at the bottom of
> the screen that represents primary destinations in your
> application.
>
> `BottomNavigation` should contain multiple
> `BottomNavigationItem`s, each representing a singular
> destination.

This translates to something like this:

```kotlin
BottomNavigation() {
  BottomNavigationItem(
    icon = { Icon(Icons.Filled.Info, contentDescription = null) },
    label = { Text("About") },
    selected = false,
    onClick = { }
  )
  BottomNavigationItem(
    icon = { Icon(Icons.Filled.Settings, contentDescription = null) },
    label = { Text("Settings") },
    selected = false,
    onClick = { }
  )
}
```

![A BottomNavigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xo0hh2lx8prjw7wfqjty.png)

This for sure looks great. How to actually implement navigation may, however, be worth another post. 😀 Have you used the composables I described here in your apps? I would love to hear your thoughts in the comments.

---

[source](https://github.com/tkuenneth/android-demos/tree/master/compose/ScaffoldDemo)