CODEWITHSUNDEEP
androidandroid-design-library
Andre Romano
Andre Romano

Reputation: 1012

Android Translucent status bar with Inverted icons

I was wondering how one could achieve Google Calendar's look.enter image description here

That is:

What I've tried:

Setting windowTranslucentStatus disables windowLightStatusBar:

<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowLightStatusBar">true</item>
<item name="android:windowTranslucentStatus">true</item>

Allows full transparency only(no colors in between), fitSystemWindows doesn't work properly:

<item name="android:windowLightStatusBar">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#19000000</item>

window.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS)

Thanks.

Upvotes: 6

Views: 6581

Answers (5)

AndrewS
AndrewS

Reputation: 7508

in Compose:

implementation "com.google.accompanist:accompanist-systemuicontroller:0.30.1"

val systemUiController = rememberSystemUiController()

SideEffect {
        systemUiController.setStatusBarColor(Color.Transparent, darkIcons = true)
        systemUiController.setNavigationBarColor(navigationBarColor)
}

Upvotes: 0

Bezaleel
Bezaleel

Reputation: 304

Fixed this by setting all the flags programmatically. Apparently, for some weird reason setting the windowsLightStatusBar in styles wasn't reflecting.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        getWindow().setNavigationBarColor(getResources().getColor(R.color.colorAccentDark));
        //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 | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
        getWindow().setStatusBarColor(Color.TRANSPARENT);
        //setStatusBarTranslucent(true);
    }

Upvotes: 4

Vinay
Vinay

Reputation: 767

Yes you can change status bar icon color to black .add this in your values-v23/styles.xml

<item name="android:windowLightStatusBar">true</item>

eg.add this to your values-v23 folder in style.xml

<?xml version="1.0" encoding="utf-8"?>


<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">#F5F5F5</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowLightStatusBar">true</item>
</style>

make sure to change colorPrimaryDark in v23/styles.xml to grey or white.it works from API 23

Upvotes: 2

Andre Romano
Andre Romano

Reputation: 1012

Managed to find the solution:

onCreate (in Kotlin):

window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
window.statusBarColor = Color.parseColor("#1A000000")

styles.xml:

<item name="android:windowDrawsSystemBarBackgrounds">true</item>

Upvotes: 8

Muthukrishnan Rajendran
Muthukrishnan Rajendran

Reputation: 11642

You can try this. add this in values-v23 and set this theme in your layout

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:statusBarColor">#fff</item>
        <item name="android:windowLightStatusBar">true</item>
    </style>

This will change the status bar background to white

<item name="android:statusBarColor">#fff</item>

This will change status bar icon to invert(grey)

<item name="android:windowLightStatusBar">true</item>

Output will be like this, you can change your action bar color what ever you want I gave as blue enter image description here

Upvotes: 2

Related Questions