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>
Related
I know it sounds duplicate but it is not.
I have read a whole article about implementing what I want at android studio official site but no help.
My goal is to draw behind the system bars like this photo: ( I also want the hide the system bars which in this picture does not happen )
In other words I want to open my app in an immersive/fullscreen mode which is required in almost every app.
But whenever I try to draw behind the status bar (the bar that shows notification and battery etc.), the status bar and its items reveal themselves meaning the content I drew behind the status bar is obscured by the content of the status bar.
and whenever I try to hide the status bar, my content do not appear behind it. it is like a paradox.
To draw behind the system bars I use this method, as the above link suggests:
WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
To hide the system bars I use this:
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());
But whenever I do each of them, it undoes the other one.
Fixed here. Just needed to handle devices with cutouts.
hello #YoloWex you just need to use a Fullscreen theme in your app theme style.xml and make sure the "android:windowFullscreen" is set to true
<style name="Theme.myApp" parent="Theme.AppCompat.Light.NoActionBar.FullScreen">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</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>
I am trying to change the appearance of the navigation page in my Xamarin Forms application. I want a blue bar with all text being white. I have been able to set the NavigationPage's properties, but I cannot set the bar button items or the back button's colour. Here are 2 screenshots illustrating what my app looks like currently:
The black colour looks awful, this NEEDs to be white. Now I had a look at how I can change these colours however nothing seemed to work.
I have currently tried the solutions presented in these posts:
Change navigation bar back button color in xamarin android
Change action bar colors
Change navigation bar back button color in xamarin android
This half works, it sets the toolbar text ALL to white... but then my app's theme is dark, all of the colours change and conflicts with the implemented design.
This is getting the point where it is ridiculous, I implemented this on iOS in under 5 minutes and i've spent the best part of a day trying to make some text white...
How can I set just the text on the navigation bar to white, an example in iOS (without code infront of me) is self.navigationBar.tintColour =' White', which would apply white over any content on the nav bar.. Exactly what i want!
Thanks & here is my styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MainTheme" parent="MainTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#2196F3</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#1976D2</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#FF4081</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight and colorSwitchThumbNormal. -->
<item name="windowActionModeOverlay">true</item>
<item name="android:datePickerDialogTheme">#style/AppCompatDialogStyle</item>
<item name="android:actionBarPopupTheme">#style/CustomActionBarPopupTheme</item>
</style>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#cbff34</item>
</style>
<style name="CustomActionBarPopupTheme" parent="android:ThemeOverlay.Material.Light">
<item name="android:colorBackground">#cbff34</item>
<item name="android:textColor">#cbff34</item>
</style>
</resources>
You can add a style to your styles.xml,
<style name="ToolbarStyle" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize color of navigation drawer icon and back arrow -->
<item name="colorControlNormal">#ffffff</item>
</style>
and add this as theme to your toolbar in toolbar layout.axml(in android project under layout folder) , check below
android:theme="#style/ToolbarStyle"
API 21+ supports android:statusBarColor which I'm using and setting to white in my theme. On API 23 on my Nexus 6P the status bar icons show up with darker tint, so you can see them against the white status bar.
However on API 21/22, the icons are also tinted white so they disappear against the white background. From my understanding Google set status bar icons to white in Lollipop and advised against a white background. Is there anyway to setColorFilter() or do similar to the icons in the status bar?
Here's my theme:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/gray</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:statusBarColor">#color/white</item>
</style>
If I change my android:statusBarColor to #cccccc, for example, then I will see the white status bar icons. But I would like to tint them dark gray and keep the status bar color white.
Have a look at this attribute. I didn't test this but this should work.
Use this for dark button color :
<style name="YourTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/YourTheme.ActionBar</item>
</style>
Use this for light button color :
<style name="YourTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/YourTheme.ActionBar</item>
</style>
I want to remove the shadow that appears below the appcompat action bar so that the background of the action bar is completely transparent.
This is my theme and action bar style:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:actionBarStyle">#style/TransparentActionBar</item>
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/TransparentActionBar</item>
<item name="windowActionBarOverlay">true</item>
</style>
<!-- Transparent Action Bar Style -->
<style name="TransparentActionBar"
parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#android:color/transparent</item>
<!-- Support library compatibility -->
<item name="background">#android:color/transparent</item>
<item name="elevation">0dp</item>
</style>
My minimum API level is 16
I've tried several solutions for this including:
Setting elevation to 0dp only works for Lollipop devices.
I get a "resource not found" error if I try to use windowContentOverlay
Setting the background of the root view to a color like white or transparent doesn't work
I've been trying to get this to work on 4.4.4 to no avail. Is it not possible below API level 21?
EDIT:
it turns out that the windowContentOverlay only works with the android prefix:
<item name="android:windowContentOverlay">#null<item/>
Trying to also define it without the prefix results in the resource not found error (this error points to the one with the prefix for whatever reason). I honestly don't understand why this occurs. I can only assume appcompat doesn't support the windowContentOverlay attribute.
Set windowContentOverlay to a drawable that will be drawn under the action bar. If you don't want a shadow set it to null, like so:
<item name="android:windowContentOverlay">#null</item>
and
<item name="windowContentOverlay">#null</item>
This works API level 16 and up.
I'm trying to do what I thought would be simple but after two days of searching for an answer, have given up. I am writing an app and I want the user to be able to switch from the Holo dark theme to the Holo light theme via preferences. Holo Light will be white window background with black text, and Holo dark will be the inverse. I also want them to be able to set the color of the action bar to something they like. Problem I'm having is when I succeed in flipping the background of the main window (by using android:background in styles.xml), the action bar icon and buttons do not take on the color of the action bar. If I use android:windowBackground in styles.xml, the action bar now looks fine and changes color, but the main window background does not. Here is the xml from styles.xml:
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<!-- API 14 theme customizations can go here. -->
</style>
<style name="ThemeHoloDark" parent="android:Theme.Holo">
<item name="android:background">#color/background_holo_dark</item>
<item name="android:windowIsFloating">false</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:textColor">#0734f9</item>
<!-- blue -->
</style>
<style name="ThemeHoloLight" parent="android:Theme.Holo.Light">
<item name="android:background">#color/background_holo_light</item>
<item name="android:windowIsFloating">false</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:textColor">#f90707</item>
</style>
The code I am using to switch theme is this:
if (themeLight == true )
setTheme( R.style.ThemeHoloLight);
else
setTheme( R.style.ThemeHoloDark);
actionBar = getActionBar();
setActionBarTheme(this, actionBar );
Here are some screenshots of what I'm talking about. The first couple show the action bar flipping from light to dark when the preferences are selected:
--Apparently I don't have enough reputation points to post images. :(
I have tried pretty much everything I have found on the web but must be missing something. Any help will be appreciated!
You need to create a seperate custom actionBarStyle like this . android:background in the ActionBarStyle will set the background for action bar.
<style name="ActionBarStyle" parent="android:Widget.Holo.Light.ActionBar">
<item name="android:titleTextStyle">#style/HoloTitleText</item>
<item name="android:background">#color/Red</item>
</style>
and set it to the main custom style .android:background in the ThemeHoloLight will set the background for window.
<style name="ThemeHoloLight" parent="android:Theme.Holo.Light">
<item name="android:background">#color/DarkGreen</item>
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
</style>
You can also change the action bar title color like this
<style name="HoloTitleText" parent="android:TextAppearance.Holo">
<item name="android:textColor">#color/white</item>
</style>
Hope this is what your looking for.