Lately, tech circles have been abuzz about the latest Instagram Threads App, with particular emphasis on the ChatGPT App, developed using Jetpack Compose.
One might think the only way to confirm this would be through extracting the app and scrutinising the source code, comparing the XML layouts to distinguish traditional XML Views, Jetpack Compose, or Flutter.
Yet, is there a more efficient, precise method for determining whether a specific UI component was developed in Jetpack Compose?
Easy Validation of a Jetpack Compose App for Developers
My LinkedIn acquaintance, Piyush Mamidwar, previously unveiled a nifty shortcut for verifying if an Android app employs Jetpack Compose.
As long as Developer Options are activated on our Android device, analysing the layout bounds can reliably indicate whether each UI component was crafted using XML View, Jetpack Compose, or Flutter.
Activating Developer Options
The process can vary depending on the smartphone model. The Android Developers website provides comprehensive documentation about Developer Options, but generally:
- Google Pixel:
Settings > About phone > Build number - Samsung Galaxy S8 and later:
Settings > About phone > Software information > Build number - LG G6 and later:
Settings > About phone > Software info > Build number - HTC U11 and later:
Settings > About > Software information > More > Build number or Settings > System > About phone > Software information > More > Build number - OnePlus 5T and later:
Settings > About phone > Build number
Displaying Layout Bounds
Once Developer Options have been activated, one can proceed to the Developer Options screen. It is typically displayed within the Systems settings section. Alternatively, you can find it by searching for “Developer options” under System settings.
Navigate to the “Show layout bounds” option under the “Drawing” section and enable it. Instantaneously, everything displayed on your screen will be outlined with various coloured borders.