This question already has answers here:
How to make the navigation bar transparent
(2 answers)
Closed 9 years ago.
This must be possible with 4.4, but I found no documentation on this yet - anyone knows how to make the status-bar / system-ui transparent/translucent ?
Using one of the built-in themes precludes you from having an ActionBar.
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 for the portion of your layout
that should not be covered by the system bars.
If you're creating a custom theme, set one of these themes as the
parent theme or include the windowTranslucentNavigation and
windowTranslucentStatus style properties in your theme.
If you wish to have transparent status bar, and transparent navigation with the use of an Action Bar - then simply add the following to your custom theme (in values-v19/styles.xml)
<style name="Theme.MyTheme" parent="Theme.MyTheme.Base">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
Here you go - http://developer.android.com/about/versions/android-4.4.html#UI
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 for the portion of your layout
that should not be covered by the system bars.
If you're creating a custom theme, set one of these themes as the
parent theme or include the windowTranslucentNavigation and
windowTranslucentStatus style properties in your theme.
I found no documentation on this yet
Hmmmm...
http://developer.android.com/about/versions/kitkat.html#44-immersive
To get the most impact out of your content, you can now use new window styles and themes to request translucent system UI, including both the status bar and navigation bar. To ensure the legibility of navigation bar buttons or status bar information, subtle gradients is shown behind the system bars. A typical use-case would be an app that needs to show through to a wallpaper.
http://developer.android.com/about/versions/android-4.4.html#UI
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 for the portion of your layout that should not be covered by the system bars.
If you're creating a custom theme, set one of these themes as the parent theme or include the windowTranslucentNavigation and windowTranslucentStatus style properties in your theme.
Related
I can customize my Actionbar. But I can't customize it when the app is collapsed.
How to customize the app title when the app is collapsed (for example: center or right align)?
The color of the app bar in multitasking mode I believe is defined by the android:colorPrimary (or colorPrimary if you're using AppCompat) attribute in your styles.
I don't think you can change the alignment of the text of the app bar though.
My problem is easy but I need some help
I have a MainActivity, several Fragments and NavigationDrawer. I also use a Appcompat v7
NavigationDrawer is shown behind the statusbar for what I use ScrimInsetsLayout.
In styles I have colorPrimary and colorPrimaryDark(parent is Theme.Appcompat)
In main activity I use setStatusBarColor(Color.TRANSPARENT) to show Drawer in statusbar. So now I have colorPrimaryDark statusbar color and NavigationDrawer in statusbar
Now I created a new Fragment and I need to disable colorPrimaryDark color and make statusbar real transparent
As I said before, setting color to transparent makes it colorPrimaryDark with drawer shown
Setting it to any other color "hides" drawer.
Thanks
Screenshots:
The transparent translucent status bar is available from API 19, create a new values-v19 folder and a styles.xml inside it then update your BaseAppTheme like this:
<!-- Base application theme for v19. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentNavigation">false</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
But, this would make your UI use the space behind StatusBar, so I would suggest adding an extra TOP padding, of 25dp (researched and found every API uses 25dp as StatusBar height even in landscape mode), for devices > API19
On Android 4.4 KitKat you can set the Status and Navigation bars transparent with the android:windowTranslucentStatus and android:windowTranslucentNavigation theme elements, and then below the bars the app window is extended and a gradient is added. However on Android 5.0 Lollipop this has been changed and now instead of the gradient a solid transparent color is added. Android 5.0 offers the new android:statusBarColor and android:navigationBarColor elements under the new Material theme, but when you try to set these elements to #android:color/transparent the app window is not extended, and if you use android:windowTranslucentStatus and android:windowTranslucentNavigation then android:statusBarColor and android:navigationBarColor are ignored.
Am I missing something described on http://developer.android.com/training/material/theme.html#StatusBar?
Set android:windowTranslucentStatus to false and set android:statusBarColor to #android:color/transparent.
Then add code below:
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
If you also want the navigation bar to be translucent, set android:navigationBarColor to #android:color/transparent and combine the flag View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION as well.
I didn't experiment on the navigation bar but it will work.
Add below line to your style:
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
To clarify #suckgamony's answer to this question:
Under Lollipop and above, setting android:statusBarColor or android:navigationBarColor to #android:color/transparent will make the Status Bar or Navigation Bar (respectively) completely transparent, unless:
android:windowTranslucentStatus or android:windowTranslucentNavigation is set to true, in which case the Status Bar or Navigation Bar (respectively) is set to the solid transparent color #AxeEffect describes (again, under Lollipop and above);
android:statusBarColor and android:navigationBarColor may only be used with Android version 21 (Lollipop 5.0) or higher. As described in the referred to answer, android:windowTranslucentStatus or android:windowTranslucentNavigation when used with Kitkat provide transparent gradients rather than full transparency.
I've created a separate xml style file targeting KitKat and I've managed to change the color of the status bar. The only side-effect as seen on the picture, all the content is now moved up beneath the status bar. My question is how can I change the color of the status bar without overlaying this or how can I know the exact top margin I need to put on my content so its starts after the ActionBar and not beneath. Of course I need this to behave as expected on all screen sizes and densities. Thank you
values-v19/styles.xml
<style name="ThemeSelector" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
You should add the following to the top of the view(s)
android:paddingTop="?android:attr/actionBarSize"
If you're using the Support Library for the action bar, you need to remove the android: prefix
android:paddingTop="?attr/actionBarSize"
By enabling translucent system bars, your layout will fill the area behind the system bars, so you must also enable fitsSystemWindows for the portion of your layout that should not be covered by the system bars.
EDITED
You can add
android:fitsSystemWindows="true"
in your XML File
Remove from your layout
android:fitsSystemWindows="true"
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.
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
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
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);
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.
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 :)