Changing color of 3 dots in Toolbar .net Maui

Question

In my project I have secondary toolbar items. For every other item in the toolbar I have a white design. How can I change the color if the 3 dots in my toolbar.

I specified the Toolbaritems in .xaml file.

<ContentPage.ToolbarItems>
<ToolbarItem IconImageSource="notification_icon.png" Order="Primary" Clicked="OnNotificationButtonClicked"/>
<ToolbarItem Text="Test1" Order="Secondary"/>
<ToolbarItem Text="Test2" Order="Secondary"/>
<ToolbarItem Text="Test3" Order="Secondary"/>
<ToolbarItem Text="Test4" Order="Secondary"/>
</ContentPage.ToolbarItems>

Answer 1

Hello,

In the android, you can following code to set the three icon to white. but you need to get the toolbar.

   toolbar.OverflowIcon.SetTint(ContextCompat.GetColor(Microsoft.Maui.ApplicationModel.Platform.CurrentActivity,Resource.Color.m3_ref_palette_white));  

If you use Shell, You can use custom renderer to get toolbar and set color of three dots.

Firstly, you need to create a shell renderer class in Android folder and set the color of three dots like following code.

   public class MyShellRenderer:ShellRenderer  
       {  
           public MyShellRenderer(Context context) : base(context)  
           {  
     
          }  
          protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker()  
           {  
               return new MyToolbarAppearanceTracker();  
           }  
       }  
      internal class MyToolbarAppearanceTracker : IShellToolbarAppearanceTracker  
       {  
           public void Dispose()  
           {  
               
           }  
     
          public void ResetAppearance(AndroidX.AppCompat.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker)  
           {  
              
           }  
          public void SetAppearance(AndroidX.AppCompat.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)  
           {              
               toolbar.OverflowIcon.SetTint(ContextCompat.GetColor(Microsoft.Maui.ApplicationModel.Platform.CurrentActivity,Resource.Color.m3_ref_palette_white));  
           }  
       }  

Then you need to register this custom renderer for shell in MauiProgram.cs.

   builder  
               .UseMauiApp<App>()  
               .ConfigureFonts(fonts =>  
               {  
                   fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");  
                   fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");  
               }).ConfigureMauiHandlers((handlers) =>  
               {  
   #if ANDROID  
                   handlers.AddHandler(typeof(Microsoft.Maui.Controls.Shell),typeof(YourProject.Platforms.Android.MyShellRenderer));  
   #endif  
               }  

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Thanks for the detailed info.

Just curious. By default, iOS gets a white colored icon.

or rendered required for iOS too?