Android Jetpack Compose: Inset Padding Made Easy

<p>Ina typical Android App, other than the app content, there are other visible elements on shown top of the app, as shown in the picture below. They are called Insets.</p> <p>&nbsp;</p> <p>Sometimes we want to expand our app content&rsquo;s view into these insets area, or we want to pad our view not to be blocked by the keyboard, how can we do so?</p> <p>To do it ourselves manually is difficult. You can know why it is difficult by check out&nbsp;<a href="https://chris.banes.dev/becoming-a-master-window-fitter-lon/" rel="noopener ugc nofollow" target="_blank">this presentation</a>&nbsp;by&nbsp;</p> <p><a href="https://medium.com/u/9303277cb6db?source=post_page-----5f156a790979--------------------------------" rel="noopener" target="_blank">Chris Banes</a></p> <p>. Fortunately enough, he also provide us libraries to easier handle it, even for Jetpack Compose, i.e&nbsp;<a href="https://github.com/google/accompanist/tree/main/insets" rel="noopener ugc nofollow" target="_blank">https://github.com/google/accompanist/tree/main/insets</a></p> <h1>Let&rsquo;s explore further</h1> <p>To understand how to use it, I create a simple Jetpack Compose App below. Here you see the Status Bar and Navigation Bar used us some real-estate of the mobile phone.</p> <p>&nbsp;</p> <p>If we want our app to use up that area as well, we can use the below API during&nbsp;<code>onCreate</code>&nbsp;of the activity.</p> <pre> WindowCompat.setDecorFitsSystemWindows(<em>window</em>, false)</pre> <p>It will turn into below.</p> <p>&nbsp;</p> <p>As you can see, we manage to use the System Bars area, but our Text is also semi-covered by it. We want to add some padding to avoid the system bars covering the text.</p> <p><a href="https://medium.com/mobile-app-development-publication/android-jetpack-compose-inset-padding-made-easy-5f156a790979">Click Here</a></p>