Foldable Support

Foldable Support (2.1)

In the 2.1 release, we added several features to help manage foldable devices.

Shared Values

We added a new mechanism to inject runtime values in ConstraintLayout -- this is intended to be used for system-wide values, as all instances of ConstraintLayout are able to access the value.

In the context of Foldable devices, we can use this mechanism to inject the position of the fold at runtime:

ConstraintLayout.getSharedValues().fireNewValue(R.id.fold, fold)

You can look at the the Foldable example to see how we capture the position of the fold using the WindowManager library and inject it in ConstraintLayout.

DeviceState.POSTURE_HALF_OPENED -> {
  // The foldable device's hinge is in an intermediate position between opened and closed state.
 var fold = foldPosition(motionLayout, windowManager.windowLayoutInfo.displayFeatures)
   ConstraintLayout.getSharedValues().fireNewValue(R.id.fold, fold)
}
DeviceState.POSTURE_OPENED -> {
  // The foldable device is completely open, the screen space that is presented to the user is flat.
  ConstraintLayout.getSharedValues().fireNewValue(R.id.fold, 0);
}

fireNewValue() takes an id representing the value as first parameter and the value to inject as second parameter.

Reactive Guide

One way to take advantage ot a Shared Value in a layout, without having to write any code, is to use the ReactiveGuide helper. This will position a horizontal or vertical guideline according to the linked Shared Value.

<androidx.constraintlayout.widget.ReactiveGuide
    android:id="@+id/fold"
    app:reactiveGuide_valueId="@id/fold"
    android:orientation="horizontal" />

It can then be used as a you would with a normal guideline.

ReactiveGuide inside a MotionLayout

ReactiveGuide also supports two useful attributes when used inside a MotionLayout:

​ app:reactiveGuide_animateChange="true|false"

and

​ app:reactiveGuide_applyToAllConstraintSets="true|false"

The first one will modify the current ConstraintSet, and animate the change automatically. The second one will apply the new value of the ReactiveGuide position to all ConstraintSets in the MotionLayout

MotionLayout with Foldable

We added several features in MotionLayout in 2.1 that helps morphing statehelping morphing state, which help a lot