Custom Translucent Color (changing transparency) - android

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>

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 ?

Dynamically change status bar color without losing transparency

I know I can use colorPrimary to determine the color of Toolbar, and colorPrimaryDark to determine the color of Status bar.
I'm using the following theme
<!-- Base application theme. -->
<style name="Theme.Noteplus.Base.Brown" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimaryLight</item>
<item name="colorPrimaryDark">#ff0000</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
One of the interesting attribute is, when I slide out the navigation menu, the status bar becomes transparent automatically.
During run-time, sometime I would like to change the color of status bar.
setTitle("Recycler bin");
toolbar.setBackgroundColor(Color.BLUE);
getWindow().setStatusBarColor(Color.parseColor("#5694FF"));
It will looks as follow
Unfortunately, calling setStatusBarColor, will also loss the transparency attribute of status bar, when we slide out the navigation menu.
May I know, how to change status bar color during run-time, without lossing its transparency attribute? For my case, after I changing the status bar to blue during run-time, when I slide out navigation drawer, I wish to see status bar transparency attribute being retained.
Update
I had tried
private void setStatusBarColor(int color) {
if (Build.VERSION.SDK_INT >= 21) {
Window window = getWindow();
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(color);
}
}
It doesn't help to provide transparency attribute when the navigation drawer slides out.
You are using a DrawerLayout. That means, that instead of using Window#setStatusBarColor(int) you should be using one of DrawerLayout#setStatusBarBackground() overloads.
The equivalent of your code is following:
ColorDrawable colorDrawable = new ColorDrawable(0xFF5694FF);
drawerLayout.setStatusBarBackground(colorDrawable);
I've applied minor changes to the template app that can be created with Android Studio wizard:
I guess your problem with transparency is not about the method you are using but its rather about the color itself!
You are using this getWindow().setStatusBarColor(Color.parseColor("#5694FF"));
Try to use RGBA instead of RGB so make it transparent, should be something like this:
getWindow().setStatusBarColor(Color.parseColor("#5694FF80"));
private void changeStatusBarColor(String color){
if (Build.VERSION.SDK_INT >= 21) {
Window window = getWindow();
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.parseColor(color));
}
}
If you check here in stack overflow everyone before that line of code set the transparency of the status bar to solid with
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)

Showing content behind status and navigation bar

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.

Showing content behind Navigation Bar

I'm currently working on something where I want the status and navigation bars to be transparent, with the content going behind them. Currently, I have the bars set to #android:color/transparent in styles.xml and am able to get the content behind the status bar with this code:
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE |
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
);
However I am still struggling to get it behind the nav bar. Any help appreciated.
Thanks,
Josh
You need:
getWindow()
.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
Check out the answer here:
Showing content behind status and navigation bar
Try to add these in your activity's style.xml:
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:fitsSystemWindows">true</item>
hope this can help.

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