How to Have a Transparent Status Bar but Leave Navigation Bar Opaque?

Question

I want to have a transparent status bar on my app (so the background goes behind it) but I want the navigation bar at the bottom to stay black.

I can make both transparent by setting getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);

I can make the top translucent (partially transparent) by setting <item name="android:windowTranslucentStatus">true</item>

However, I can't make the top completely transparent without making the bottom transparent too. Using <item name="android:statusBarColor">@android:color/transparent</item> or similar doesn't work.

Does anyone know how to make a fully transparent status bar without affecting the navigation bar?

Menendez

I answered this question in another post and it works perfectly ( Making the StatusBar Transparent while NavigationBar Stay Stable ) : Android Completely transparent Status Bar – Inconveniency

Answer 1

To independently control the transluscency of the status and navigation bars on KitKat, you can simply use the window manager flags FLAG_TRANSLUSCENT_STATUS and FLAG_TRANSLUSCENT_NAVIGATION in the onCreate() method of your activity. However, on KitKat the system may draw a semi-opaque gradient scrim drawable over the status bar. This appears to be device-specific: on my KitKat device it's fully transparent, but on Android Studio emulator it shows a scrim.

On Lolliop or later you can instead set the status bar colour using the Window#setStatusBarColor(int) method together with the FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS window manager flag. Note that you clear the FLAG_TRANSLUSCENT_STATUS flag in this case. If you want the colour to be transparent, that implies that your application supports full screen mode and sets the system UI visibility, so it's down to your app to manage the status bar background colour.

Putting it all together would look something like this:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    Window window = getWindow();
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        window.setStatusBarColor(0x00000000);  // transparent
    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        int flags = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS;
        window.addFlags(flags);
    }
    setContentView(R.layout.main);
    window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
}

Example of layout used:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff00ff00"
    android:fitsSystemWindows="false"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Hello World!"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </LinearLayout>

</RelativeLayout>

Example screenshots.

Lollipop:

KitKat:

Lueluebke

Thank you. I tried the code (I'm definitely running more than Android KitKat) but it doesn't create a transparent status or nav, only a translucent one (so the status/nav bar has a darker overlay than the background underneath). It's as though its color setting is alpha 0.5. Seeing this, I tried setting its color in style to alpha 0 and to transparent, but neither fix it. I know you said, "Transluscent in this case actually means fully transparent: there is no colour or alpha channel applied to either" but I can't get it to be anything other than just translucent. Do you know why? – Menendez

I also tried the Window#setNavigationBarColor(TransparentColor) after setting the flag, but it didn't seem to have any effect on its translucency (forgot to mention that above). – Menendez

You are quite right. On some devices (or probably most devices!) it does show a semi-opaque scrim over the status bar background. It just happens that on my KitKat device (Asus Transformer TF701T) it is fully transparent. I have updated the answer to show a fully transparent status bar on Lollipop+ using a full-screen layout and controlling the system UI visibility. I haven't yet found a way of reliably having the status bar fully transparent on KitKat though. – Lueluebke

Finally!! Something that works! Thanks OP and AGDownie. – Acetous

Answer 2

Starting from API level 30, most of window flags are deprecated,

Using WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS Will make the activity overlaps with the navigation bar, also makes it transparent.

So, instead to make this work on API level 30, you can use setDecorFitsSystemWindows():

if (Build.VERSION.SDK_INT in 21..29) { 
    window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
    window.decorView.systemUiVisibility =
        SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or SYSTEM_UI_FLAG_LAYOUT_STABLE
    window.statusBarColor = Color.TRANSPARENT
}

if (Build.VERSION.SDK_INT >= 30) {
    // Setting status bar color as not working with XML attribute
    window.statusBarColor = Color.TRANSPARENT
    // Making status bar overlaps with the activity
    WindowCompat.setDecorFitsSystemWindows(window, false)
}

And keep the below in the styles.xml:

<item name="android:windowTranslucentStatus" tools:targetApi="kitkat">true</item>

UPDATE

If you faced that the bottom part of layout obscured by the bottom navigation; please check this answer fore more in detail.

Algor

Answer 3

I figured it out :D

private void setTransparentStatusBarOnly(Activity activity) {
    activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
    activity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    activity.getWindow().setStatusBarColor(Color.TRANSPARENT);
    // this lines ensure only the status-bar to become transparent without affecting the nav-bar
    getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
}

Escrow

How to, on the contrary, show status, but make the navigation bar transparent? – Parenthesize

You are genius sir – Koffman

Answer 4

I am reposting the correct answer that worked for me in kotlin :-

Paste code given below before setContentView in your activity

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
        window.setStatusBarColor(0x00000000) // transparent
    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        val flags = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
        window.addFlags(flags)
    }

In your style paste both the lines given below in the main theme:-

    <item name="android:windowDrawsSystemBarBackgrounds">false</item>
    <item name="android:navigationBarColor">@color/colorBlack</item>

In your Layout just paste android:fitsSystemWindows="true" in Your parent Layout and then paste the same android:fitsSystemWindows="true" in your child layout which u want to show in the background of the status bar like this :-

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:id="@+id/dish_details_rootLayout"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".bottomnav.menu.dishdetail.DishDetail"
android:fitsSystemWindows="true">



    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/dish_details_appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/dish_details_collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="400dp"
            android:fitsSystemWindows="true"
            app:expandedTitleTextAppearance="@color/colorTransparentwhite"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/dish_details_dish_imageView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:contentDescription="@null"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:fitsSystemWindows="true"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:id="@+id/dish_details_nestedScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="@+id/dish_details_horizontalGuideline1"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/dish_details_dishName"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:fontFamily="@font/roboto"
                        android:padding="12dp"
                        android:text="Food Name"
                        android:textColor="@color/colorBlack"
                        android:textSize="24sp" />

                    <TextView
                        android:id="@+id/dish_details_dishPrice"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:fontFamily="@font/roboto"
                        android:padding="12dp"
                        android:text="Rs. 200"
                        android:textSize="18sp"
                        android:textStyle="bold" />

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal">

                        <TextView
                            android:id="@+id/dish_details_dishRatingtxt"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="bottom"
                            android:layout_marginStart="12dp"
                            android:fontFamily="@font/roboto"
                            android:text="4.5"
                            android:textSize="24sp" />
                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="24sp"
                            android:layout_gravity="bottom"
                            android:layout_marginBottom="5dp"
                            android:src="@drawable/rating_star"/>
                    </LinearLayout>

                    <TextView
                        android:id="@+id/dish_details_dishDespricption"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:fontFamily="@font/roboto"
                        android:padding="12dp"
                        android:text="Food Description"
                        android:textColor="@color/colorBlack"
                        android:textSize="16sp" />
                </LinearLayout>
            </androidx.cardview.widget.CardView>
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:id="@+id/dish_detail_add_to_cartbtn"
android:text="Add to Cart"
android:textColor="@color/colorWhite"
android:layout_marginBottom="10dp"
android:background="@drawable/soothingred_btn_bg"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Atalie

Answer 5

Hopefully my answer help someone.

fun setTransparentStatusBar(activity: Activity) {
            activity?.let {
                it.window?.let {
                    it.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
                    it.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
                    it.statusBarColor = Color.TRANSPARENT
                    it.decorView.systemUiVisibility =
                        View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                }
            }
        }

Undulate