{"id":2373,"date":"2022-04-07T10:49:10","date_gmt":"2022-04-07T17:49:10","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=2373"},"modified":"2022-04-07T10:49:10","modified_gmt":"2022-04-07T17:49:10","slug":"snackbar-dual-screen","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/snackbar-dual-screen\/","title":{"rendered":"Snackbar for dual-screens"},"content":{"rendered":"

Hello Android developers!<\/p>\n

\n We are excited to announce the release of our latest Android component: SnackbarContainer<\/b>.\n<\/p>\n

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

\n The SnackbarContainer will help you to show a Snackbar at the bottom of the first screen, second screen, or across the entire display area.\n<\/p>\n

\nThis 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.\n<\/p>\n

How to add it to your project<\/h2>\n

\n This component is available on Maven Central and to include it in your project, add the following dependencies to your app’s build.gradle<\/b> file:\n<\/p>\n

dependencies {\r\n   implementation \"com.microsoft.device.dualscreen:snackbar:1.0.0-alpha1\"\r\n}<\/pre>\n
How it works<\/h2>\n
\n  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\u2019s 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<\/a> with a CoordinatorLayout<\/a> as a child. Using the information from WindowManager<\/a>, 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.\n<\/p>\n
How to use the SnackbarContainer<\/h2>\n
\n  In order to show a Snackbar<\/code>, you first need to add the SnackbarContainer<\/code> at the bottom of the display area:\n<\/p>\n
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\">\r\n    <com.microsoft.device.dualscreen.snackbar.SnackbarContainer\r\n        android:id=\"@+id\/snackbar_container\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        app:layout_constraintBottom_toBottomOf=\"parent\"\r\n        app:layout_constraintEnd_toEndOf=\"parent\"\r\n        app:layout_constraintStart_toStartOf=\"parent\" \/>\r\n<\/androidx.constraintlayout.widget.ConstraintLayout><\/pre>\n
\n  Once you have an instance of the SnackbarContainer<\/code> inside the activity or a fragment, you can display the Snackbar<\/code> like this:\n<\/p>\n
Snackbar.make(snackbarContainer.coordinatorLayout, message, LENGTH_LONG)\r\n    .show(snackbarContainer, position)<\/pre>\n
\n  Where the show<\/code> function is an extension function with two parameters: the snackbarContainer<\/code> and the position of the Snackbar<\/code> inside the screen.\n<\/p>\n
\n  The position<\/code> parameter can take three values:\n<\/p>\n