I have activity where I overlay Android status bar over a picture near the top of the screen.
I achieve that by inheriting activity style from Theme.AppCompat.DayNight.NoActionBar and then doing this in onCreate():
getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
That achieves transparent status bar at the top, which is fine.
The problem is, this also makes Android navigation bar at the bottom transparent and overlaid over controls near the bottom of the activity, which is not what I want. I want navigation bar to be opaque, and take up its vertical space without going over my controls, as in common activities that don't spill over status bar.
Is it possible to control transparency and overlap of the navigation bar separately from the status bar without any kind of artificial margin or padding ?
If I understand correctly, your intention is to get a transparent status bar without touching the navigation bar as shown in the screenshot below.
Personally I also tried to use the parameter FLAG_LAYOUT_NO_LIMITS without achieving the desired result. The problem was that I get the status bar and navigation bar at the same time being "covered" by the graphics as buttons. A temporary solution was to detect the navigation bar and programmatically add padding to the graphics. This is partially useless, as many android users use the adb shell overscan command to hide the navigation bar. The main problem with this command is that it effectively hides the navigation bar but deceives the system as the boolean that represents whether the bar is present or not is not changed. This API was completely removed in Android 11.
The desired effect can be achieved by playing with styles.
Add these attributes to your activity style:
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
You will get a style like this:
<style name="ExampleThemeStackOverFlow" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<item name="colorPrimary">#color/colorAccentX</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:navigationBarColor">#color/colorPrimary</item>
<item name="android:windowLightNavigationBar" tools:targetApi="27">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
I tried to play with colors, but then the border becomes sharper.
My styles.xml
<style name="MyTheme" parent="AppTheme">
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowTranslucentStatus">true</item>
<!-- system_bar_background_semi_transparent 40% black -->
<item name="colorPrimary">#66000000</item>
</style>
PS: screenshot from the emulator (Android 9, API level 28), I can not test on a real device.
The look of status bar with android:windowTranslucentStatus is controlled by system. The attribute exists since Kitkat, where it would cause a gradient from black top to transparent bottom. On AOSP Lollipop this is replaced by solid #44000000 but can't be relied upon as different manufacturers implement this differently. E.g. my late Xperia L used the same implementation as Kitkat.
If you want complete control of the status bar color use the following combination of attributes instead:
<!-- Make the app responsible for drawing status bar and navigation bar backgrounds. -->
<item name="android:windowDrawsSystemBarBackgrounds" tools:targetApi="lollipop">true</item>
<!-- Change the status bar background to whatever you want. -->
<item name="android:statusBarColor" tools:targetApi="lollipop">#6000</item>
The dark space behind translucent objects is caused by shadow from elevation. Shadow is drawn behind the whole object not just around it. You can remove the shadow from action bar like this:
<style name="MyTheme" parent="AppTheme">
<item name="actionBarStyle">#style/Widget.MyApp.ActionBar.Translucent</item>
</style>
<style name="Widget.MyApp.ActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="elevation">0dp</item>
<!-- While at it you can keep normal primary color and change just the action bar background here. -->
<item name="background">#6000</item>
</style>
I want to make the navigation bar fully transparent in my app. I have tried the other answers, but they only make the status bar fully transparent and the navigation bar still has a dark half-transparent color. Here is my code:
styles.xml:
<style name="AppTheme" parent="android:Theme.Material.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
Activity.java:
getWindow().setFlags(
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
Here is the result I'm trying to get: goal
and here is the result I'm currently getting: result
Is there any way to achieve a fully transparent navigation bar?
Try to set <item name="android:android:windowTranslucentStatus">true</item> 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.
Try it may it will work.
I would like to change the color of highlighted bar in Android Studio:
How can i do it?
You can change it by setting the android:statusBarColor or android:colorPrimaryDark attribute of the style you're using for your app in styles.xml.
(android:statusBarColor inherits the value of android:colorPrimaryDark by default)
For example (since we're using an AppCompat theme here, the android namespace is omitted):
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimaryDark">#color/your_custom_color</item>
</style>
On API level 21+ you can also use the Window.setStatusBarColor() method from code.
From its docs:
For this to take effect, the window must be drawing the system bar
backgrounds with
WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS and
WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS must not be set.
If color is not opaque, consider setting
View.SYSTEM_UI_FLAG_LAYOUT_STABLE and
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN.
To set these flags you could do something like this:
// getWindow() is a method of Activity
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
The status bar is a system window owned by the operating system.
On pre-5.0 Android devices, applications do not have permission to alter its color, so this is not something that the AppCompat library can support for older platform versions. The best AppCompat can do is provide support for coloring the ActionBar and other common UI widgets within the application.
On post-5.0 Android devices,
Changing the color of status bar also requires setting two additional flags on the Window; you need to add the FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS flag and clear the FLAG_TRANSLUCENT_STATUS flag.
Window window = activity.getWindow();
// clear FLAG_TRANSLUCENT_STATUS flag:
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// add FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS flag to the window
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
// finally change the color
window.setStatusBarColor(activity.getResources().getColor(R.color.my_statusbar_color));
You can also add these lines of code in the main activity
if (Build.VERSION.SDK_INT >= 21)
{
getWindow().setStatusBarColor(ContextCompat.getColor(this,R.color.statusbar)); //status bar or the time bar at the top (see example image1)
getWindow().setNavigationBarColor(ContextCompat.getColor(this, R.color.dark_nav)); // Navigation bar the soft bottom of some phones like nexus and some Samsung note series (see example image2)
}
example image1 setStatusBarColor
example image2 setNavigationBarColor
add the status bar color to your style and done
<item name="android:statusBarColor">#color/black</item>
this is for API level 21+
changing status bar color is available just for android above lollipop
1.you can change status bar color programmatically by this line:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
getWindow().setStatusBarColor(ContextCompat.getColor(context, R.color.your_color));
}
2.you can do this with an smooth transition animation:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
int startColor = getWindow().getStatusBarColor();
int endColor = ContextCompat.getColor(context, R.color.your_color);
ObjectAnimator.ofArgb(getWindow(), "statusBarColor", startColor, endColor).start();
}
3.or you can add this to your theme style in values/styles.xml file. item colorPrimaryDark will be used for your app status bar color
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorPrimaryDark">#color/your_color</item>
will only be visible in Lollipop and greater than Lollipop(API) devices.
P.S. you need to have Theme.AppCompat as your base/main theme
If you use custom actionBar so you can try this one.
<style name="AppThemeBrowser" parent="Theme.AppCompat.NoActionBar">
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
</style>
Or if you use AppTheme actionBar so, you can try this one
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
------------------------------------
</style>
Hope this will help you.
HappyCoding
Change it in the themes as usual, like not using jetpack compose.
colorPrimary and colorPrimaryVariant in themes and themes night.
<style name="Theme.AndroidDevChallenge" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/SweetRed</item>
<item name="colorPrimaryVariant">#color/SweetRedDarker</item>
<item name="colorOnPrimary">#color/black</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_200</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
Right click theme folders in the values folder, which is in the res folder :|
<!--write something like this in the color.xml, with your own color code-->
<color name="status_bar_light">#FFea80fc</color>
<color name="status_bar_dark">#FF263238</color>
In themes.xml, change colorPrimaryVariant to this
<item name="colorPrimaryVariant">#color/status_bar_light</item>
Add this in theme.xml(night)
<item name="colorPrimaryVariant">#color/status_bar_dark</item>
And there you have it, happy coding ;)
To change the color for particular activity just use
app:statusBarBackground="#color/colorPrimaryDark"
or any other color value in place of #color/colorPrimaryDark in the mail layout file of your desired activity in the parent layout tag like in my case default it was CoordinatorLayout which is parent of all (Keep all other layout within this CoordinatorLayout otherwise it may not work)
Hope this helps, this worked in my case although i'm not completely sure how.
Note:- Status bar color is supported on api level 19 or 21 and above api level.
Please check this Link : change status bar color
I'm using ActionBarSherlock for an Android app I'm making, and am displaying an image on one of my screens. On this screen, I want the actionbar to go away and come back as the user presses on the screen without the image being stretched. This part I have working, but to do so I created the following style and applied it to that screen. . .
<style name="DarkActionBar.ActionBarOverlay" parent="#style/Theme.Sherlock">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
The problem is, now my action bar is transparent and I can't figure out why. If I change the parent of my style to Theme.Sherlock.Light.DarkActionBar, it is no longer transparent but doesn't look the same as Theme.Sherlock, so it will be inconsistent with the rest of my app.
I've also tried the following. . .
<style name="MyActionBar" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="android:background">#color/black</item>
<item name="background">#color/black</item>
</style>
<style name="DarkActionBar.ActionBarOverlay" parent="#style/Theme.Sherlock">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
Can anyone tell me why the windowActionBarOverlay items are making my actionbar transparent, and what I can do to fix it? Thank you.
As the transparent ActionBar is a feature called "Actionbar Overlay", I think the problem is inside this line:
<item name="windowActionBarOverlay">true</item>
You may need to set it to false.
Please have a read of the following paragraph:
To enable overlay mode for the action bar, you need to create a custom
theme that extends an existing action bar theme and set the
android:windowActionBarOverlay property to true
Also please have a look at Overlaying the Actionbar on Android Developers