Skip to content

How to use Link

Nicolas Roard edited this page Jul 24, 2021 · 11 revisions

Link: a ConstraintLayout live inspector

This is a lightweight inspector utility that can connect to a running application and inspect the current state. It is still in active development. Please provide feedback!

At the moment, this is only enabled for ConstraintLayout and MotionLayout in Compose.

Try it out

The simplest way to try it out is to get the github repositor, open the ComposeConstraintLayout project, and install the app on your phone or emulator.

Alternatively, if you want to test it with your own app:

  1. Write a Compose app using ConstraintLayout or MotionLayout. Define its Constraints in JSON (see the ComposeConstraintLayout for examples)
  2. Make sure to add the the Header element to the JSON:
Header: { exportAs: 'somename' }

(see example 19)

  1. Copy the DebugServer.kt file in your app (or alternatively, compile the constraintlayout-tools library and include it in your project)
  2. Install application onto your phone or emulator (This would be done using adb)

Run the ConstraintLayoutLink application

  1. Tunnel a port 9999 to your device using the command adb forward tcp:9999 tcp:9999 (adb is part of Android sdk Android/Sdk/platform-tools)
  2. Run your app and your phone or emulator and the live inspector app on your desktop
  3. Download Compile and run the Link Desktop App. Note. uses Kotlin and Java
  4. Navigate to an activity containing your composable, and click on Connect to display a list of available layouts (the bold names show the latest layouts seen by the app)
  5. Enjoy!