Snackbar

Article
05/05/2022

Important

This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. Microsoft makes no warranties, express or implied, with respect to the information provided here.

Overview

The SnackbarContainer is a custom FrameLayout with a CoordinatorLayout as a child that can be used as a holder for the Snackbar. This container is foldable aware, and can be used on foldable devices but also on regular devices. The message will be displayed every time at the bottom of the screen at fixed 25 pixels from the edges of the screen.

Using the information from the WindowManager, this container moves its CoordinatorLayout child where the developer needs, on the first screen, second screen, or the entire screen. For other scenarios, you can use the Snackbar directly.

How to import the library into your project

Ensure the mavenCentral() repository is in your top-level build.gradle file:

 allprojects {
     repositories {
         google()
         mavenCentral()
      }
 }

Add this dependency to the module-level build.gradle file:

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

If your project is created using Java, you will need to add a kotlin-stdlib dependency to your module-level build.gradle file (this is because the Snackbar library was created using Kotlin).
```
dependencies {
   implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:$kotlin_version"
}
```

How to show a dual-screen Snackbar

Once the package has been added, follow these steps to implement the dual-screen Snackbar:

Add the SnackbarContainer at the bottom of the Activity or Fragment root view:

<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>

Using an instance of the SnackbarContainer, you can display the Snackbar using this code snippet. The snackbarContainer parameter is an instance of SnackbarContainer, the message parameter is the text to be displayed, and LENGTH_LONG is the display duration. The show function is an extension function used to display the Snackbar inside the given SnackbarContainer at the specified position.
- Kotlin
- Java
```
Snackbar
    .make(snackbarContainer.coordinatorLayout, message, LENGTH_LONG)
    .show(snackbarContainer, position) 
```
```
Snackbar snackbar = Snackbar.make(snackbarContainer.getCoordinatorLayout(), message, LENGTH_LONG);
SnackbarKt.show(snackbar, snackbarContainer, position)
```