Building Contextual Mode of Top App Bar in Jetpack Compose | by Tushar Kathuria | Feb, 2022

Creating customized Android UIs simply bought a complete lot easier

Photograph by Ales Nesetril on Unsplash

Properly, in case you are fascinated with immediately leaping to code, here is the hyperlink to the exercise file that comprises the code for attaining the above consequence.

This publish assumes that you just already learn about Jetpack Compose and the Materials High App Bar implementation. Seek advice from the next hyperlinks for a recap:

We’ll begin by making a Scaffold with a prime app bar and a button that toggles the contextual mode. On button click on, app bar colours are toggled and share motion is added to point the contextual mode.

Allow us to additionally change the standing bar shade when contextual mode is toggled. For this we are going to use Accompanist’s System UI Controller:

implementation "com.google.accompanist:accompanist-systemuicontroller:$accompanist_version"

Allow us to use updateTransition API to animate the colour modifications. Substitute the colour variables with the next initialisation:

We’ll use the mixture of setDecorFitsSystemWindows API and the Accompanist’s Insets to get management of the area behind standing bar.

implementation "com.google.accompanist:accompanist-insets:$accompanist_version"
WindowCompat.setDecorFitsSystemWindows(window, false)
setContent 
ProvideWindowInsets
.
.
.

SideEffect 
systemUiController.setStatusBarColor(
shade = Shade.Clear,
darkIcons = !isContextual
)
TopAppBar(
.
.
.
modifier = Modifier.background(statusBarColor).statusBarsPadding()
)

Allow us to use the workaround urged by Philip Dukhov to unravel this concern.

TopAppBar(
.
.
.
modifier = Modifier.background(statusBarColor).statusBarsPadding().bottomElevation()
)
  • Construct a customized prime app bar element that takes isContextual boolean parameter. It will allow us to make use of it throughout all screens of the app
  • Help darkish theme by utilizing semantic colours from theme as a substitute of hardcoded colours

More Posts