A Developer’s Approach to Identifying Jetpack Compose Usage in Apps

<p>Lately, tech circles have been abuzz about the latest&nbsp;<a href="https://play.google.com/store/apps/details?id=com.instagram.barcelona" rel="noopener ugc nofollow" target="_blank">Instagram Threads App</a>, with particular emphasis on the&nbsp;<a href="https://play.google.com/store/apps/details?id=com.openai.chatgpt" rel="noopener ugc nofollow" target="_blank">ChatGPT App</a>, developed using Jetpack Compose.</p> <p>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.</p> <p>Yet, is there a more efficient, precise method for determining whether a specific UI component was developed in Jetpack Compose?</p> <h1>Easy Validation of a Jetpack Compose App for Developers</h1> <p>My LinkedIn acquaintance,&nbsp;<a href="https://www.linkedin.com/in/piyush-m2/" rel="noopener ugc nofollow" target="_blank"><em>Piyush Mamidwar</em></a>, previously unveiled&nbsp;<a href="https://www.linkedin.com/feed/update/urn:li:activity:7065154426080038912/" rel="noopener ugc nofollow" target="_blank">a nifty shortcut</a>&nbsp;for verifying if an Android app employs Jetpack Compose.</p> <p>As long as&nbsp;<strong>Developer Options</strong>&nbsp;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.</p> <h2>Activating Developer Options</h2> <p>The process can vary depending on the smartphone model. The Android Developers website provides&nbsp;<a href="https://developer.android.com/studio/debug/dev-options" rel="noopener ugc nofollow" target="_blank">comprehensive documentation</a>&nbsp;about Developer Options, but generally:</p> <ul> <li><strong>Google Pixel:</strong><br /> Settings &gt; About phone &gt; Build number</li> <li><strong>Samsung Galaxy S8 and later:</strong><br /> Settings &gt; About phone &gt; Software information &gt; Build number</li> <li><strong>LG G6 and later:</strong><br /> Settings &gt; About phone &gt; Software info &gt; Build number</li> <li><strong>HTC U11 and later:</strong><br /> Settings &gt; About &gt; Software information &gt; More &gt; Build number&nbsp;<em>or</em>&nbsp;Settings &gt; System &gt; About phone &gt; Software information &gt; More &gt; Build number</li> <li><strong>OnePlus 5T and later:</strong><br /> Settings &gt; About phone &gt; Build number</li> </ul> <h2>Displaying Layout Bounds</h2> <p>Once&nbsp;<strong>Developer Options</strong>&nbsp;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 &ldquo;Developer options&rdquo; under System settings.</p> <p>Navigate to the &ldquo;<strong>Show layout bounds</strong>&rdquo; option under the &ldquo;<strong>Drawing</strong>&rdquo; section and enable it. Instantaneously, everything displayed on your screen will be outlined with various coloured borders.</p> <p><a href="https://medium.com/@callmeryan/a-developers-approach-to-identifying-jetpack-compose-usage-in-apps-978601e36de2">Website</a></p>