Skip to content

How to use Link

Jump to bottom
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, inspect and edit the current state of your layout.

Note: It is a prototype, 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 repository, open the ComposeConstraintLayout project in Android Studio, 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 LinkServer.kt file in your app (or alternatively, compile the constraintlayout-tools library and include it in your project). Make sure to add the Internet permission to your manifest: <uses-permission android:name="android.permission.INTERNET" />

  2. Install the application onto your phone or emulator (This would be done using adb or studio)

Run the ConstraintLayoutLink application

  1. Have the android application running on your device or emulator
  2. 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)
  3. Run your app and your phone or emulator and the live inspector app on your desktop
  4. Download, compile and run the Link Desktop App (open the project in IntelliJ)
  5. 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)
  6. Enjoy!
Clone this wiki locally