Develop Reference

Xamarin.Forms - Android - Change three dots or ellipsis icon in ContentPage.ToolbarItems

I have used the <ContentPage.ToolbarItems> in my code ti display a menu on the top right of the app. My app is only targeting Android at the moment even though it's written in Xamarin.Forms.
I am struggling to change the three dots icon. Any idea how I can achieve that either using Custom Renderer, Effects or styles.xml?
I have seen answers on this overflow but they are all referring to native android and I am struggling to understand how I can do it on Xamarin.Forms.
Thanks!

You can modify style.xml to achieve that .No mattter in forms or native , this will work .
Add item inside MainTheme.Base :
<item name="actionOverflowButtonStyle">#style/OverflowButtonStyle</item>
Then adding style inside resourses :
<style name="OverflowButtonStyle" parent="#android:style/Widget.ActionButton.Overflow">
<item name="android:src">#drawable/circle</item> //here set the wanted icon
</style>
The full style.xml is :
<?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 https://aka.ms/material-colors -->
<!-- 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="actionOverflowButtonStyle">#style/OverflowButtonStyle</item>
<item name="android:datePickerDialogTheme">#style/AppCompatDialogStyle</item>
</style>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#FF4081</item>
</style>
<style name="OverflowButtonStyle" parent="#android:style/Widget.ActionButton.Overflow">
<item name="android:src">#drawable/circle</item>
</style>
</resources>
The effect :

Extracting common attributes from a Dark and Light theme

I have a dark theme and a light theme in my app where the dark theme extends Theme.AppCompat.NoActionBar and the light theme extends Theme.AppCompat.Light.NoActionBar.
I have a lot of custom attributes in those light and dark theme that i have to duplicate in both those themes.
I was wondering if there is a way to actually have all those attributes in a common place and be used by both light and dark theme.
Example below to make things even more clear:
<style name="MotherThemeDark" parent="Theme.AppCompat.NoActionBar">
<!-- Base application theme common to all sdk versions -->
<!--Colors-->
<item name="colorPrimaryDark">#color/brand_dark</item>
<item name="colorPrimary">#color/brand</item>
<item name="colorAccent">#color/brand_accent</item>
<item name="colorPositive">#color/positive</item>
<item name="colorPositiveDark">#color/positive_dark</item>
<item name="colorNegative">#color/negative</item>
<item name="colorNegativeDark">#color/negative_dark</item>
<item name="colorNegativeLight">#color/negative_light</item>
<item name="colorMedium">#color/medium</item>
....
...Things specific to this theme goes here
....
</style>
<style name="MotherTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Base application theme common to all sdk versions -->
<!--Colors-->
<item name="colorPrimaryDark">#color/brand_dark</item>
<item name="colorPrimary">#color/brand</item>
<item name="colorAccent">#color/brand_accent</item>
<item name="colorPositive">#color/positive</item>
<item name="colorPositiveDark">#color/positive_dark</item>
<item name="colorNegative">#color/negative</item>
<item name="colorNegativeDark">#color/negative_dark</item>
<item name="colorNegativeLight">#color/negative_light</item>
<item name="colorMedium">#color/medium</item>
....
...Things specific to this theme goes here
....
</style>

One of the ways is to put the common attributes in a theme overlay (assuming you are using the AppCompat library), e.g. -
<style name=“MyCustomOverlay” parent=”ThemeOverlay.AppCompat”>
<item name="colorPrimaryDark">#color/brand_dark</item>
<item name="colorPrimary">#color/brand</item>
<item name="colorAccent">#color/brand_accent</item>
<item name="colorPositive">#color/positive</item>
<item name="colorPositiveDark">#color/positive_dark</item>
<item name="colorNegative">#color/negative</item>
<item name="colorNegativeDark">#color/negative_dark</item>
<item name="colorNegativeLight">#color/negative_light</item>
<item name="colorMedium">#color/medium</item>
</style>
and then apply android:theme=”MyCustomOverlay” to your root views. This will override the attributes set in your base theme (e.g. MotherTheme or MotherThemeDark) for the root views and all child views. Works for API 11+.
Reference: https://plus.google.com/+AndroidDevelopers/posts/JXHKyhsWHAH

Although I made the above post as an answer, since it helped me find a solution i will post the actual solution here :
I made the dark theme extend ThemeOverlay.AppCompat.Dark and then applied the motherThemeDark to the root layout of the fragment/activity that i wanted to be themed dark. Under the motherThemeDark i only had attributes that i wanted to override for a dark theme.
<style name="MotherTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Base application theme common to all sdk versions -->
<!--Colors-->
<item name="colorPrimaryDark">#color/brand_dark</item>
<item name="colorPrimary">#color/brand</item>
<item name="colorAccent">#color/brand_accent</item>
<item name="colorPositive">#color/positive</item>
<item name="colorPositiveDark">#color/positive_dark</item>
<item name="colorNegative">#color/negative</item>
<item name="colorNegativeDark">#color/negative_dark</item>
<item name="colorNegativeLight">#color/negative_light</item>
<item name="colorMedium">#color/medium</item>
....
...Things specific to this theme goes here
....
</style>
<style name="MotherThemeDark" parent="ThemeOverlay.AppCompat.Dark">
....
....
...Things specific to this theme goes here
....
</style>

How to set background color of android app and background of action bar

I am trying to modify my app to have a dark blue action bar with a light blue background. So far I have only been able to make the entire app dark blue. How can I modify my code to keep the action bar the color it is now but make the background with the team numbers a light blue? Please note my apps minimum API is 14.
I am currently using the following code in my styles.xml:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:background">#color/teamLightBlue</item>
</style>
<!-- Activity themes -->
<style name="Theme.Base" parent="android:Theme.Light" />
<style name="Theme.Sample" parent="Theme.Base" />
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="AppTheme">
<item name="android:actionBarStyle">#style/MyActionBarTheme</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBarTheme" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/teamDarkBlue</item>
</style>

If you choose to use Theme.AppCompat, you can change Action Bar's background color using:
<item name="colorPrimary">#ffffff</item>
but if you choose the Holo one, you can change that color using
<item name="android:colorPrimary">#ffffff</item>
Hope this helps.

As far as I know your code is good instead of Widget.Holo.Light.ActionBar as its not part of AppCompat v7. Use this instead
<style name="CustomActionBarTheme" parent="AppTheme">
<item name="android:actionBarStyle" tools:ignore="NewApi">#style/MyActionBarTheme</item>
<item name="actionBarStyle">#style/MyActionBarTheme</item>
</style>
<style name="MyActionBarTheme" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/teamDarkBlue</item>
<item name="background">#color/teamDarkBlue</item>
</style>
It should work fine!

Android actionbar background around title

Android Studio 1.1.0. SDK 22 Installed&Compiled, SDK 17 Target (I suppose it's not relevant, because issue occurs also on preview in IDE).
I started playing with Holo theme action bar styling and ran into an issue, involving background color. This is my styles.xml:
<resources>
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:background">#ff0d3200</item>
<item name="android:actionBarStyle">#style/BarTheme</item>
</style>
<style name="BarTheme" parent="android:Widget.Holo.ActionBar">
<item name="android:background">#443322</item>
</style>
</resources>
And this is output. I want app title's background color to be the same as action bar's. As I've said, it's the same on the preview, so I don't think it's because my phone(SDK17) or emulator. Overflow button behaves the same way, there just isn't any in this case.
I tried setting android:titleTextStyle in BarTheme to this style:
<style name="TitleTheme" parent="android:TextAppearance.Holo">
<item name="android:background">#443322</item>
</style>
But it didn't change a thing. What do I do to overcome this?

try ,
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">value</item>
<item name="android:titleTextStyle">#style/TitleColor</item>
</style>
<style name="TitleColor" parent="android:TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">value</item>
</style>

Due to David's input I solved my problem myself. I had to set windowBackground, instead of background in AppTheme. I'm not sure what is the exact difference, but it works properly. Remember not to change attribute in your BarTheme, because it won't work with windowBackground. Therefore correct styles.xml file is:
<resources>
<color name="bcColor">#ff0d3200</color>
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:windowBackground">#color/bcColor</item>
<item name="android:actionBarStyle">#style/BarTheme</item>
</style>
<style name="BarTheme" parent="android:Widget.Holo.ActionBar">
<item name="android:background">#443322</item>
</style>
</resources>
Note that color has to be defined as resource in this case and cannot be hardcoded. The clean way to do this is create colors.xml in values folder and define all colors there.

android Style dropdown of ActionBar

Currently I am working on a little android app. I try to change the background color of the ActionBar's dropdown menu. So far I was only able to change the background color of the ActionBar itself, but not of the dropdown menu. It simply does not change the color. Here is some code from my styles.xml:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light"></style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="android:actionBarStyle">#style/MyActionBarStyle</item>
<item name="actionBarStyle">#style/MyActionBarStyle</item>
<item name="android:actionDropDownStyle">#style/MyActionDropDownStyle</item>
</style>
<style name="MyActionBarStyle" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/background_color_action_bar</item>
<item name="background">#color/background_color_action_bar</item>
</style>
<style name="MyActionDropDownStyle" parent="#style/Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="background">#color/background_color_action_bar</item>
<item name="android:background">#color/background_color_action_bar</item>
<item name="android:popupBackground">#color/background_color_action_bar</item>
<item name="android:dropDownSelector">#color/background_color_action_bar</item>
</style>
The MyActionBarStyle part works but the MyActionDropDownStyle does not. I suppose that the parent of MyActionDropDownStyle might be wrong. Maybe someone of you has an idea and can help me.
Thanks in advance!