Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why can't we use a Translucent system bars with and ActionBar

While updating my apps to Kitkat, I just wanted to give them a gorgeous look on KitKat using the Translucent property:

Translucent system bars

You can now make the system bars partially translucent with new themes, Theme.Holo.NoActionBar.TranslucentDecor and Theme.Holo.Light.NoActionBar.TranslucentDecor. By enabling translucent system bars, your layout will fill the area behind the system bars, so you must also enable [fitsSystemWindows][4] for the portion of your layout that should not be covered by the system bars.

My only concern is that I would like to use an ActionBar which sounds the opposite of what Google wants (both theme have NoActionBar:

Theme.Holo.NoActionBar.TranslucentDecor 
Theme.Holo.Light.NoActionBar.TranslucentDecor 

As I don't plan to use some hacks or tricks to make it work, I just wanted to know if there was some correct way to achieve this or if this would be against Google guidelines.

enter image description here

like image 865
Waza_Be Avatar asked Nov 02 '13 21:11

Waza_Be


5 Answers

You can create your own theme with android.R.attr#windowTranslucentStatus set to true to achieve the same effect without losing the ActionBar.

From the docs:

Flag indicating whether this window requests a translucent status bar. Corresponds to {@link android.view.WindowManager.LayoutParams#FLAG_TRANSLUCENT_STATUS}.

Styles - Remember, these would go in values-v19.

<style name="TranslucentStatusBar" parent="@android:style/Theme.Holo.Light">
    <item name="android:actionBarStyle">@style/TranslucentActionBar</item>
    <item name="android:windowTranslucentNavigation">false</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowContentOverlay">@null</item>
</style>

<style name="TranslucentActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">@android:color/transparent</item>
</style>

Layout

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_dark"
    android:fitsSystemWindows="true" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/holo_purple" />

</FrameLayout>

Results

enter image description here

like image 180
adneal Avatar answered Nov 19 '22 01:11

adneal


This works with less lines:

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

Would be great if someone could add, how to check, if the translucent navigation is available at all, because the N10 e.g. will have the translucent navigation disabled with Build.VERSION_CODES.KITKAT. Edit: answered in this question: Check if translucent navigation is available

like image 27
stefple Avatar answered Nov 19 '22 00:11

stefple


The code below works well in my App.

Translucent:

Window w = getWindow();
                w.setFlags(
                        WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
                        WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
                w.setFlags(
                        WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
                        WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

Seting not translucent:

final WindowManager.LayoutParams attrs = getWindow()
                        .getAttributes();
                attrs.flags &= (~WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
                attrs.flags &= (~WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
                getWindow().setAttributes(attrs);
                getWindow().clearFlags(
                        WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
like image 29
Geek4IT Avatar answered Nov 19 '22 01:11

Geek4IT


This is the answer I was looking for: https://github.com/jgilfelt/SystemBarTint

Android 4.4 (KitKat) introduced translucent system UI styling for status and navigation bars. These styles are great for wallpaper based activities like the home screen launcher, but the minimal background protection provided makes them less useful for other types of activity unless you supply your own backgrounds inside your layout. Determining the size, position and existence of the system UI for a given device configuration can be non-trivial.

This library offers a simple way to create a background "tint" for the system bars, be it a color value or Drawable. By default it will give you a semi-opaque black background that will be useful for full-bleed content screens where persistent system UI is still important - like when placed over a map or photo grid.

enter image description here

like image 17
Waza_Be Avatar answered Nov 18 '22 23:11

Waza_Be


All of the answers extend the ActionBar either programmatically or from layout: what this means is that when the app gets launched or recreated the system will look for the theme (which isn't aware of the fix) and show a VERY UGLY status bar coloured with whatever is the window background...!

I have created an example of how to do it using the theme only:

https://github.com/Takhion/android-extendedactionbar

I hope it will be useful for someone :)

like image 4
Takhion Avatar answered Nov 19 '22 00:11

Takhion