SlidingPaneLayout dual-screen and foldable features

  • Article

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.

Four Android tablets showing the SlidingPaneLayout sample in different states: split screen landscape, split screen portrait, full screen left pane, and full screen right pane

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.

Seven Surface Duo devices showing the SlidingPaneLayout sample in different states

Add dependencies

To use SlidingPaneLayout in your project, update the build.gradle file.

  1. Ensure the project is compiling with API level 31:

    compileSdk 31

  2. 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:

SlidingPaneLayout spanned across both screens of a Surface Duo

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.

Reference