title: Android, How to make a transparent status bar correctly
body: <p>I'm trying to make transparent status bar on Android 4.4+ 
  I know how to make it transparent by defining my own style:</p>
  
  <pre><code>&lt;style name="Theme.MyTheme" parent="Theme.MyTheme.Base"&gt;
      &lt;item name="android:windowTranslucentStatus"&gt;true&lt;/item&gt;
      &lt;item name="android:windowTranslucentNavigation"&gt;true&lt;/item&gt; &lt;/style&gt;
  </code></pre>
  
  <p>I found here:
  <a href="https://stackoverflow.com/a/20573595/2633630">https://stackoverflow.com/a/20573595/2633630</a></p>
  
  <p>The problem is that when status bar is transparent, it doesn't match the color of the action bar and the activity in the background is seen:
  <img src="https://i.stack.imgur.com/8aNdo.png" alt="transparent status bar error"></p>
  
  <p>So I found that I can use android:fitsSystemWindows="true" and android:clipToPadding="false" in my layout that I found here <a href="http://mindofaandroiddev.wordpress.com/2013/12/28/making-the-status-bar-and-navigation-bar-transparent-with-a-listview-on-android-4-4-kitkat/" rel="nofollow noreferrer">http://mindofaandroiddev.wordpress.com/2013/12/28/making-the-status-bar-and-navigation-bar-transparent-with-a-listview-on-android-4-4-kitkat/</a></p>
  
  <pre><code>&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@color/background_darkRed"
  android:fitsSystemWindows="true"
  android:clipToPadding="false"    
  tools:context="com.sandak......."&gt;
  
  &lt;ScrollView
      android:layout_width="match_parent"
      android:layout_height="match_parent"&gt; 
  ....
  </code></pre>
  
  <p>That solves the top problem with transparent status bar and looks ok.. Unfortunately there is problem at the bottom on the "nav bar" with the system buttons, which is red and not transparent as I wish:
  <img src="https://i.stack.imgur.com/tcfSX.png" alt="enter image description here"></p>
  
  <p>I was trying all possible variants to achieve working result, but I cannot figure out how to solve it. My only working solution is set top padding about 60dp to the root element. But this solution is ugly and on different devices can look different and may be not working.</p>
  
  <p>I found a few applications on Google Play which working Ok with transparent background, so I'm curious how they make it work.</p>
  
  <p>For example:
  <a href="https://play.google.com/store/apps/details?id=com.trello" rel="nofollow noreferrer">https://play.google.com/store/apps/details?id=com.trello</a> and few others</p>