CODEWITHSUNDEEP
android
incr3dible noob
incr3dible noob

Reputation: 441

How to make status bar transparent as in the picture

I want to make my image fill upto the status bar and make it transparent as in the picture below. I have followed different similar questions but unable to get the required effect.

I have used the following style.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>

        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowTranslucentStatus">true</item>
    </style>

I have also tried adding this code.

getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        getWindow().setStatusBarColor(Color.TRANSPARENT);

I want to create effect like this.

This is what I am getting now

What do I need to get the desired effect?

Upvotes: 0

Views: 1006

Answers (3)

Devil10
Devil10

Reputation: 1953

put this code in oncreate method of your activity

 if (GeneralFunctions.isAboveLollipopDevice()) {
        Window window = getWindow();
            window.setStatusBarColor(ContextCompat.getColor(this, R.color.colorTransparent));
            window.getDecorView().setSystemUiVisibility(
                    View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        }

this must be your style file

<style name="BaseAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppTheme" parent="BaseAppTheme" />

and add this to your values-v21->style.xml as 

<resources>
<style name="AppTheme" parent="BaseAppTheme">
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@color/colorTransparent</item>
</style>
</resources>

Upvotes: 0

Ashish Ranjan
Ashish Ranjan

Reputation: 5543

Add these to your theme style: 

<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowTranslucentStatus">true</item>

and in whichever activity you want the status bar to be transparent add this to the parent layout:

android:fitsSystemWindows="true"

also for lollipop+ add these flags to window:

getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS)
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

Upvotes: 1

Ben P.
Ben P.

Reputation: 54194

The behavior you're looking for is only available on certain Android API versions. Starting with API 19, your app can have a translucent status bar and draw behind it. Starting with API 21, your app can have a transparent status bar and draw behind it. In order to successfully get the best possible outcome on all API levels, you're going to have to do a little bit of work. You need to create the AppTheme style in values/, values-v19/, and values-v21/, and you'll need to have all of the basics in all three places.

In your base values/ style, put this:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

In your values-v19/ style, put this:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>

    <item name="android:windowTranslucentStatus">true</item>
</style>

In your values-v21/ style, put this:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>

    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

Then, to support the transparent status bar in Lollipop+, add this to your activity's onCreate():

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    getWindow().getDecorView().setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
}

Upvotes: 1

Related Questions