Dark-text transparent status bar with opaque navigation bar - android

Wait, it is not a duplicate
A similar question has been asked here, but not addressing dark-text status bar.
What I want to do
I want to achieve 3 things at the same time:
Transparent status bar (Not hiding it!)
Dark-text status bar
Opaque (or black) navigation bar (which does not let activity content inflate underneath it)
What I have tried
The solution
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
can only achieve 1 and 3;
The solution here can only achieve 1 and 2;
And the solution here can only achieve 2 and 3....
The Question
So is there a way to achieve all 1, 2 an 3?!

Inside styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="android:navigationBarColor">#android:color/black</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
In activity's onCreate():
override fun onCreate(savedInstanceState: Bundle?) {
window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
Will result in this:

Related

Unable to set the status bar transparent

I'm trying to have both the NavigationBar and the StatusBar as transparent and then use windowInsets to adapt my Views.
I'm now able to have a transparent NavigationBar that correctly applies windowInsets, but I can't change the StatusBar color. I've tried every combination I've found online, but the only one that is working is using FLAG_LAYOUT_NO_LIMITS, which cause the windowInset to return 0 for the systemWindowInsetBottom (and this isn't good because I'm using a BottomAppBar).
While the StatusBar is solid white, windowInset.systemWindowInsetTop return the right amount of pixels and the views are correctly layed out, but when I scroll the RecyclerView it disappears behind the StatusBar.
This is my current setup, I really need a different set of eyes to spot the bug.
MainActivity
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setWindowBehindSystemBars()
colorizeStatusBar()
setContentView(R.layout.activity_main)
}
private fun setWindowBehindSystemBars() {
window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
}
private fun colorizeStatusBar() {
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
window.statusBarColor = ContextCompat.getColor(this, R.color.transparent)
}
Theme
<style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- other attributes, all related to color -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:navigationBarColor">#color/transparent</item>
</style>
EDIT:
I tried setting android:windowBackground to blue and when the application opens I can see the blue behind the StatusBar for a brief moment, so I think something is setting the color back to white after that.

status bar hinding the layout in android

I want my layout to start below the status bar and expand till the end of screen . Navigation bar should be hidden .
For this i have used this theme :
<style name="AppTheme.NoActionbarThemeDefaultStatusColor" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
</style
for my actiivity.
And i also use below code in the oncreate method of my activity.
window.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_LAYOUT_STABLE
or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
or View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
or View.SYSTEM_UI_FLAG_LOW_PROFILE)
Everything is fine i.e status bar is there , no navigation bar is there .
But the layout's top part is hidden below status bar . I want layout to start after status bar . But not sure how to do this.
Try this code...
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
getWindow().setStatusBarColor(Color.TRANSPARENT);
}
}

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.

Can I set FLAG_LAYOUT_NO_LIMITS only for status bar?

I need to make transparent status bar. I am using getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS) and it is make status bar as I want. But it also affect navigation bar: it became transparent and getWindow().setNavigationBarColor(Color.BLACK) do nothing.
Is there way to make transparent status bar only and not navigation bar?
this work for me
getWindow().setFlags(
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
)
styles.xml
<style name="TranslucentStatusBar" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
</style>
v21\styles.xml
<style name="TranslucentStatusBar" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
status bar will be transparent or translucent, navigation bar won't
hope this helps!
using mikepenz's comment
what I exactly working code (converted to kotlin) below here.
// at AppCompatActivity, min SDK is 16, I tested api 25
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
if (Build.VERSION.SDK_INT >= 19 && Build.VERSION.SDK_INT < 21) {
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
}
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) {
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
window.statusBarColor = Color.TRANSPARENT
}
setContentView(R.layout.activity_main)
}
Scroll down to check how the end result looks like
First of all, define your styles.xml something like this-
styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
DO NOT add the following line
<item name="android:windowTranslucentStatus">true</item>
Adding above line will NOT shift the layout up when the soft keyboard is shown on a Dialog with an EditText
Then override this style in v21 and v23 styles like this-
v21/styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
</style>
v23/styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
</style>
Activity code - Kotlin
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
window.setFlags(
LayoutParams.FLAG_LAYOUT_NO_LIMITS,
LayoutParams.FLAG_LAYOUT_NO_LIMITS
)
setContentView(R.layout.YOUR_LAYOUT_RESOURCE_ID)
.
.
.
}
Activity code - Java
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(
LayoutParams.FLAG_LAYOUT_NO_LIMITS,
LayoutParams.FLAG_LAYOUT_NO_LIMITS
)
setContentView(R.layout.YOUR_LAYOUT_RESOURCE_ID)
.
.
.
}
End result
getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
fun showTransparentStatusbar() {
activity!!.window.setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN)
}
fun removeStatusbarFlags() {
activity!!.window.clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN)
}
Try this and wont regret it
window.decorView.systemUiVisibility = (
View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
)
You can use like this
to hide status bar and navigation bar
WindowManager.LayoutParams attributes = getWindow().getAttributes();
attributes.flags |= WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN | WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS;
getWindow().setAttributes(attributes);
and for showing the navigationBar again use this
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}
the color is grey for me, maybe you can force it to your primary color
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
Just flag above worked for me. Navigation buttons are visible, status bar and action bar are hidden.
getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
Is not working. Test device nexus 5.
i found the solution bro
<style name="transparent" parent="Theme.AppCompat.Light.NoActionBar">//AppCompat is the key; You can choose any other theme than the light-theme, but stick to AppCompat
<item name="android:windowTranslucentStatus">false</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
//Other styling(optional)
</style>
and then apply this transparent theme to your activity manifest like this
<activity
...
android:theme="#style/transparent"/>
For all those interested in workarounds/hacks because Android API concerning this matter is just awful. Do not use any system window flags, set negative margin to the root of your layout, and then use setStatusBarColor to make your StatusBar transparent.
statusBarHeight = getResources().getDimensionPixelSize(R.dimen.margin_24dp);
int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId != 0) {
statusBarHeight = getResources().getDimensionPixelSize(resourceId);
}
FrameLayout.LayoutParams rootParams = (FrameLayout.LayoutParams) binding.getRoot().getLayoutParams();
rootParams.topMargin = -statusBarHeight;
binding.getRoot().setLayoutParams(rootParams);
getWindow().setStatusBarColor(getResources().getColor(R.color.transparent));
where binding.getRoot() is of course the root of your layout
and result is
yes , You can use this code in Style.xml
<style name="transparent" parent="Theme.AppCompat.Light">//AppCompat is the key; You can choose any other theme than the light-theme, but stick to AppCompat
<item name="colorPrimaryDark">#00000000</item>//THIS is the important part.
//Other styling(optional)
</style>
Then to apply it to your layout, simply add the following line in the root layout(view):
android:theme="#style/transparent"
getWindow().setFlags(
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
)
<style name="TranslucentStatusBar" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
</style>
This works on Samsung S10+ (Pie), Oppo F7 and Oppo F5S (Oreos):
getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_IN_OVERSCAN);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
As asked by the original poster, the app area is expanded on top and covers the status bar (where the clock is). But the android navigation (virtual) buttons remains at the bottom of the screen and the app sits on top of the android buttons.

How can I prevent the Nav Bar from leaving behind a black bar? (immersive mode)

An app that uses immersive mode leaves a black bar at the bottom of the screen when the app is returned to after waiting a while (activity is destroyed).
What is happening: (I have enabled the developer option: "Don't keep activities" to reproduce this).
First time launch of the app. Immersive mode works as expected.
Swipe up to reveal the 'immersive sticky' nav bar, and use the 'Home' button to leave the app. The background of the nav bar briefly shows a black background before the app closes.
Use the 'Recents' button, and select the app to resume it.
The app opens to briefly reveal the nav bar over a black bar. The system ui collapses into immersive mode but the black bar remains.
This bug also only appears on Lollipop, not KitKat.
I have stripped back the app to simply launching a dummy activity with no functionality apart from setting System UI flags:
public class DummyActivity extends FragmentActivity {
#Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (hasFocus) {
setSystemUiVisibility();
}
}
public void setSystemUiVisibility() {
if (getWindow() != null && getWindow().getDecorView() != null) {
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_FULLSCREEN
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
}
}
}
EDIT:
After creating a new fresh project with only this Activity I have seen this issue reproduced when using an app theme extending "android:Theme.Holo"..., and fixed the issue in this sample project when I extend the Material theme instead:
Change
<style name="AppTheme" parent="android:Theme.Holo.Light.NoActionBar.Fullscreen">
</style>
to
<style name="AppTheme"parent="android:Theme.Material.Light.NoActionBar.Fullscreen">
</style>
Unfortunately this fix hasn't solved the issues in my main project, but it brings me closer to a solution and might help others with the same issue.
I was having the same problem. Here are a few updates I made which made it go away. Hopefully one of these works for you!
activity_main.xml
android:fitsSystemWindows="false"
style-v21
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowSharedElementsUseOverlay">false</item>
MainActivity.java
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
| View.SYSTEM_UI_FLAG_FULLSCREEN
);
For me it was a black bar at the top. Key thing was this in the activity style:
// Important to draw behind cutouts
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
Here is my code:
1- In Activity
private fun hideSystemUI() {
sysUIHidden = true
// Enables regular immersive mode.
// For "lean back" mode, remove SYSTEM_UI_FLAG_IMMERSIVE.
// Or for "sticky immersive," replace it with SYSTEM_UI_FLAG_IMMERSIVE_STICKY
window.decorView.systemUiVisibility = (
View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
// Hide the nav bar and status bar
or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // Hide nav bar
or View.SYSTEM_UI_FLAG_FULLSCREEN // Hide status bar
)
}
private fun showSystemUI() {
sysUIHidden = false
window.decorView.systemUiVisibility = (
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
// Set the content to appear under the system bars so that the
// content doesn't resize when the system bars hide and show.
or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION // layout Behind nav bar
or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN // layout Behind status bar
)
}
2- In root view of xml layout
android:fitsSystemWindows="false"
3- Style for the Full screen Activity:
<style name="FullscreenTheme" parent="AppTheme">
<item name="android:actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowBackground">#null</item>
<item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
<item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>
<item name="android:statusBarColor">#50000000</item>
<item name="android:navigationBarColor">#50000000</item>
// Important to draw behind cutouts
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style>
<style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
<item name="android:background">#color/sysTransparent</item>
</style>
Using
<style name="AppTheme"parent="android:Theme.Material.Light.NoActionBar.Fullscreen"> </style>
does solved the problem, but it only work for api:21.
In order to make it works for all system. You can create a directory called style-v21 in res directory, and put that style.xml there. Android system is smart enough to pick which one to use for new or old phone.

Categories

Resources