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
}
Related
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>
I'm trying to achieve that Status bar with PrimaryDarkColor And PrimaryColor like Lollipop on Kitkat and here is my try:
<style name="PopularTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimaryDark">#color/colorPrimaryDarkPopular</item>
<item name="colorPrimary">#color/ColorPrimaryPopular</item>
<!--here is what I've added to try to get transparency -->
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowContentTransitions">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
Also, I test this method with https://github.com/jgilfelt/SystemBarTint but it won't be my choice because I'm using another color for each activity.
How to achieve that status bar with PrimaryDarkColor and PrimaryColor in Kitkat?
Result:
I've just checked here on the app I work at how we do it.
First remove everything from under <!--here is what I've added to try to get transparency -->, we have nothing of those on our style. However it works the AppCompat theme or activity already does for you.
and then you add the extra rule for Kitkat:
#TargetApi(Build.VERSION_CODES.KITKAT)
private static void setupWindowKiKat(Window window) {
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
and call it from your activity:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT &&
Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP)
setupWindowKiKat(getWindow());
it is possible that you can add this to a values-v19\style.xml but above it's how it's on our app. Hope it helps.
You Should first root Your device, then go to Google play store and install (Wanam Xposed) http://repo.xposed.info/module/ma.wanam.xposed
open it and follow some steps right there then install (Xposed installer) http://repo.xposed.info/module/de.robv.android.xposed.installer
Then open this last Go to "download" and look for "Flat style colored bars" download and install it then go back to Modules activate it and reboot your phone and You will see the changes.
I hope i helped. i works great for me on ace 4 Sm-g316hu
This is not possible because they both run on a different API (lollipop on 20, 21 or 22).
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>
Currently, I'm using this to show my application background as phone wallpaper.
getWindow().setFlags(WindowManager.LayoutParams.FLAG_SHOW_WALLPAPER,
WindowManager.LayoutParams.FLAG_SHOW_WALLPAPER);
But for some reason when I start my application by pressing the icon. It just shows the activity screen with the icons on the home screen. I didn't use dialog but it looks like a dialog because layout is just set that way. So I just want to show the wallpaper whenever this activity is running. But it only shows the wallpaper only after the next event occurs such as switching to different activity. I already put that code on onCreate() and whenever I do setContentView()..... Is there way to do such thing or there is just no way?
For users of AppCompat, just use the following in your styles.xml, no need for code:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:colorBackgroundCacheHint">#null</item>
<item name="android:windowShowWallpaper">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
After long search and trial and error. I've found the solution to what I wanted. It was just creating separate themes.xml file and just tweak the Theme.Dialog which is already defined in default android themes.xml. All I did was change the Animation part. Originally in android themes.xml the line looks like this.
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
but since modifying in android themes.xml doesn't take the effect. I just created my own themes.xml as I said above and just set parent as android:Theme.Dialog. And added a line like this.
<item name="android:windowAnimationStyle">#android:style/Animation</item>
Thanks for the help and I hope this solution helps others.
Use following code -
rl = (RelativeLayout)findViewById(R.id.someid);
//relative layout is my root node in main.xml (yours may be linearlayout)
WallpaperManager wm = WallpaperManager.getInstance(this);
Drawable d = wm.peekDrawable();
rl.setBackgroundDrawable(d);// You can also use rl.setBackgroundDrawable(getWallpaper);
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