Snackbar for dual-screens

Andrei Cirja

Hello Android developers!

We are excited to announce the release of our latest Android component: SnackbarContainer.

The new SnackbarContainer allows you to place a Snackbar on a specific display area on foldable devices, while keeping the original Snackbar behaviour in conventional single screen devices.

The SnackbarContainer will help you to show a Snackbar at the bottom of the first screen, second screen, or across the entire display area.

This additional flexibility allows you place the Snackbar where the user is currently focused to create a better user experience, especially on devices with more than one display area such as dual-screen and foldable devices.

How to add it to your project

This component is available on Maven Central and to include it in your project, add the following dependencies to your app’s build.gradle file:

dependencies {
   implementation "com.microsoft.device.dualscreen:snackbar:1.0.0-alpha1"
}

How it works

Snackbar is a way to display messages which inform users about a concrete action, usually at the bottom of the screen. Unfortunately, the material design Snackbar does not know how many display areas are available and how to display that message depending on device’s screen mode (e.g. single screen mode, dual-portrait, etc.). To fix this we’ve created a custom container that is dual-screen aware. The SnackbarContainer is actually a FrameLayout with a CoordinatorLayout as a child. Using the information from WindowManager, this component knows exactly when the app is displayed in single screen or is spanned across the entire display area. Thus, the CoordinatorLayout is moved depending on a position parameter set by the developer.

How to use the SnackbarContainer

In order to show a Snackbar, you first need to add the SnackbarContainer at the bottom of the display area:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.microsoft.device.dualscreen.snackbar.SnackbarContainer
        android:id="@+id/snackbar_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Once you have an instance of the SnackbarContainer inside the activity or a fragment, you can display the Snackbar like this:

Snackbar.make(snackbarContainer.coordinatorLayout, message, LENGTH_LONG)
    .show(snackbarContainer, position)

Where the show function is an extension function with two parameters: the snackbarContainer and the position of the Snackbar inside the screen.

The position parameter can take three values:

  • SnackbarPosition.START – the Snackbar will be displayed at the bottom of the first display area
  • SnackbarPosition.END – the Snackbar will be displayed on the second display area
  • SnackbarPosition.BOTH – the Snackbar will be displayed at the bottom of the entire display area

Here is how the Snackbar will look with different SnackbarPosition values:

SnackbarPosition.START

Surface Duo sample showing the snackbar on left screen

SnackbarPosition.END

Surface Duo sample showing the snackbar on right screen

SnackbarPosition.BOTH

Surface Duo sample showing the snackbar on both screens

Resources and feedback

You can review the dual-screen Snackbar documentation for more information. You can also try out our sample and check out all these scenarios.

The source code for the Snackbar is available on GitHub if you’re curious about the implementation or wish to contribute. Also visit the documentation for more information on all the features in the dual-screen library for Kotlin and Java developers.  

Thanks to the team – Bianca Miron, Cesar Valiente, Cristian Verdes, and Sorin Albu – for their work on this release.   

We’d love to hear from you and how you plan to incorporate this navigation component into your apps. Please reach to out using the feedback forum or message us @surfaceduodev on Twitter.   

Finally, please join us for our Surface Duo developer livestream at 11am (Pacific time) each Friday – mark it in your calendar and check out the archives on YouTube. This week we’ll have an additional stream at 13h00 European time on Friday 7th April to discuss the Snackbar component!

0 comments

Leave a comment