MobileUIUsing the MobileUI Live Preview
Learn more about our amazing Live Preview tool, that will grant you a productive developer experience.
The MobileUI Live Preview allows you to see asset changes being applied to your app in real-time. This means, you can modify layouts, stylesheets, bindings, templates, images and fonts while seeing the effects of it on connected simulators and devices.
The Live Preview feature can be found in right tool window pane in Android Studio as shown below. The Live Preview works with a tiny web server that is built into your app. The server listens on port 4242. The MobileUI plugin observes your assets folder and sends changing files via HTTP to your app. You can use the Live Preview tool window to configure a list of URLs to send changing files to. Follow the guidelines below to configure devices, simulators and emulators to receive the files correctly.
Android Emulator or Device
Since version 0.5.0, the MobileUI Plugin automatically detects running Android emulators and debuggable Android devices connected to your development machine. It lists the devices in the live preview window as shown above. The plugin transparently enables TCP port forwarding for them. To preview you changes, you only need to enable the Live Preview with the Play Button.
Note: On Android, make sure, you are only running one MobileUI app in debug mode at the time. Only the first started app will be able to bind to port 4242.
iOS Simulator
Make sure, only one simulator is running. Then add a new device in the Live Preview window with the URL http://localhost:4242
iOS Device
To use the Live Preview with a USB-connected iOS device, you need to install the tool iproxy. In a terminal, configure port forwarding with iproxy as follows:
iproxy <yourport> 4242where <yourport> is an arbitrary free port on your local machine. Then add a new device in the Live Preview window with the URL http://localhost:<yourport> where <yourport> is the same port as being forwarded above.