Crease

compose multiplatform · android foldables · iphone duo

Layouts that know where the fold is.

Crease reads the hinge and the fold on Android foldables and on iPhone Duo. Your Compose layouts split at the fold, stand up in tabletop and keep buttons out of the crease, from one shared codebase.

get started see the examples
gradle implementation("io.github.jantursky:crease:1.3.0")

The two sample apps with every control: posture, hinge angle, fold width, the camera cutout and an overlay of what Crease reports.

compatibility

One API, every Compose target.

  • Kotlin 2.4+Kotlin Multiplatform, shared in commonMain
  • Compose Multiplatform 1.12+and Jetpack Compose on Android
  • Android 6.0+folds through Jetpack WindowManager, the angle from API 30
  • iOS 27.1+ on iPhone Duobuilds with Xcode 26, turns itself off on older systems
  • Desktop JVMmacOS, Windows and Linux, no hinge: provide a state to preview
  • Web, Kotlin/Wasmevery modern browser, no hinge, like this page

examples

Fold it, then read the code.

Each example runs in a small simulated foldable. Change the posture and the hinge angle, then open the source: it is the file that runs above it.

Two panes, either side of the fold

FoldAwareTwoPane puts the list on one side of a separating fold and the detail on the other. Flat, the phone shows the list only.

Tabletop

TabletopLayout shows the video above a horizontal fold and the controls below it. In any other posture the two stack.

Pick the fallback

Without a fold, TwoPaneFallback.Stacked puts the chart above its numbers. Fold the device and they move side by side.

Step around the crease

Modifier.avoidFold() keeps a dialog on the larger side of the fold, so no button sits in the crease.

Read the hinge

rememberHinge() gives the angle and the status, and rememberFoldState() the posture derived from them.

Watch the posture change

rememberPostureTransition() gives the posture before and after the latest change, and rememberFoldStateFlow().postures() counts the changes. Fold the device and tilt it: the angle alone changes nothing.

React to the angle

The angle is a plain number, so anything can follow it. This lamp dims as the hinge closes and goes out when the device shuts.

Everything about the fold

FoldState as values: bounds in window pixels, orientation, whether the fold separates and occludes, and the camera cutouts. Try the fold width and the cutout.