CODEWITHSUNDEEP
androidstylestransparencystatusbarnavigationbar
Elliptica
Elliptica

Reputation: 4322

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

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?

Upvotes: 17

Views: 9718

Answers (5)

Zain
Zain

Reputation: 40810

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.

Upvotes: 6

Richa
Richa

Reputation: 3193

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
                }
            }
        }

Upvotes: 0

Mohit Yadav
Mohit Yadav

Reputation: 157

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>

Upvotes: 0

Alaa AbuZarifa
Alaa AbuZarifa

Reputation: 1249

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);
}

Upvotes: 2

AGDownie
AGDownie

Reputation: 638

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:

Lollipop+

KitKat:

Kitkat

Upvotes: 18

Related Questions