We now have seen contextual mode in lots of apps like Whatsapp, Gmail, Contacts and so forth whereas choosing chats, emails, or contacts utilizing an extended press. It offers a brief UI that shows a menu of contextual actions.
In a conventional view system, ActionMode is the popular approach to show contextual actions. On this publish, we are going to discover how the identical could be achieved utilizing Jetpack Compose.
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.
With this we’ve the next consequence:
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:
Add the dependency:
Change the standing bar shade:
With this variation, we get the next consequence:
Now we’ve a completely purposeful contextual mode for our toolbar. However it might be good to make this transition of colours clean utilizing some animations. Allow us to attempt to do this subsequent.
Allow us to use
updateTransition API to animate the colour modifications. Substitute the colour variables with the next initialisation:
This results in following consequence:
With this, the colour change is now animated but it surely seems to be like there are two completely different transitions. It is because the standing bar shade change is completed in a aspect impact. To repair this, we have to acquire full management of the standing bar area. As soon as we’ve that management, standing bar shade change could be carried out in the identical method as that of background and content material shade.
Add the dependency:
Get edge to edge management of the system area by including following code in
onCreate earlier than calling
Wrap the compose hierarchy with
ProvideWindowInsets. This allows us to make use of varied modifiers offered by the insets library. Learn extra here.
Replace the aspect impact to set clear standing bar shade. That is vital to make it possible for content material behind the standing bar (we are going to draw it in a second) is seen:
shade = Shade.Clear,
darkIcons = !isContextual
Add following modifier to the TopAppBar invocation:
. modifier = Modifier.background(statusBarColor).statusBarsPadding()
This provides a padding equal to standing bar top above prime app bar and applies desired shade to it.
With these modifications, we get the next consequence:
Now the change occurs in a single transition, however now we’ve undesirable prime elevation in prime app bar seen in regular mode. Jetpack Compose presently doesn’t present any method to specify the elevation on a selected edge. Allow us to use a workaround to repair this.
Create a customized modifier that applies solely backside elevation:
Apply this modifier to the High App Bar composable:
. modifier = Modifier.background(statusBarColor).statusBarsPadding().bottomElevation()
With these modifications, we bought our last desired consequence as observe:
With this in place, we now have the totally purposeful contextual mode of prime app bar applied. You can too attempt to apply customized animation spec whereas calling
animateColor if you’d like some customized shade change animation
- Construct a customized prime app bar element that takes
isContextualboolean 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