Develop Reference

Understanding styles

I'm trying to set a custom colour for my buttons in Android application but value set for accentColor is always used as button background colour. I am trying to set a global colour for all buttons without having to specify styles or theme for each button individually.
Can you explain please how styling works in Android? I understand the basics, but overriding existing themes is never working for me :(
styles.xml
<resources>
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:titleTextColor">#ffffff</item>
<item name="android:buttonStyle">#style/AppTheme.Button</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.Button" >
<item name="android:backgroundTint">#color/colorPrimaryDark</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

Short answer: Try going to the source code of how the
Theme.MaterialComponents.Light.NoActionBar is defining the style for
the buttons and override those attributes.
Android styling works by merging all the defined attributes in a theme. For example, you have an AppTheme that includes theming for every built-in view. If you create a new theme for your button and your define just a couple of attributes, what android studio does is to merge all the attributes defined in the AppTheme with your new attributes. So if you want to override the buttons, you need to go deep and find out what are exactly the attributes defined in the general AppTheme you set in your application, they may not be the same.
For example, this is how I changed the color of all the buttons in my app since they were using a global attribute for it:
In the general styles.xml file, I put:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="colorButtonNormal">?myCustomColor</item>
...
</style>
But if I wanted to change the backgroundTint attribute of my buttons, I had to do this:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="colorButtonNormal">?myCustomColor</item>
<item name="android:buttonStyle">#style/AppButtonStyle</item>
...
</style>
<style name="AppButtonStyle" parent="Widget.AppCompat.Button">
<item name="android:backgroundTint">?attr/colorAccent</item>
</style>
Also, check out this cool Medium post for another developer experience in this topic.

I managed to solve the issue. The main point to notice here is that I am using Theme.MaterialComponents and not AppCompact.
I have defined a new style and I set it to buttonStyle, which refers to style for AppCompact button. In order to set a style for the material button, I had to use "materialButtonStyle" instead of "buttonStyle".
All relevant properties that can be overridden for MaterialComponents can be found in material design documentation: https://www.material.io/develop/android/components/material-button/
So the final code looks like this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorSecondary">#color/colorAccent</item>
<item name="floatingActionButtonStyle">#style/AppTheme.Test</item>
<item name="materialButtonStyle">#style/AppTheme.Button</item>
<!--<item name="buttonStyle">#style/Widget.MaterialComponents.Button.Icon</item>-->
</style>
<style name="AppTheme.Button" parent="#style/Widget.MaterialComponents.Button">
<item name="android:backgroundTint">#D400EB</item>
</style>
<style name="AppTheme.Test" parent="#style/Widget.MaterialComponents.FloatingActionButton">
<item name="backgroundTint">#A305B1</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>
</resources>

Unable to change Navbar Color

I tried so many things to change the navbar colour such as
Android lollipop change navigation bar color
android change navigation bar color
How to change system navigation bar color
Nothing works
I added the item to styles.xml - using Android 8.1
<item name="android:navigationBarColor">#color/theme_color</item>
Anyone knows what is the best way to do this in Xamarin.Android
UPDATE: I tried the following code in my style file
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- 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:windowFullscreen">true</item>
<item name="android:windowNoTitle">true</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="Theme.AppCompat.Light.NoActionBar">
<item name="color">#color/red</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>

While fixing another issue I had to change and minimum API level to
Lollipop and noticed that
<itemname="android:navigationBarColor">#color/theme_color</item>
started working when minimum API level is set to Lollipop.
So I think for some reason Xamarin requires to use use Minimum API version Lollipop for this to work

This works for me.
You need to create a new style for drawer toggle like this:
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/white_color</item>
</style>
And add this to your preferable style.
<style name="NoActionbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/primary</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
And finally use NoActionbarTheme theme in manifest file within your Activity.
Hope it will help you.

Styling actionBar action item button

So I have this actionBar:
How do I change the style of the MUTE button text so that it isn't bold and is smaller and is of a different color? Adding android:actionMenuTextColor to AppTheme has no effect. Defining android:actionBarStyle also has no effect, like it's being ignored! I've looked at every other answer I can find, nothing works!
These are the styles that produce the actionbar seen above:
<style name="AppBaseTheme" parent="#style/Theme.AppCompat">
<item name="colorPrimary">#color/actionbar_bgr</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
</style>
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:windowBackground">#color/activity_bgr</item>
<item name="android:textColor">#color/activity_text</item>
<item name="android:textSize">#dimen/small_text_size</item>
<item name="android:actionBarStyle">#style/NewActionBar</item>
<item name="android:actionMenuTextColor">#color/test_pink</item>
</style>
<style name="NewActionBar">
<item name="android:background">#color/test_pink</item>
<item name="android:titleTextStyle">#style/NewActionBarTitle</item>
<item name="android:displayOptions">showHome|showTitle</item>
</style>
<style name="NewActionBarTitle">
<item name="android:textSize">#dimen/action_bar_text_size</item>
<item name="android:textColor">#color/test_yellow</item>
</style>

Since you're using the Theme.AppCompat you need to drop the android: in your items name. Also read the answer here and the resource linked in it.

Use android:actionMenuTextAppearance in your main theme. For example, you could set that to #style/NewActionBarTitle:
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:actionMenuTextAppearance">#style/NewActionBarTitle</item>
</style>

Change Color of Actionbar in Android

I am trying to change the background color of actionbar in my App but this is showing different on my app. Instead of coloring the actionbar the whole activity is color.
I am not sure why this is happening? I just want the main actionbar and settings actionbar colored.
Please check the screenshot.
Main Activity Map:
Preference Settings:
I also have transparent Actionbar with UP Navigation enabled for all my sub activities other than the main activity and preference settings activity.
I am not sure why it is showing like the above:
Here is style.xml (values-v14):
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:background">#FF5050</item>
</style>
<style name="dialogtheme" parent="#android:style/Theme.Holo.Light.DarkActionBar"></style>
<!-- Transparent ActionBar Style -->
<style name="AppTheme.Light.ActionBar.Transparent" parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#android:color/transparent</item>
</style>
<!-- Activity Theme with transparent ActionBar -->
<style name="AppTheme.TransparentActionBar.Light" parent="#style/AppBaseTheme">
<item name="android:actionBarStyle">#style/AppTheme.Light.ActionBar.Transparent</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:displayOptions">showHome|homeAsUp|showTitle</item>
<item name="android:icon">#android:color/transparent</item>
<item name="android:actionBarTabTextStyle">#style/ActionBarTabTextStyle.Tabtheme</item>
<item name="android:actionBarDivider">#drawable/verticallinefordivder</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle.MapsLocation</item>
</style>
<style name="simpledialog" parent="android:Theme.Holo.Light.Dialog">
<item name="android:windowNoTitle">true</item>
</style>
<style name="ActionBarTabTextStyle.Tabtheme" parent="#style/AppBaseTheme">
<item name="android:textSize">18sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#android:color/black</item>
</style>
<style name="ActionBarTabStyle.MapsLocations" parent="#android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator</item>
</style>
<style name="myPreferenceTheme" parent="#style/AppBaseTheme">
<item name="android:textColor">#color/blue</item>
</style>
<style name="Widget.ActionButton" parent="#style/AppBaseTheme">
<item name="android:background">?android:attr/actionBarItemBackground</item>
<item name="android:paddingLeft">12dip</item>
<item name="android:paddingRight">12dip</item>
<item name="android:minWidth">56dip</item>
<item name="android:minHeight">?android:attr/actionBarSize</item>
</style>
</resources>

A little change and you action bar will be red:
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/AppTheme.Light.ActionBar</item>
</style>
<style name="dialogtheme" parent="#android:style/Theme.Holo.Light.DarkActionBar"></style>
<!-- Transparent ActionBar Style -->
<style name="AppTheme.Light.ActionBar" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:background">#FF5050</item>
</style>
I have changed item in AppBaseTheme & AppTheme.Light.ActionBar .
Now you are good to go. let me know if it works however working at my end :P

You can try set custom view in action bar.
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(you_custom_layout);

I know this is not right answer to this question but if you want to edit your ActionBar, you can use this online Android Action Bar Style Generator.
At least you can create a style and check yours to find differences and learn how to edit your ActionBar.

How to change the background color of the action bar in Android?

I was working hard to achieve this but I had no luck. What I tried to do is to change the background color from the style that I attached in my main style tag. This is my code:
<resources>
<style name="AppBaseTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item ></item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#2E495E</item>
</style>
Still nothing changed.
I get this in my application:
http://i.imgur.com/m1MrGwk.png

I had the same issue and it's probably the same problem you were having. Notice the docs say the following:
each style property that you declare must be declared twice..
So my issue was I declared it for 2.1 and up, but not for 3.0 and greater so my Galaxy S4 of course could not see any changes to the colours I was making.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!--Support Library compatibility-->
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:background">#color/green</item>
<!--Support Library compatibility-->
<item name="background">#color/green</item>
</style>
<style name="NoActionBar" parent="Theme.AppCompat.Light">
<item name="android:windowNoTitle">true</item>
</style>

Is this the only style.xml you have? Else check if you are modifying
for the right API