WhatsApp Clone — Jetpack Compose — Home

Pradyot Prakash
2 min readAug 31, 2021
Photo by Scott Webb on Unsplash

After successful login user is move to the home page where all the main functionality can be access. Let’s implement a bottom navigation bar in the home page for better navigation.

Home page

To create the bottom navigation bar I took the help of this article https://johncodeos.com/how-to-create-bottom-navigation-bar-with-jetpack-compose/. It explain all the process on how to implement the bottom navigation bar in Jetpack Compose.

Few changes I have done to match up the UI is,

For the HomeAppBar you can see that I am passing the title, which is take from the HomeViewModel. The title state changes whenever user choose any item from the bottom nav bar. Instead of having top bar in each page I have put it in the HomeView itself.

HomeView has a HomeBottomNavigation which handles all the logic and UI related to the navigation between different sub-pages. And the NavController is the one which handles the page change whenever there is an action on any one of the items.

For showing the page HomeNavigation is used. So depending on which route is selected HomeNavigation shows that page as a fragment on the HomeView.

Now let’s check the profile details page. This will shows the details of the current user. For this go to WhatsApp Clone — Jetpack Compose — Profile Details.

--

--