ConstraintLayout

The ComposeMail sample project demonstrates practical implementations of MotionLayout within a Jetpack Compose mail client. Key implementation patterns include:

Foldable Support

Demonstrates how to adapt layouts for foldable devices using:

• MotionSceneDsl combined with MotionLayout to define motion states.
• MotionLayout() composable for rendering.
• resolveConstraintSet() to handle layout transitions.
• Using LocalFoldableInfo (via CompositionLocal) and collectFoldableInfoAsState() to provide foldable device state to the UI.

Paging Library Integration

Shows how to integrate MotionLayout with the Paging library, specifically handling data placeholders as loading indicators within a MailItem() composable.

The ConstraintLayoutManager allows you to use ConstraintLayout logic within Swing applications. This implementation is provided by the constraintLayout/swing module and depends on the constraintLayout/core module.

Note: This project is under active development, and APIs are subject to change.

When connected to a running MotionLayout in Compose, the inspector provides the following capabilities:

• Connection: Connects to any JSON MotionScene containing a Debug: { name: 'somename' } identifier.
• Inspection: Retrieve the current JSON description being used by the active MotionLayout.
• Live Editing: Edit the JSON description and push the changes back to the running application.
• Progress Scrubbing: Use a slider to manually scrub the animation progress from 0 to 1.
• Debug Drawing: Toggle the debug draw visualization for MotionLayout on or off.

The desktop/interpolationEngines module provides various mathematical engines for calculating interpolation curves, used for animations and pathing. The available engines include:

• ArcSpline: Used for Arc mode paths.
• Cycles: Core component of the KeyCycles engine.
• Easing: Core component of the KeyCycles engine.
• LinearCurve: A collection of standard easing curves.
• MonoSpline: A monotonic spline engine.
• Shilick: Provides Shilick easing.
• Spline: Traditional Spline curves.
• StepCurve: Spline-based easing curves.

When using the slider in the live inspector to scrub animation progress, the value set via the slider takes control of the progress value in the running composable.

To return control of the progress to the Compose framework (e.g., to resume automatic animations), click the reset button in the inspector application.

ConstraintLayout provides several advanced layout mechanisms:

• Chains: Provide group-like behavior along a single axis (horizontal or vertical).
• Guidelines: Reactive positioning using fixed or percentage-based offsets.
• Barriers: Virtual guidelines based on the extreme edge of multiple referenced widgets.
• Groups: Batch visibility control for multiple widgets.
• MotionLayout: A subclass of ConstraintLayout for animating transitions between constraint sets defined in MotionScenes.
• Flow: A VirtualLayout that positions widgets in a flow (horizontal/vertical) and can wrap elements to multiple lines.
• CircularFlow: A VirtualLayout for circular arrangements.

When MotionLayout items are recycled in a RecyclerView, they may lose their current animation state. To ensure a smooth user experience, you must:

1. Cache State: Before a MotionLayout is detached from its view (during recycling), capture and cache its current state (e.g., the current progress or currentState).
2. Restore State: When the ViewHolder is rebound to new data, use the cached state to restore the MotionLayout to its previous position.
3. Update State: Ensure the MotionLayout state can be updated if the underlying backend data changes.

The Validation Tool requires three components to be running simultaneously to function correctly:

1. The Android App: Run the application located in projects/ConstraintLayoutValidation on your API 25 Nexus 5 emulator using Android Studio.
2. The Validation Tool: In IntelliJ, right-click android.constraintlayout.validation.Main.java and select Run Main.main(). This launches the Java Swing GUI on your local machine.
3. ADB Port Forwarding: Enable communication between the tool and the Android app by running the following command in your terminal:

adb forward tcp:4242 tcp:4242

You can publish the library to a local offline M2 repository or a specified remote repository using the following methods:

1. Local Build: Use the provided script to compile and publish to your local offline M2 repository.
2. Custom URI: Specify a local path or a remote URL using the -Drepo property with the publish task.

Note: Ensure your environment variables are set as described in the build guide before running these commands.

# Compile and publish to local offline M2 repository
./localBuild.sh

# Publish to a specific local path
./gradlew -Drepo=/path/to/repo publish

# Publish to an external remote repository
./gradlew -Drepo=https://com.mycompany/repo publish

The Grid Helper in ConstraintLayout for Compose allows you to manage complex grid-based layouts. You can implement it using two primary syntaxes:

1. DSL Syntax: A Kotlin-based Domain Specific Language for defining grid structures directly in code.
2. JSON Syntax: Defining the grid structure via JSON, which can be useful for dynamic or data-driven layouts.

Additionally, the Grid Helper can be used to implement specialized Row and Column Helpers, or integrated with MotionLayout for animated grid transitions.

The Cycle Editor is an IntelliJ Gradle-based Java project used to preview parameter changes in KeyCycles for MotionLayout animations. To run the tool, you must first build and run two specific applications and ensure adb port forwarding is enabled. Once the environment is prepared, you can launch the Java Swing application by right-clicking android.motionlayout.cycleEditor.MainPanel.java in IntelliJ and selecting Run MainPanel.main().

Right-click `android.motionlayout.cycleEditor.MainPanel.java` -> Run `MainPanel.main()`