Jetpack Compose Basics - Snackbar
Technology
2
 min read
October 19, 2021

Jetpack Compose Basics - Snackbar

Peter Šuly
Peter Šuly
Android developer

Snackbar is UI component that provides brief message at the bottom of the screen. It is used to inform users that app has performed action or will perform action. Only one snackbar can be used at a time and has to contain only single action which is optional.

This simple component consist of message (1), container (2) and optional action button (3). Message can be maximally 2 lines long.

Anatomy of snackbar as stated in Material design guidelines
Anatomy of snackbar as stated in Material design guidelines https://material.io/components/snackbars#anatomy
Example of snackbar usage
Example of snackbar usage

Snackbar in Jetpack Compose

Snackbar

In Jetpack Compose there is composable function named Snackbar. It's just visual representation of snackbar as defined in Material design guidelines, without show or hide options and without animations. Usually you will need to use SnackbarHost.

SnackbarHost

This component is responsible for showing(or hiding snackbar after defined time) and it's fade animations. Simply said, SnackbarHost is wrapper of Snackbar mentioned above. It takes 3 parameters

  • modifier - used for changes from the caller side
  • snackbar - composable function that obtains SnackbarData, defaultly just Snackbar composable. If you are curious, SnackbarData is interface consisting of message, action label and duration of snackbar
  • hostState - this parameter is covered below

SnackbarHostState

As descriptive name of class suggest, it is used to control state of SnackbarHost. As Material design guideline mentions, only one snackbar should be showed at a time, others are queued and will show later by SnackbarHostState.

Only mandatory parameter of SnackbarHostState is hostState that can be obtained simply by it's constructor. Then you can just place SnackbarHost wherever you want. But snackbar still doesn't show, so how to do that?

How to show snackbar in Jetpack Compose?

Snackbar is showed as reaction on something. In our case "something" is click on button. ShowSnackbar is suspend function thus coroutine scope is needed. You need to remember coroutine scope outside of onClick function because when the scope is cancelled the snackbar is removed from the queue.

Custom snackbar in Jetpack Compose

Key here is to modify snackbar parameter of SnackbarHost. Without our modification default Snackbar composable is used. With code below, our design of snackbar is used but default behavior of snackbar is retained.

Custom snackbar from example above

More articles from the Jetpack Compose Basics series:

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.