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> </p>
<p>Sometimes we want to expand our app content’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 <a href="https://chris.banes.dev/becoming-a-master-window-fitter-lon/" rel="noopener ugc nofollow" target="_blank">this presentation</a> by </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 <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’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> </p>
<p>If we want our app to use up that area as well, we can use the below API during <code>onCreate</code> of the activity.</p>
<pre>
WindowCompat.setDecorFitsSystemWindows(<em>window</em>, false)</pre>
<p>It will turn into below.</p>
<p> </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>