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"
Related
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>
On android 7 (nexus phone) the title in my context menu appears white. I would expect it to be black as it is on all other devices I tested. The rest of the app looks good.
Update:
I figured out that the colorAccent is the culprit (AppCompat styles various things based on that). I set it to white in a child theme because the tabBar needs to have white tab indicators.
So now the issues is that I need white tab indicators in the actionbar, black titles in dialogs and context menus and Orange text on buttons styled with the Button.Borderless.Colored style. All of these seem to be controlled with colorAccent. I can make a seperate style for the buttons. But the styles of the dialogs and tab indicators are still conflicting. For legacy reasons I cannot use the new toolbar with a tablayout (That one is stylable) but have to use the Actionbar. Any ideas?
White title in context menu screenshot:
Thanks in advance!
Theme:
<resources>
<!-- default theme -->
<style name="Theme.MyApp" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Remove actionbar -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<!-- Basic coloring -->
<item name="colorPrimary">#color/MyAppOrange</item>
<item name="colorPrimaryDark">#color/MyAppOrangeDark</item>
<item name="colorAccent">#color/MyAppOrangeDark</item>
<!-- AppCompat dialog themes -->
<item name="dialogTheme">#style/Theme.MyApp.Dialog</item>
<item name="alertDialogTheme">#style/Theme.MyApp.Dialog.Alert</item>
///// Tried this with a custom style but that just f*cked up my tabs...
<item name="actionBarTabStyle">#style/CustomActionBarTabs</item>
</style>
<!-- Alert and dialog styles -->
<style name="Theme.MyApp.Dialog" parent="Theme.AppCompat.Light.Dialog">
<item name="colorPrimary">#color/MyAppOrange</item>
<item name="colorPrimaryDark">#color/MyAppOrangeDark</item>
<item name="colorAccent">#color/MyAppOrangeDark</item>
</style>
<style name="Theme.MyApp.Dialog.Alert" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorPrimary">#color/MyAppOrange</item>
<item name="colorPrimaryDark">#color/MyAppOrangeDark</item>
<item name="colorAccent">#color/MyAppOrangeDark</item>
</style>
</resources>
Djangow, you need to define a new style that with the text color as the specific color you want and then set that style in the app theme you want to use. See this link for the exact coding needed.
UPDATE: Djangow, I apologize. I looked into it and found that you have to add this line <item name="android:actionMenuTextColor">#color/your_color</item> to the main App theme. I found the answer here. Hope that helps
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.
I am trying to set a custom actionbar for my app like so
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<!-- API 11 theme customizations can go here. -->
<item name="android:actionMenuTextColor">#FFFFFF</item>
<item name="android:actionBarWidgetTheme">#style/MyActionWidgetTheme</item>
<item name="android:actionBarStyle">#style/BasicActionBar</item>
</style>
<style name="BasicActionBar" parent="android:Widget.Holo.ActionBar">
<item name="android:background">#color/red</item>
</style>
when i don't include
<item name="android:actionBarStyle">#style/BasicActionBar</item>
The actionbar and tab bar appear dark but i want to set the actionbar's color and keep the tabs dark. When i set the style the action bar changes color but the tabs turn to white.
I am pretty sure the problem is
parent="android:Widget.Holo.ActionBar"
I have tried any bunch of different possible values for this but can't find one that keeps the tab bar dark
this link helped me http://jgilfelt.github.io/android-actionbarstylegenerator/
#style/Widget.Sherlock.Light.ActionBar.Solid.Inverse
did the trick
In my application I am using my own theme based on the Theme.Holo.Light
However I have customised the actionBarStyle, setting the background drawable to a blue gradient to fit with my app's style.
However, with the Halo light theme, the action bar text is dark, & the default icons, such as the Up Nav arrow and the menu icon are dark, these don't go on my blue gradient.
As you can see from my XML below, I have managed to correct the title text colour but I can't find the attribute I need to override for the icons.
How can I change tell the theme to effectively use the icons on the ActionBar from Theme.Halo
instead of those Theme.Halo.Light but making the rest of my application remain using Theme.Halo.Light
Here's my current XML
<style name="MyLightTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="android:style/Widget.Holo.ActionBar">
<item name="android:background">#drawable/blue_gradient_light</item>
<item name="android:titleTextStyle">#style/Theme.ActionBar.TitleTextStyle</item>
</style>
<style name="Theme.ActionBar.TitleTextStyle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#color/solid_white</item>
</style>
Thanks for your help
Use Theme.Holo.Light.DarkActionBar as your base if you want to do this. It will take care of these details.