SlidingPaneLayout dual-screen and foldable features
SlidingPaneLayout is a control that uses Jetpack Window Manager to adapt to dual-screen and foldable devices. It can show two panes side-by-side (if there's room), otherwise only the first pane will be shown and the second can be revealed by the user (sliding from the side) or programmatically. It adapts to foldable and dual-screen devices by aligning the panes on either side of the hinge or fold.
Single-screen devices, including tablets, will show both panes if the width of the content in each fits side-by-side on screen. If the either pane's contents are too wide, the first pane is shown full screen and the second pane can be shown programmatically or by sliding.
On the Surface Duo, on a single screen the control behaves like any other device, where the panes will be side-by-side if they fit, otherwise shown independently. When the app is spanned, SlidingPaneLayout will automatically put each pane on a screen, on either side of the hinge. In dual-landscape mode, SlidingPaneLayout does not alter the layout and it behaves like a single tall screen - in this scenario the individual panes should scroll or otherwise ensure their content isn't hidden.
Add dependencies
To use SlidingPaneLayout in your project, update the build.gradle file.
Ensure the project is compiling with API level 31:
compileSdk 31
Add these dependencies so we can access the APIs needed:
dependencies { implementation "androidx.slidingpanelayout:slidingpanelayout:1.2.0" }
SlidingPaneLayout in your user interface
This XML snippet can be used to add the SlidingPaneLayout to a view - it should be the root (or top-level) element on the screen:
<androidx.slidingpanelayout.widget.SlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/sliding_pane_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- first child -->
<!-- second child -->
</androidx.slidingpanelayout.widget.SlidingPaneLayout>
The XML below (from this sample) shows a LinearLayout
being used for the first pane and a FragmentContainerView
for the second pane:
<androidx.slidingpanelayout.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/sliding_pane_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/side_pane_content"
android:layout_width="400dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@android:color/holo_orange_dark"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:text="Side Pane"
android:textSize="30sp"
android:textStyle="bold" />
<!-- other elements removed for clarity-->
</LinearLayout>
<androidx.fragment.app.FragmentContainerView
android:id="@+id/detail_container"
android:name="com.cesarvaliente.slidingpanelayout_sample.ContentPaneFragment"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/holo_red_dark" />
</androidx.slidingpanelayout.widget.SlidingPaneLayout>
This screenshot shows how the above XML works on the Surface Duo when the app is spanned:
On a single-screen device (whether its a phone or a tablet) the two panes are laid out according to the size rules for SlidingPaneLayout: if they can both fit in the view according to their required widths, they'll show side-by-side. If they cannot fit in the view, the first pane is shown and the second pane can be programmatically shown or dragged into view (unless programmatically blocked).
Samples
Code on this page comes from this SlidingPaneLayout demo app.
The eBook Reader, TwoDo, and TravelPlanner apps on the samples page all use SlidingPaneLayout to create real-world user interface examples.
Google also updated their Trackr sample with SlidingPaneLayout to provide an adaptive single-screen, dual-screen, foldable, and large screen user experience.