Showing content behind status and navigation bar - android

This looks like a duplicate question but I am not able to do it. I want complete transparent(not translucent) status bar as well as navigation bar and want the content to appear behind them.
activity_details.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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="#color/colorPrimary"
tools:context="com.bitspilanidvm.bosm2017.DetailsActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/q"
android:scaleType="centerCrop"/>
</LinearLayout>
v21 styles.xml
<resources>
<!-- Theme for API level > 21 -->
<style name="AppTheme" parent="AppBaseTheme">
<!--Customize your theme here. -->
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
</style>
In the activity java file
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE |
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
);
This is what I get.
How to get content behind the navigation bar?
If I add
<item name="android:windowTranslucentNavigation">true</item>
to my styles.xml
Here is what I get
As you can see, the content goes behind navigation bar but the navigation bar has to be translucent for this.
Is there any solution for this?

Add the FLAG_LAYOUT_NO_LIMITS flag within the Window. This will work for Android KitKat and above APIs. Example of this would be something like this:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
Window window = getWindow();
window.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}
The reason why the FLAG_FULLSCREEN doesn't work is simply because the FULLSCREEN flag is for removing screen decors like status bar(which works for you). However Navigation bar is not a screen decor. The LAYOUT_NO_LIMIT flag allows the window to extend beyond the screen limit, hence Navigation bar also gets covered within this flag.
Also you could simply hide the navigation and status bar by setting the app in immersive mode.
EDIT
The API ViewCompat.setOnApplyWindowInsetListener solves issues which the android:fitsSystemWindows=”true” does not and window insets can be applied to a particular view. An example of this.
ViewCompat.setOnApplyWindowInsetsListener(toolbar, (v, insets) -> {
ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) v.getLayoutParams();
params.topMargin = insets.getSystemWindowInsetTop();
return insets.consumeSystemWindowInsets();
});
Standard layouts like FrameLayout , LinearLayout or RelativeLayout will not pass window insets to their children, whereas material layouts will do (e.g. DrawerLayout , CoordinatorLayout ). So we can change our layout to any material one, or we can subclass a standard layout and pass the insets to the children of layout ourselves. We just have to override onApplyWindowInsets method.
#TargetApi(Build.VERSION_CODES.KITKAT)
#Override
public WindowInsets onApplyWindowInsets(WindowInsets insets) {
int childCount = getChildCount();
for (int index = 0; index < childCount; ++index)
getChildAt(index).dispatchApplyWindowInsets(insets);
// let children know about WindowInsets
return insets;
}
Reference Documentation:OnApplyWindowInsetsListener, WindowInsets

I wanted to comment the accepted answer but i can't yet.
Just to warn everyone who'll take this approach
The FLAG_LAYOUT_NO_LIMITS let extend your root view outside of the screen bounds creating other concerns about your layout design. For example, this flag simply breaks form readability by forcing the system to ignore "adjustPan" and "adjustResize" flags
So, even though i still consider Ahbi's answer as the correct one, make sure that nothing breaks outside of the scope of this flag
BETTER SOLUTION:
Actually, i've just found a better way to achieve the same result, without breaking anything
This is my style file
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
</style>
And these are the flags that i set programmatically
w.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
w.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION);
Setting the flag LAYOUT_HIDE_NAVIGATION (in combination with the style items) did the trick and my form still reacts to the adjustPan flag

If you want the image showing behind the status bar
getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
but by doing this, fitsSystemWindows="true" is not working
toolbar overlaps to status bar.

Related

How to make the status color to transparent in android

I am going to make the status bar as a transparent in android.
This is the screenshot same of our app status.
But I hope to make the status like this image.
Please tell me how to make the status as a transparent color.
Thanks in advance.
All you need to do is set these properties in your theme:
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
Your activity / container layout you wish to have a transparent status bar needs this property set:
android:fitsSystemWindows="true"
It is generally not possible to perform this for sure on pre-kitkat, looks like you can do it but some strange code makes it so.
EDIT: I would recommend this lib: https://github.com/jgilfelt/SystemBarTint for lots of pre-lollipop status bar color control.
Well after much deliberation I've learned that the answer to totally disabling the translucency or any color placed on the status bar and navigation bar for lollipop is to set this flag on the window
// In Activity's onCreate() for instance
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
Window w = getWindow();
w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}
Have you tried add
<item name="android:windowTranslucentStatus">true</item>
to your AppTheme style in style.xml ?

Custom Translucent Color (changing transparency)

I am trying to achieve brighter translucent status bar ,only the status bar and trying to keep navigation bar as its default.
I tried some solutions(actually non of them worked as what i want).
In this one i couldn't change translucent transparency, i am trying to get brighter one.But it is not changing.
http://blog.raffaeu.com/archive/2015/04/11/android-and-the-transparent-status-bar.aspx
The other option, i tried to use fullscreen theme and placed a gradient view same height as status(that is what i want). But in this time Layout extends behind of navigation and navigation looses its black background.I couldn't find solution for that.(making it translucent not what i want)
TLDR : i am trying to get brighter translucent status with keeping navigation as its default. Is it possible?
Edit. min SDK is 20
(sorry for bad english)
Yes, it is possibile.
Set the translucent status
<style name="AppThemeTranslucent" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
Set a color for your status bar using:
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
private void setTrasparentStatusBar() {
Window window = getWindow();
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(ContextCompat.getColor(this, R.color.status_bar_color));
window.setNavigationBarColor(ContextCompat.getColor(this, android.R.color.black));
}
Add this property to you root layout
android:fitsSystemWindows="true"
And this is what I achieve with this code
EDIT
I investigated about this feature, not all the view implement fitsSystemWindows so not always you can get this results.
I suggest you to read this and here a repo with a sample using a CoordinatorLayout with a negative marginTop
I found the solution here
By adding this one into onCreate()
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
And this adding this into your style
<item name="android:statusBarColor">#android:color/transparent</item>

EditText shows the status bar, or causes content above to move instead of resize

Background
I have a login Activity , which has a layout as such (vertically, from top to bottom) :
title (logo ImageView and TextView)
image&viewPager that takes the rest of the screen
EditTexts&login button, appear on top of #2 (covering a part of them), but at the bottom of the screen
I need to have this activity full screen, hiding the status bar, and when the soft keyboard appears, change the layout a bit for what's shown above #3 .
The problem
It seems that the combination of those requirements are quite problematic.
I have 2 main issues with them:
What I've made for sensing the soft-keyboard being shown- doesn't seem to work here even though it worked fine on other Activities.
When the soft-keyboard appears, it either re-shows the status bar, or it moves the content above the bottom area (#3) instead of resizing it, while also hiding the button at the bottom (of #3) and showing only the EditText as the first view above the soft-keyboard.
Since there is no way to really have a listener for when the soft-keyboard is shown/hidden, I had to create a customized layout that just tells me when its size has changed. When its height is reduced, I assume the keyboard is shown, and vice versa.
What I've tried
I've tried multiple variants of the layout. Doesn't seem to help
I've used this layout as the root of the fragment, to check if the soft-keyboard is shown (as it changes its size) :
https://stackoverflow.com/a/25895869/878126
Sadly, it works on all other activities except for this one.
I've tried various "windowSoftInputMode" values, including "adjustResize" and "adjustPan"
I thought the issues were because I use a transparent navigation bar, so I've disabled it and also disabled "fitsSystemWindows" for the bottom area (#3) .
I've tried this way to hide the status bar:
requestWindowFeature(Window.FEATURE_NO_TITLE);
and also this way:
if (VERSION.SDK_INT >= VERSION_CODES.JELLY_BEAN) {
View decorView = getWindow().getDecorView();
int uiOptions = View.SYSTEM_UI_FLAG_FULLSCREEN;
decorView.setSystemUiVisibility(uiOptions);
} else
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
The current layout
here's a short description of the current layout:
<LayoutSizeChangedSensorFrameLayout>
<RelativeLayout>
#1
<LinearLayout vertical, aligned to parent-top>
<ImageView/>
<TextView/>
<CirclePageIndicator/>
</LinearLayout>
#2
<ImageView aligned to parent-bottom, and below #1 />
<ViewPager aligned to the ImageView from all sides/>
#3
<LinearLayout vertical, aligned to the parent-bottom>
<TextView/>
<EditText/>
<Button/>
</LinearLayout>
</RelativeLayout>
</LayoutSizeChangedSensorFrameLayout>
And this is the theme of the activity:
<style name="AppTheme.Material" parent="#style/Theme.AppCompat.Light.DarkActionBar">
...
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowTranslucentNavigation" tools:ignore="NewApi">true</item>
<item name="android:windowTranslucentStatus" tools:ignore="NewApi">true</item>
<item name="android:navigationBarColor" tools:ignore="NewApi">#android:color/transparent</item>
</style>
The question
How come hiding the status bar doesn't work permanantly, or it affects what's shown when showing the soft-keyboard ?
How come my customized layout can't sense that the soft-keyboard is shown?
Are there any other ways to achieve what I've tried?
I managed to keep the status bar hidden when the soft keyboard shows, by doing the following 2 steps:
Adding the following in the onCreate of the activity:
//No title bar is set for the activity
requestWindowFeature(Window.FEATURE_NO_TITLE);
//Full screen is set for the Window
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
Setting windowFullscreento truein the theme:
<style name="CustomTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowFullscreen">true</item>
</style>
Unfortunately this is not a complete answer, but it might help you get some of the way.
In addition to adding FLAG_FULLSCREEN to window,
FLAG_FORCE_NOT_FULLSCREEN - this flag can also be cleared:
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

Lollipop : draw behind statusBar with its color set to transparent

I have set my statusBar color to transparent for Lollipop only with the following line in my theme :
<item name="android:statusBarColor">#android:color/transparent</item>
Now I need to draw behind it, but I can't get any view draw behind it. I know how to do it with the windowTranslucentStatus property, but don't want to use this property since it will then ignore the color of the statusBar set to transparent.
Method #1:
To achieve a completely transparent status bar, you have to use statusBarColor, which is only available on API 21 and above. windowTranslucentStatus is available on API 19 and above, but it adds a tinted background for the status bar. However, setting windowTranslucentStatus does achieve one thing that changing statusBarColor to transparent does not: it sets the SYSTEM_UI_FLAG_LAYOUT_STABLE
and SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN flags. The easiest way to get the same effect is to manually set these flags, which effectively disables the insets imposed by the Android layout system and leaves you to fend for yourself.
You call this line in your onCreate method:
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
Be sure to also set the transparency in /res/values-v21/styles.xml:
<item name="android:statusBarColor">#android:color/transparent</item>
Or set the transparency programmatically:
getWindow().setStatusBarColor(Color.TRANSPARENT);
The good side to this approach is that the same layouts and designs can also be used on API 19 by trading out the transparent status bar for the tinted translucent status bar.
<item name="android:windowTranslucentStatus">true</item>
Method #2:
If you only need to paint a background image under your status bar, instead of positioning a view behind it, this can be done by simply setting the background of your activity's theme to the desired image and setting the status bar transparency as shown in method #1. This was the method I used to create the screenshots for the Android Police article from a few months ago.
Method #3:
If you've got to ignore the standard system insets for some layouts while keeping them working in others, the only viable way to do it is to work with the often linked ScrimInsetsFrameLayout class. Of course, some of the things done in that class aren't necessary for all scenarios. For example, if you don't plan to use the synthetic status bar overlay, simply comment out everything in the init() method and don't bother adding anything to the attrs.xml file. I've seen this approach work, but I think you'll find that it brings some other implications that may be a lot of work to get around.
I also saw that you're opposed to wrapping multiple layouts. In the case of wrapping one layout inside of another, where both have match_parent for height and width, the performance implications are too trivial to worry about. Regardless, you can avoid that situation entirely by changing the class it extends from FrameLayout to any other type of Layout class you like. It will work just fine.
This worked for my case
// Create/Set toolbar as actionbar
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// Check if the version of Android is Lollipop or higher
if (Build.VERSION.SDK_INT >= 21) {
// Set the status bar to dark-semi-transparentish
getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// Set paddingTop of toolbar to height of status bar.
// Fixes statusbar covers toolbar issue
toolbar.setPadding(0, getStatusBarHeight(), 0, 0);
}
// A method to find height of the status bar
public int getStatusBarHeight() {
int result = 0;
int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
result = getResources().getDimensionPixelSize(resourceId);
}
return result;
}
For more information about working with statusBars: youtube.com/watch?v=_mGDMVRO3iE
Try this theme
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorPrimaryDark">#android:color/transparent</item>
<item name="colorPrimary">#color/md_blue_200</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
Be sure that, your layout set
android:fitsSystemWindows="false"
Instead of
<item name="android:statusBarColor">#android:color/transparent</item>
Use the following:
<item name="android:windowTranslucentStatus">true</item>
And make sure to remove the top padding (which is added by default) on your 'MainActivity' layout.
Note that this does not make the status bar fully transparent, and there will still be a "faded black" overlay over your status bar.
The solution from Cody Toombs almost did the trick for me. I'm not sure if this is Xamarin related or not, but I now have an acceptable solution:
This is my setup:
I have an Android project where I have referenced the Android.Support v4 and v7 packages. I have two styles defined:
values/styles.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
<style name="MyStyle" parent="#style/Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
values-v21/styles.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
<style name="MyStyle" parent="#style/Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
AndroidManifest targets "MyStyle":
AndroidManifest.xml:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.agn.test.test">
<uses-sdk android:minSdkVersion="10" />
<application android:allowBackup="true" android:icon="#mipmap/icon" android:label="#string/app_name" android:theme="#style/MyStyle">
</application>
</manifest>
And finally the code in the Main Activity:
[Activity (Label = "Test", MainLauncher = true, Icon = "#mipmap/icon")]
public class MainActivity : Activity
{
protected override void OnCreate (Bundle savedInstanceState)
{
base.OnCreate (savedInstanceState);
SetContentView (Resource.Layout.Main);
//Resource.Layout.Main is just a regular layout, no additional flags. Make sure there is something in there like an imageView, so that you can see the overlay.
var uiOptions = (int)Window.DecorView.SystemUiVisibility;
uiOptions ^= (int)SystemUiFlags.LayoutStable;
uiOptions ^= (int)SystemUiFlags.LayoutFullscreen;
Window.DecorView.SystemUiVisibility = (StatusBarVisibility)uiOptions;
Window.AddFlags (WindowManagerFlags.DrawsSystemBarBackgrounds);
}
}
Notice that I set DrawsSystemBarBackgrounds flag, this makes all the difference
Window.AddFlags (WindowManagerFlags.DrawsSystemBarBackgrounds);
I spent a lot of time getting it right, too much time in fact. Hopefully this answer helps anyone trying to achieve the same thing.
#Cody Toombs's answer lead to an issue that brings the layout behind the navigation bar. So what I found is using this solution given by #Kriti
here is the Kotlin code snippet for the same:
if (Build.VERSION.SDK_INT >= 19 && Build.VERSION.SDK_INT < 21) {
setWindowFlag(this, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, true)
}
if (Build.VERSION.SDK_INT >= 19) {
window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
}
if (Build.VERSION.SDK_INT >= 21) {
setWindowFlag(this, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, false)
getWindow().setStatusBarColor(Color.TRANSPARENT)
}
private fun setWindowFlag(activity: Activity, bits: Int, on: Boolean) {
val win: Window = activity.getWindow()
val winParams: WindowManager.LayoutParams = win.getAttributes()
if (on) {
winParams.flags = winParams.flags or bits
} else {
winParams.flags = winParams.flags and bits.inv()
}
win.setAttributes(winParams)
}
You also need to add
android:fitsSystemWindows="false"
root view of your layout.
I had the same problem so i create ImageView that draw behind status bar API 19+
Set custom image behind Status Bar gist.github.com
public static void setTransparent(Activity activity, int imageRes) {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
return;
}
// set flags
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
activity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
activity.getWindow().setStatusBarColor(Color.TRANSPARENT);
} else {
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
// get root content of system window
//ViewGroup rootView = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);
// rootView.setFitsSystemWindows(true);
// rootView.setClipToPadding(true);
ViewGroup contentView = (ViewGroup) activity.findViewById(android.R.id.content);
if (contentView.getChildCount() > 1) {
contentView.removeViewAt(1);
}
// get status bar height
int res = activity.getResources().getIdentifier("status_bar_height", "dimen", "android");
int height = 0;
if (res != 0)
height = activity.getResources().getDimensionPixelSize(res);
// create new imageview and set resource id
ImageView image = new ImageView(activity);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, height);
image.setLayoutParams(params);
image.setImageResource(imageRes);
image.setScaleType(ScaleType.MATRIX);
// add image view to content view
contentView.addView(image);
// rootView.setFitsSystemWindows(true);
}
You can use ScrimInsetFrameLayout
https://github.com/google/iosched/blob/master/android/src/main/java/com/google/samples/apps/iosched/ui/widget/ScrimInsetsFrameLayout.java
android:fitsSystemWindows="true" should set on scrim layout!
I will be adding some more information here. The latest Android developments have made it pretty easy to handle a lot of cases in status bar. Following are my observations from the styles.xml
Background color: for SDK 21+, as a lot of answers mentioned,<item name="android:windowTranslucentStatus">true</item> will make the status bar transparent and show in front of UI. Your Activity will take the whole space of the top.
Background color: again,for SDK 21+, <item name="android:statusBarColor">#color/your_color</item> will simply give a color to your status bar, without affecting anything else.
However, in later devices (Android M/+), the icons started coming in different shades. The OS can give a darker shade of gray to the icons for SDK 23/+ , if you override your styles.xml file in values-23 folder and add <item name="android:windowLightStatusBar">true</item>.
This way, you will be providing your user with a more visible status bar, if your status bar has a light color( think of how a lot of google apps have light background yet the icons are visible there in a greyish color).
I would suggest you to use this, if you are giving color to your status bar via point #2
In the most recent devices, SDK 29/+ comes with a system wide light and dark theme, controllable by the user. As devs, we are also supposed to override our style file in a new values-night folder, to give user 2 different experiences.
Here again, I have found the point #2 to be effective in providing the "background color to status bar". But system was not changing the color of status bar icons for my app. since my day version of style consisted of lighter theme, this means that users will suffer from low visibility ( white icons on lighter background)
This problem can be solved by using the point #3 approach or by overriding style file in values-29 folder and using a newer api <item name="android:enforceStatusBarContrast">true</item> . This will automatically enforce the grayish tint to icons, if your background color is too light.
With Android Studio 1.4, the template project with boiler plate code sets Overlay theme on your AppbarLayout and/or Toolbar. They are also set to be rendered behind the status bar by fitSystemWindow attribute = true. This will cause only toolbar to be rendered directly below the status bar and everything else will rendered beneath the toolbar. So the solutions provided above won't work on their own. You will have to make the following changes.
Remove the Overlay theme or change it to non overlay theme for the toolbar.
Put the following code in your styles-21.xml file.
#android:color/transparent
Assign this theme to the activity containing the navigation drawer in
the AndroidManifest.xml file.
This will make the Navigation drawer to render behind the transparent status bar.
Similar to some of the solutions posted, but in my case I did the status bar transparent and fix the position of the action bar with some negative margin
if (Build.VERSION.SDK_INT >= 21) {
getWindow().setStatusBarColor(Color.TRANSPARENT);
FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) toolbar.getLayoutParams();
lp.setMargins(0, -getStatusBarHeight(), 0, 0);
}
And I used in the toolbar and the root view
android:fitsSystemWindows="true"
There is good library StatusBarUtil from #laobie that help to easily draw image in the StatusBar.
Just add in your build.gradle:
compile 'com.jaeger.statusbarutil:library:1.4.0'
Then in the Activity set
StatusBarUtil.setTranslucentForImageView(Activity activity, int statusBarAlpha, View viewNeedOffset)
In the layout
<?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="#color/white"
android:orientation="vertical">
<ImageView
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:adjustViewBounds="true"
android:layout_height="wrap_content"
android:src="#drawable/toolbar_bg"/>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/view_need_offset"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<!-- Your layout code -->
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
For more info download demo or clone from github page and play with all feature.
Note: Support KitKat and above.
Hope that helps somebody else!
All you need to do is set these properties in your theme
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
The accepted answer worked for me using a CollapsingToolbarLayout. It's important to note though, that setSytstemUiVisibility() overrides any previous calls to that function. So if you're using that function somewhere else for the same view, you need to include the View.SYSTEM_UI_FLAG_LAYOUT_STABLE and View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN flags, or they will be overridden with the new call.
This was the case for me, and once I added the two flags to the other place I was making a call to setSystemUiVisibility(), the accepted answer worked perfectly.
Here is the theme I use to accomplish this:
<style name="AppTheme" parent="#android:style/Theme.NoTitleBar">
<!-- Default Background Screen -->
<item name="android:background">#color/default_blue</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
The Right solution is to Change a property in XML under your Activity tag to below style. It just works
android:theme="#style/Theme.AppCompat.Light.NoActionBar"

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.
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 :)

Categories

Resources