Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

completely transparent status bar and navigation bar on lollipop

I'm trying to make an android launcher. I want to achieve a completely transparent status bar and navigation bar, here is my theme xml file.

<resources>
    <style name="Theme" parent="android:Theme.Material.Wallpaper.NoTitleBar">
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:windowTranslucentNavigation">false</item>
    </style>
</resources>

the last two items don't work, there is still a shadow on lollipop.

This is what it looks like(note there is actually a shadow on status bar and navigation bar): enter image description here

what I want to achieve (nova launcher):

enter image description here

how to make the status bar and navigation bar "transparent" instead of "translucent"?

like image 562
renzhn Avatar asked Mar 16 '15 03:03

renzhn


People also ask

Can you hide the navigation bar?

Using the Show and hide button at the left side of the navigation bar, you can set the navigation bar to be hidden or pinned on the screen when you use apps or features. The navigation bar is pinned by default.

What is hide status and navigation bar?

Hiding the status bar (and optionally, the navigation bar) lets the content use more of the display space, thereby providing a more immersive user experience.

How do I make my status bar white on Android?

Step 1: After opening the android studio and creating a new project with an empty activity. Step 2: Navigate to res/values/colors. xml, and add a color that you want to change for the status bar.


4 Answers

Update

You can achieve the same effect programmatically on KitKat and afterward by setting the FLAG_LAYOUT_NO_LIMITS flag inside the Window.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            Window w = getWindow(); // in Activity's onCreate() for instance
            w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
        }

If you set a background resource (like a color or a picture) to your layout, you will see the color or picture "below" the status bar.

<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@color/primary_dark</item>

Original Answer

It looks like android:windowTranslucentStatus and android:windowTranslucentNavigation should be true instead of false

<resources>
    <style name="Theme" parent="android:Theme.Material.Wallpaper.NoTitleBar">
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
    </style>
</resources>

Also, your transparent activity / container layout needs this property set:

android:fitsSystemWindows="true"

[Source][1] [1]: https://stackoverflow.com/a/29311321/1549700

like image 141
Machado Avatar answered Oct 23 '22 16:10

Machado


I use this since it keeps the height of the status bar and nav bar

<!-- Base application theme. -->
<style name="theme" parent="android:Theme.Material.Wallpaper.NoTitleBar">
    <item name="android:navigationBarColor">#00000000</item>
    <item name="android:statusBarColor">#00000000</item>
</style>

This does require API 21+ however

like image 23
denixtry Avatar answered Oct 23 '22 18:10

denixtry


You can use this kotlin extension function it will set status bar fully transparent (on API 23+, View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR flag available on API 23+) and navigation bar (on API 27+, View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR flag available on API 27+) otherwise it will use the systemUiScrim color on API 21+

fun Activity.transparentStatusAndNavigation(
    systemUiScrim: Int = Color.parseColor("#40000000") // 25% black
) {
    var systemUiVisibility = 0
    // Use a dark scrim by default since light status is API 23+
    var statusBarColor = systemUiScrim
    //  Use a dark scrim by default since light nav bar is API 27+
    var navigationBarColor = systemUiScrim
    val winParams = window.attributes


    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
        systemUiVisibility = systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
        statusBarColor = Color.TRANSPARENT
    }
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        systemUiVisibility = systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
        navigationBarColor = Color.TRANSPARENT
    }
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        systemUiVisibility = systemUiVisibility or
                View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
                View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
                View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
        window.decorView.systemUiVisibility = systemUiVisibility
    }
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
        winParams.flags = winParams.flags or
                WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS or
                WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION
    }
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        winParams.flags = winParams.flags and
                (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS or
                        WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION).inv()
        window.statusBarColor = statusBarColor
        window.navigationBarColor = navigationBarColor
    }

    window.attributes = winParams
}

API 21+ API 21+ API 27+ API 27+

like image 11
Arpan Sarkar Avatar answered Oct 23 '22 16:10

Arpan Sarkar


For API 29 and above use

<style name="Your.Theme">
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:enforceNavigationBarContrast">false</item>
</style>
like image 10
Mathias Avatar answered Oct 23 '22 18:10

Mathias