I want to change the Navigation Bar fully transparent like on the picture below.
I tried <item name="android:windowTranslucentNavigation">true</item> but it is not fully transparent (more like 50%).
Is there a solution? Because i found nothing to it, but I saw some apps that used it like Nova. And its even in googles guidelines https://material.google.com/layout/structure.html#structure-system-bars
I was inspired by Google Keep app, which have similar implementation like shown below:
So i tried to find a proper post on how to achieve this thing but unfortunately found nothing and also above answers weren't working. So i decided to try out all the flags related to navigationBar Android Studio was suggesting.
Let me explain in detail:
Only android:navigationBarColor won't do any thing when you are using a light theme. But on dark theme, it will work.
Setting windowTranslucentNavigation to true will do 2 things:
draw the activity below the soft navbar
override navigationBarColor and force it to be transparent.
Which will look like below image:
If you use FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS (follow #Frankenxtein's answer) you will get below result:
Which is somehow close to desired result, but it isn't because it draws activity components below navbar. And also it mess your padding and margin (see full screenshot here). And more, you have to do it for each activity and also have to adjust current margin.
The Solution
This can be achieved without compromising current layout. To do this in Dark theme, you have no issue, just setting android:navigationBarColor will do the work.
However our goal here is to do it with a light theme let (#FFFFFF). Using android:windowLightNavigationBar which requires API 27 or higher along with android:navigationBarColor will result what we want.
<item name="android:navigationBarColor">#color/colorPrimaryDark</item>
<item name="android:windowLightNavigationBar">true</item>
Here for my app case colorPrimaryDark is #FFFFFF in light theme and dracula in dark theme, you can also declare a new variable for this. Which yields below results:
Light Theme
Dark Theme
Here android:navigationBarColor is setting background colour of navbar. And android:windowLightNavigationBar setting dark button colours and indicates that background is light as you can understand from it's name.
Hope this helps !
use following code in onCreate of your Activity:
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);
}
and in your styles.xml:
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentNavigation">false</item>
Since no one has mentioned this and I spent too much time trying to figure it out on my own. A solution for API 29+ to make the system bars fully transparent regardless of anything:
<item name="android:enforceNavigationBarContrast">false</item>
<item name="android:enforceStatusBarContrast">false</item>
You can achieve that using FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS. Documentation explains:
Flag indicating that this Window is responsible for drawing the
background for the system bars. If set, the system bars are drawn with
a transparent background and the corresponding areas in this window
are filled with the colors specified in getStatusBarColor() and
getNavigationBarColor().
Set it like that in your Activity's onCreate:
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
Try this
<resources>
<style name="Theme" parent="android:Theme.Material.Wallpaper.NoTitleBar">
<item name="android:navigationBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
It worked for android >= 10
You can try the color by default color android
<item name="android:navigationBarColor">#android:color/transparent</item>
<item name="android:windowLightNavigationBar">true</item>
<item name="android:windowTranslucentNavigation">true</item>
By the way you can try this
<item name="android:fitsSystemWindows">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
Related
Background
I'm trying to prepare dark theme for an app, and one of the requirements is to have a specific color for cards and dialogs : #ff3c454c
The problem
Whether I set it by force ( app:cardBackgroundColor="#3c454c") , by reference ( app:cardBackgroundColor="#color/...) or just in the theme - in all cases I don't get the color I've set. Instead I get the color of #525A61.
I've tested just a red color (#f00) just to be sure it affects the card, and it does, and for this color it indeed gets to be fine. But for the color I've set, it doesn't.
What I've tried
As I wrote, I tried multiple ways to set the color. In the beginning I wanted to use just the theme itself, so I've set it as such:
styles.xml
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
...
<item name="colorBackgroundFloating">#color/colorBackgroundFloating</item>
<item name="colorSurface">#color/colorBackgroundFloating</item>
</style>
res/values-night/colors.xml
<color name="colorBackgroundFloating">#ff3c454c</color>
Later I tried to use the color directly and even set it as hard coded. Still got the incorrect color when it gets shown.
Seeing this could be a bug on the library itself, I've reported about this here (include a sample project, if you wish to check it out).
I've noticed the exact same issue occurs for BottomNavigationView and probably other similar cases.
The question
Why does it occur?
Is there any workaround for this?
Something that will fix it globally for all views that use these attributes ?
What you are seeing is the elevation overlay that they introduced to make elevation more noticeable while in Dark Theme, where shadows are not so visible. You can read about it here : https://material.io/develop/android/theming/dark/ in the section "Elevation Overlays"
The simple solution if you don't want this behavior is to add this to your theme.
<item name="elevationOverlayEnabled">false</item>
And you can also adjust it to another color or even a more subtle version of the overlay by changing the alpha:
<item name="elevationOverlayColor">#80FFFFFF</item>
EDIT with more info from https://github.com/material-components/material-components-android/issues/1133
If you want to disable it for only one component or widget, you can define a style for it with a theme overlay and use it in a specific layout:
<style name="ThemeOverlay.MyApp.ElevationOverlayDisabled" parent="">
<item name="elevationOverlayEnabled">false</item>
</style>
<style name="Widget.MyApp.CardView" parent="Widget.MaterialComponents.CardView">
<item name="materialThemeOverlay">#style/ThemeOverlay.MyApp.ElevationOverlayDisabled</item>
</style>
And if you want to disable it for all cards in your app but keep it in other components you can set that style as the default style for material card views:
# Set in your app theme
<item name="materialCardViewStyle">#style/Widget.MyApp.CardView</item>
Background: My background is in web development, ruby and javascript. I'm working on a mostly react-native app, so very likely I'm missing something basic.
What I want
android navigation bar to be white with dark system buttons see image in link white navigation bar
My Current Code
res/values/style.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowLightNavigationBar">true</item>
<item name="android:windowTranslucentNavigation">false</item>
<item name="android:navigationBarColor">#FFFFFF</item>
</style>
</resources>
What is happening instead
The background AND the buttons are white. which is not so great for UX.
** What I have Tried **
this is what got me where I am now Change navigation bar icon color on Android
I have tried putting style.xml in a values-v27 folder.
I just worked on this same topic and found out you need to run at least Android 9.0 (or API level 28) on the device/emulator for this to work.
Also, I had to add this to the color of the bar:
<item name="android:navigationBarColor">#android:color/white</item>
So, recommended steps:
Create a values-v28 folder
Insert the style:
<item name="android:navigationBarColor">#android:color/white</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowLightNavigationBar">true</item>
In your other values folder, you kind of have to live with the fact that this windowsLightNavigationBar doesn't apply...
Small remark
I also found a bug on this change, when putting app in background and then opening it again, the navbar buttons stay white for a second before getting the dark color
Your code is working as intended for me. Make sure you have the file name and file path written correctly:
https://imgur.com/xclYDuZ
A new approach would be:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
window.navigationBarColor = ContextCompat.getColor(this, android.R.color.white)
WindowInsetsControllerCompat(window, window.decorView).isAppearanceLightNavigationBars = true
}
With the help of ActionBarSherlock I try to get my app running on pre 3.0 devices. There is a blue divider in the action bar, which I want to have removed.
I figured out that it isn't a divider, but part of the background graphic of the action bar. To get rid of the blue line I decided to override the background like this:
<style name="MyActionBar" parent="android:Widget.Holo.ActionBar">
<item name="android:background">#drawable/black</item>
<item name="background">#drawable/black</item>
</style>
I also set the background in the Java code:
getSupportActionBar().setStackedBackgroundDrawable(this.getResources().getDrawable(R.drawable.black));
As a result the blue line disappears on 4.x devices, but is still visible on 2.3.x devices. How do I get rid of the blue line on 2.3.x devices?
Stupid mistake: I used setStackedBackgroundDrawable instead of setBackgroundDrawable. It works fine with setBackgroundDrawable. This is the correct method to set the background of the action bar. setStackedBackgroundDrawable sets the background of the tab bar.
Seems that the blue line is part of the TabWidget you have there... But if it isn't you can have a look at this webpage: http://jgilfelt.github.io/android-actionbarstylegenerator/
It's a really good Action Bar style generator. Worth a try :)
actionBarDivider attribute belongs to the theme
Remove it like this:
<style name="AppTheme" parent="Theme.Sherlock">
<item name="android:actionBarDivider">#null</item>
</style>
I was changing the background of the Actionbar in my App and to make text readable again I have to change the color of the text. I was successful with title/subtitle and the tab-texts, but I am struggling with the text of the action-items - they stay white no matter what I tried . Anyone has a hint on how to do that?
Also the overflow-icon is white which does not look too good on the wooden background - is that an extremely good reason to use the stuff below? I am not really sure what's the reason to not do it, but as I do not have a big device-test-park I better want to be sure ;-)
<!-- the following can be used to style the overflow menu button
only do this if you have an *extremely* good reason to!! -->
<!--<style name="MyOverflowButton" parent="Widget.Sherlock.ActionButton.Overflow">
<item name="android:src">#drawable/ic_menu_view</item>
<item name="android:background">#drawable/action_button_background</item>
</style>-->
I also struggled with this, but the solution to changing action item text color was:
<style name="My.Theme" parent="Theme.Sherlock.Light">
<item name="android:actionMenuTextColor">#android:color/white</item>
</style>
The key here was to use this attribute in the general theme, not in the actionbar style.
Try starting with android:theme="#style/Theme.Sherlock.Light" in your Manifest and then changing your styles. The light theme features dark action items. Or just look through the light theme to find out how to change them.
How can I change the color of the underline beneath the tabs? It's currently the light blue, and I can't find any resources on how to change this for Android 3.0.
Additionally, I'd like to change the text color for the menu items that show up on the right of the ActionBar as a result of: android:showAsAction="ifRoom|withText"
Anyone know how to change these?
You can control the appearance of the tabs by using the properties android:actionBarTabStyle, android:actionBarTabBarStyle, and android:actionBarTabTextStyle.
This section in the official developer guide shows a sample xml to customize the action bar's style.
Regarding the text of the menu options check the properties actionMenuTextAppearance and actionMenuTextColor.
As additional info, here's how I found out how to change the blue bar below each tab (the answer above is perfectly good, but I lacked little information that I put here, which might be useful to somebody).
You just need to change the background to a 9 patch drawable.
Here's how it looks like:
http://android-developers.blogspot.com/2011/04/customizing-action-bar.html
Source available here:
http://code.google.com/p/styled-action-bar/source/browse/trunk/res/drawable/actionbar_tab_bg.xml
9 patches available here:
http://code.google.com/p/styled-action-bar/source/browse/trunk/res/drawable-mdpi
I know this was really easy, but again, it might be useful so I'm just dropping the links here.
None of these solutions worked for me. I changed the colors of my tabs as follows:
This is in the themes.xml
<style name="MyApp" parent="android:style/Theme.Holo">
<item name="android:actionBarTabTextStyle">#style/MyApp.ActionBar.MyTabStyle</item>
</style>
This is in styles.xml
<style name="MyApp.ActionBar.MyTabStyle" parent="android:style/Widget.Holo.ActionBarView_TabText">
<item name="android:textColor">#00ff00</item>
</style>
This should make your tabs green.
I think that you can use:
<resources>
<style name="MyTheme" parent="android:style/Theme.Holo.Light">
<item name="android:actionMenuTextColor">#color/...</item>
</style>
</resources>
Regards