Android, How to make a transparent status bar correctly

Question

I'm trying to make transparent status bar on Android 4.4+ I know how to make it transparent by defining my own style:

<style name="Theme.MyTheme" parent="Theme.MyTheme.Base">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item> </style>

I found here: https://stackoverflow.com/a/20573595/2633630

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:

So I found that I can use android:fitsSystemWindows="true" and android:clipToPadding="false" in my layout that I found here http://mindofaandroiddev.wordpress.com/2013/12/28/making-the-status-bar-and-navigation-bar-transparent-with-a-listview-on-android-4-4-kitkat/

<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.......">

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"> 
....

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:

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.

I found a few applications on Google Play which working Ok with transparent background, so I'm curious how they make it work.

For example: https://play.google.com/store/apps/details?id=com.trello and few others

Answer 1

//UPDATE:
Ok, this is quite old answer. Now you can use Material theme to handle this and it is pretty easy. Just set target api to 21+, use support library if you need to and create theme with material theme where you can specify status bar color directly

<style name="AppTheme"
        parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- colorPrimary is used for the default action bar background -->
        <item name="colorPrimary">@color/color_primary</item>

        <!-- colorPrimaryDark is used for the status bar -->
        <item name="colorPrimaryDark">@color/color_primary_dark</item>

        <!-- colorAccent is used as the default value for colorControlActivated
             which is used to tint widgets -->
        <item name="colorAccent">@color/accent_orange</item>
    </style>

=======================================================================

OLD ANSWER:

Ok, It seems that I solve my problem. It is not the best and clearest solution, but it is working solution. If anybody in the future will find out better and more clear solution, please let me know and I will update my answer / or mark your answer as correct one. But for now, I have no better solution than this little hack:

The root element of the layout has to be RelativeLayout. Than should follow your main layout like ScrollView or any kind of others layouts, it doesn't matter. At the end before closing Relative Layout tag follows empty LinearLayout which has set the same background as your Action Bar and fixed height (height of Status Bar).

<RelativeLayout 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"
tools:context="com.sandak....">
<ScrollView
    android:fitsSystemWindows="true"
    android:clipToPadding="false"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
.... all your main views etc..
</ScrollView>
<LinearLayout
        android:id="@+id/statusBarBackgroundLinearLayout"
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_height="30dp"
        android:background="@color/background_darkRed"
        android:clickable="false"
        android:focusable="false">
     </LinearLayout>
</RelativeLayout>

Ok then you have to set in code the same Linear Layout height as the Status bar has:

private void setStatusBarBackground(View rootView) {
        setStatusBarLayout(rootView);
        statusBarHeight = getStatusBarHeight();
        setStatusBarLayoutHeight(statusBarHeight);
    }

    private void setStatusBarLayout(View rootView){
        statusBarBackgroundLinearLayout = (LinearLayout) rootView.findViewById(R.id.statusBarBackgroundLinearLayout);
        if (isPreKitkatDevice()) {
            hideStatusBarLayout();
        }
    }

    private int getStatusBarHeight() {
        int statusBarHeight = 0;
        int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            statusBarHeight = getResources().getDimensionPixelSize(resourceId);
        }
        return statusBarHeight;
    }

    private boolean isPreKitkatDevice(){
        return Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT;
    }

    private void hideStatusBarLayout(){
        statusBarBackgroundLinearLayout.setVisibility(View.INVISIBLE);
    }        

    private void setStatusBarLayoutHeight(int height){
        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) statusBarBackgroundLinearLayout.getLayoutParams();
        layoutParams.height = height;
    }

And then just call setStatusBarBackground in your onCreate() method. This is working solution for all different kind of deviceas. For pre KitKat devices where transparent background is not allowed you have to hide the Linear Layout.