Loading...
Home
  • Tech Blogs
  • Videos
  • Conferences
    • Droidcon News
    • Upcoming Conferences
    • Become a Partner
    • Past Events
    • Keep Me Informed
    • Diversity Scholarships
  • Community
    • droidcon Team
    • How to Hold a Droidcon
  • Android Careers
Sign In

Global CSS

 

Implement Bottom Bar Navigation in Jetpack Compose

In this article, we would explore the new navigation component released for Jetpack Compose and implement a bottom bar navigation system.

 

 
Ziv Kesten
I am a mobile developer, an android enthusiast and a drone lover (Secretly, don’t tell the wife)
Published: November 24, 2020
Tweet
Share
 

 

Navigation in Jetpack Compose has been somewhat complicated to implement up until the latest release from the Compose toolkit team.

Navigating between Android app screens was quite troublesome for years, using fragments and activities, with lifecycles and process deaths that catch you by surprise, I remember scanning through enormous code bases trying to find where one screen was replaced by another and why.
The navigation component, which was released in late 2018, was a great step up and allowed developers to create complicated storyboards with flows of screens, centering all of their data in XML graphs and providing actions and destinations as more friendly terms for navigation.

 

Then came Jetpack Compose

 

Jetpack Compose is Android’s modern toolkit for building native UI.

 

It’s built with Kotlin and with performance and less code as the main objectives, basic knowledge of Compose is required for implementing the approaches suggested in this article.
I recommend starting with the Android Compose pathways.

 

Navigation with Jetpack Compose

At first, Compose did not offer any native way of navigating screens, we had to implement our own navigation system, keeping track of back stacks and back button clicks, and this approach was very difficult to maintain as the number of screens grew and the app scaled.

recently, the toolkit team released the first version of the navigation library for Compose, and that means less code and better performance.

 

Let’s get started

We start by adding the Compose navigation dependency to our build.gradle file:

 

 

We are going to build a small cute app in the Halloween spirit, it will have four screens to which we can navigate with a bottom bar, It’s gonna look like that:

 

Image for post

 

You can fork or clone the app from Github.

 

Composing time

Our entry point to the app is a Compose activity that contains one composable function called MainScreen.

 

 

MainScreen will contain a navigation bar and another composable function that will represent a screen that can display some spooky animation.

MainScreen is implemented like this:

 

 

Let’s break it down, the first part is the navController,

 

val navController = rememberNavController()

 

We create a val using the rememberNavController method provided by the navigation library.
Remember is a concept from the Compose world and is used for holding state, more on states in Jetpack Compose can be learned here.

Next, we declare our navigation items:

 

val bottomNavigationItems = listOf(
    BottomNavigationScreens.Frankendroid,
    BottomNavigationScreens.Pumpkin,
    BottomNavigationScreens.Ghost,
    BottomNavigationScreens.ScaryBag
)

 

These are contained in a sealed class and hold three parameters:

  • A String to represent a route.
  • A String resource for the name on the navigation button in the bottom bar
  • A VectorAsset for the Icon.

 

 

Then we just create a Scaffold with only a bottom bar for this specific spooky app example:

 

Scaffold(
    bottomBar = { 
        SpookyAppBottomNavigation(navController, bottomNavigationItems)
    },
) {
    MainScreenNavigationConfigurations(navController)
}

 

The Navigation bottom bar

Now let’s implement SpookyAppBottomNavigation, It’s a BottomNavigation with four BottomNavigationItem created from the list we declared in the first part.

 

 

So most of the code is straight forward, we take the navController and the list of navigation items, and while iterating over them, we declare the icon, label, selected state, and onClick lambda for each.

The selected state is determined by the current route:

 

selected = currentRoute == screen.route

 

the screen is the model for which we are creating the current navigation item we are on, so what is this currentRoute?
In the previous section, we declared the screens with string properties called “route” this route string is how the navigation library tags the screens on its back stack, and the current route is the screen visible to us at this moment.

But how can we get the current route?

Luckily the folks at the navigation team provided us with a NavBackStackEntry class that holds the screen routes, we can access it like this:

 

 

So if we have the navController we can get the current back stack entry as a state by using:

 

navController.currentBackStackEntryAsState()

 

Then we just extract the current route string representation from its arguments property using the KEY_ROUTE constant:

 

return navBackStackEntry?.arguments?.getString(KEY_ROUTE)

 

So the last thing to implement is the onClick lambda which is responsible in our case to navigate us to the screen associated with our specific navigation item:

 

if (currentRoute != screen.route) {
    navController.navigate(screen.route)
}

 

Notice how we check if the item we clicked is the current route, in that case, do not wish to perform any navigation.

The last and most important part is providing the system with the information on where it should navigate given a specific route, so in the trailing lambda of the Scaffold we had a function that handles that:

 

MainScreenNavigationConfigurations(navController)

 

Let’s implement it:

 

 

So that function is just a wrapper for a function provided by the navigation library called NavHost, it will replace the XML we used to write for navigation in the old view system.
It takes the navController and a starting destination, we provided it with our Frankendroid’s route as the starting destination.
Remember that destinations are represented as routes that are of type String.

Now We define a composable for each route:

 

composable(BottomNavigationScreens.Frankendroid.route) {
    ScaryScreen(ScaryAnimation.Frankendroid)
}

 

As you can see what we are doing here is telling the NavHost to run the ScaryScreen function with the Frankendroid animation when we navigate to the BottomNavigationScreens.Frankendroid’s route.

If you play around with the app now you can see how pressing the back button pops the back stack to the latest screen we were on!

 

Image for post

 

Full code available here.

Wasn’t that fun?
In the next article, I will cover animating the transitions between the screens and using SafeArgs to pass data between screens as well.

Stay tuned!

 

 

 

Tags: Jetpack Compose, Android, Android App Development, Navigation Component, AndroidDev

 

View original article at: 


 

Originally published: November 02, 2020

Android News
Evolution of Android Update SystemEvolution of Android Update System
Evolution of Android Update SystemEvolution of Android Update System

By Ivan Kuten

So, how can you update Android on mobile devices? While developing software for Smart TVs and Android-based set-top boxes, we’ve narrowed it down to four ways, discarding some very exotic options:

By ProAndroidDev -
Android News
Happy Railway
Happy Railway

By Hadi Lashkari Ghouchani

This post is on the tail of Railway Oriented Programming in Kotlin by Antony Harfield. So you need to read it first and continue here. As it’s obvious I really liked it and tried it out. It needs every process have a result like

By ProAndroidDev -
Android News
Unit Tests and Concurrency
Unit Tests and Concurrency

By Stojan Anastasov

Once Retrofit added RxJava support, RxJava became my go-to concurrency framework for writing Android apps. One of the great things about RxJava is the excellent testing support. It includes TestObserver, TestScheduler, RxJavaPlugins so you can switch your schedulers in tests.

By ProAndroidDev -
Android News
When Compat libraries will not save you
When Compat libraries will not save you

By Danny Preussler

And why you should avoid using the “NewApi” suppression! The idea of “Compat” libraries was probably one of the key aspects of Android dominating the mobile space. Other than with iOS, Android users often could not update their operating system after a new version launch, simply as their phones won’t allow them to, the Android problem of fragmentation.

 

By ProAndroidDev -
droidcon News

Tech Showcases,

Developer Resources &

Partners

/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/home-details/EmployerBrandingHeader
EmployerBrandingHeader
https://jobs.droidcon.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/jobs-droidcon/jobs.droidcon.com
jobs.droidcon.com

Latest Android Jobs

http://www.kotlinweekly.net/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/kotlin-weekly/Kotlin Weekly
Kotlin Weekly

Your weekly dose of Kotlin

https://proandroiddev.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/pad/ProAndroidDev
ProAndroidDev

Android Tech Blogs, Case Studies and Step-by-Step Coding

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
Zalando

Meet one of Berlin's top employers

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
Academy for App Success

Google Play resources tailored for the global droidcon community

Follow us

Team droidcon

Get in touch with us

Write us an Email

 

 

Quicklinks

> Code of Conduct

> Terms and Conditions

> How to hold a conference

> FAQs

> Imprint

Droidcon is a registered trademark of Mobile Seasons GmbH Copyright © 2020. All rights reserved.

powered by Breakpoint One