In this article, let us explore the tools provided by Compose to accelerate the development process. Jetpack Compose leverages android studio tooling support to provide faster development and better debugging facilities.
Preview
The @Preview annotation in jetpack compose allows you to test your composables without connecting to an emulator or a real device. This is very helpful for the developers to make correction on the go and build their composables.
If there are multiple previews then to focus on one preview at a time use Gallery mode. It can be selected from the menu at the top left corner of the design tab as shown below.
Also, we can pass parameters to preview annotation to view our composables under different settings. Some of them are:
a. Setting dimensions - widthDP and heightDP
b. device option to see how it looks on different devices. Mention device = "", then use Ctrl+ Space for autocomplete feature.
c. locale option
d. setting background color - Ex - backgroundColor = 0xFF00FF00
e. To display the status and action bar add showSystemUi = true parameter.
It also supports interactive mode which helps you to test the features similar to that of phone or emulator. To open interactive mode, hover over the preview as show below and click on Start Interactive Mode option.
Live Templates and Gutter Icons
Android studio live template features are extended to Compose also. You can use template abbreviations for fast coding. You can check live templates by navigating to settings and searching for live templates. Under Android Compose section you can see the live templates for compose.
Gutter icons on the side bar, provide easy access to image picking, color picking options. It also provide option to deploy the preview on real device or on emulator.
Live Edit
Ideal approach during development would be to test every small change you make to the app before proceeding to the next one. But, this approach would eat up lot of time in re-building and deploying the app to the device or to an emulator. With the help of Live Edit feature we can overcome this problem. If Live Edit is enabled, then the changes are immediately reflected on the device.
Enable live edit feature in Android studio by navigating to File->Settings->Editor->Live Edit.
Layout Inspector
Layout inspector helps in debugging the issues. You can inspect the compose layout of a running app thoroughly using this tool. It lets you check the component placement, re-composition counts and attribute details while running the app on the device.
Conclusion:
These are the tools which I have used so far while exploring compose features. Let me know in comments section if there are any other tools which can help us speed up our development process. Thanks for reading.