Small Android project demonstrating some navigation components for Jetpack Compose.

Overview

NavLab

Small Android project demonstrating some navigation components for Jetpack Compose. Created this for presenting about this topic for a GDG meetup.

The App

The consists of simple color screens. It implements bottom tab navigation, navigating within screens, a nav drawer and a modal sort of navigation that presents over the entire app.

Color Screen

Simple screen that is just the color of the rgb values passed.

@Composable
fun ColorScreen(color: Color) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color)
    )
}

Parent

Once launched, the ParentScreen is the top most composable container. It is simply a NavHost that returns the HomeScreen as its start destination. It also passes its navController down to the HomeScreen so if needed, a composable can be presented at a root level. In this app, the Drawer (discussed later) presents the Green and Pink screen in this form.

Home Screen

The HomeScreen handles the presentation of the home screen that includes the bottom nav items. There are 4 bottom nav items. The black and red screens are simple ColorScreens.

Choices

The Color Choices screen presents a list of a few items that further navigate to a new ColorScreen.

Maker

The Color Maker screen allows you to create a custom RGB value and pushes a Custom Color Screen passing those values via arguments.

Drawer

The Drawer contains of a Pink and Green ColorScreen. Once clicked, these are presented via the navController from the Parent screen, and thus is able to present over the Home screen.

Structure

Here is a diagram that shows the structure of the app too.

Why does the nav button rotate when you're on the ColorMaker screen

Its because instead of creating another navController for this screen, I used the homeNavController purely for experimenting with the currentBackStackEntryAsState.

todo

Will add more explaination around the varous navHosts and navControllers. Cleanup code too.

You might also like...
Kapture - A small library for Jetpack Compose to capture Composable content to Android Bitmap

kapture A small utility library for Jetpack Compose to capture Composable conten

Navigation-Compose - A sample to showcase Kotlin, MVVM, Hilt, Coroutines, StateFlow, Jetpack compose

Navigation-Compose A sample to showcase Kotlin, MVVM, Hilt, Coroutines, StateFlo

A Simple Blog App using Jetpack Compose, Flow, Navigation Compose, Room and Firebase
A Simple Blog App using Jetpack Compose, Flow, Navigation Compose, Room and Firebase

BlogCompose A Simple Blog App using Jetpack Compose, Flow, Navigation Compose, Room and Firebase Instructions Download your Firebase configuration fil

This repo contains components built with Jetpack Compose for the Microsoft Surface Duo.

Surface Duo Jetpack Compose SDK This repo contains components built with Jetpack Compose for the Microsoft Surface Duo and other large screen and fold

A Collection of major Jetpack compose UI components which are commonly used.🎉🔝👌
A Collection of major Jetpack compose UI components which are commonly used.🎉🔝👌

SSComposeCookBook A Collection of major Jetpack compose UI components which are commonly used. Introduction Jetpack Compose is a modern toolkit for bu

JetStrap - Ready-Made Jetpack Compose Components

JetStrap Ready-Made Jetpack Compose Components Installation implementation "com.

🚀 Android project template with Compose, MVVM, Hilt and Navigation
🚀 Android project template with Compose, MVVM, Hilt and Navigation

compose-android-template An Android project template with MVVM, Hilt, Navigation and Compose ✍️ Author 👤 theapache64 Twitter: @theapache64 Email: the

Android Sample Kotlin+ MVI + Jetpack compose + Coroutines + Retrofit + Hilt  + Room + Navigation component
Android Sample Kotlin+ MVI + Jetpack compose + Coroutines + Retrofit + Hilt + Room + Navigation component

MVIComposeSample Android Sample app to show user latest movies implementing MVI + Clean Architecture using kotlin & Jetpack compose following solid an

Android Jetpack is a set of components, tools and guidance to make great Android apps.

Android Jetpack is a set of components, tools and guidance to make great Android apps. They bring together the existing Support Library and Architecture Components and arrange them into four categories.

Owner
Parshav
Parshav
Small code generating library for safe Jetpack Compose navigation with no boilerplate.

Compose Destinations A KSP library to use alongside compose navigation. It reduces boilerplate code and is less error-prone since passing arguments be

Rafael Costa 1.7k Nov 23, 2022
Android App made by Jetpack Compose Components with Kotlin, MVVM Pattern, Multi Module, Navigation, Hilt, Coroutines, Retrofit and cached data by Room

Android App made by Jetpack Compose Components with Kotlin, MVVM Pattern, Multi Module, Navigation, Hilt, Coroutines, Retrofit and cached data by Room

Yogi Dewansyah 13 Aug 31, 2022
Android App made by Jetpack Compose Components with Kotlin, MVVM Pattern, Multi Module, Navigation, Hilt, Coroutines, Retrofit and cached data by Room

Mobile Banking Android App made by Jetpack Compose Components with Kotlin, MVVM Pattern, Multi Module, Navigation, Hilt, Coroutines, Retrofit and cach

Yogi Dewansyah 13 Aug 31, 2022
Jetpack-compose-uis - A collection of some UIs using Jetpack Compose. built using Katalog

Jetpack Compose UIs This is a collection of some UIs using Jetpack Compose. It i

Mori Atsushi 4 May 1, 2022
A library that enables Safe Navigation for you Composable destinations when using Jetpack Compose Navigation

A library that enables Safe Navigation for you Composable destinations when using Jetpack Compose Navigation

Roman Levinzon 59 Oct 19, 2022
Carol 12 Sep 25, 2022
Here you can try out Kotlin Multiplatform and Jetpack Compose with some other cutting-edge technologies.

wire The Wire is a Kotlin Multiplatform sample project, currently supporting Android and Windows. Tools And Technolagies Architecture: MVVM MultiThrea

Ali Rezaiyan 9 Aug 16, 2022
Some tips for developers who will involve Jetpack Compose in new APPs

Compose TakeAway 给即将用Jetpack Compose开发APP的开发人员 1. Jetpack Compose vs Xml Pros: 声明式UI,纯kotlin 代码更少 可直接兼容现有View - 双向兼容 性能更好(measure次数减少...) UI自定义更简单 没有a

Le 2 Mar 24, 2022
Google CodeLab: learn how to use some Animation APIs in Jetpack Compose.

Compose Animation Codelab This folder contains the source code for the Compose Animation codelab. In this codelab, you will learn how to use some Anim

Ryan Wong 0 Dec 26, 2021
Forget about bunch of XML files for maintaining UIs. Jetpack Compose is Android’s modern toolkit for building native UI. Here is a small example to get started.

Jetpack Compose Sample Description This repository is to get started with new Jetpack Compose Toolkit for Android. By using Jetpack Compose you no nee

Simform Solutions 39 Nov 10, 2022