Winteriscoming
Winteriscoming

Reputation: 191

How change color of three btn at toolbar crossplatform

I could not understand why the button with dots is not displayed. But clicking in this area opens drop-down menus.

enter image description here

The dots on the button are white and they just blend in with the background. I found a solution for android, but how do I go about making a cross platform solution to the problem?

enter image description here

<ContentPage.ToolbarItems>
    <ToolbarItem 
        Order="Secondary"
        
        Text="Item 0"
        Priority="0"/>
    <ToolbarItem 
        Order="Secondary"
        Text="Item 1"
        Priority="1"/>
    <ToolbarItem 
        Order="Secondary"
        Text="Item 2"
        Priority="2"/>
</ContentPage.ToolbarItems>

Upvotes: 1

Views: 1205

Answers (2)

Iman Roosta
Iman Roosta

Reputation: 2440

in file style.xml find MainTheme and add

<item name="android:textColorSecondary">#592bca</item> 

then in file Toolbar.axml add or change

android:theme="@style/MainTheme"
android:popupTheme="@style/MainTheme.Base" 

Upvotes: 0

Wendy Zang - MSFT
Wendy Zang - MSFT

Reputation: 10978

When the Order property is set to Secondary, behavior varies across platforms. On UWP and Android, the Secondary items menu appears as three dots that can be tapped or clicked to reveal items in a vertical list. On iOS, the Secondary items menu appears below the navigation bar as a horizontal list.

A easy is to change the background color of the toolbar.

App.xaml.cs:

 var navPage = new NavigationPage(new Page2());
        this.MainPage = navPage;

        navPage.BarBackgroundColor = Color.Blue;

enter image description here

Update:

Android:

Change the color of 3 dots in style:

  <style name="MainTheme" parent="MainTheme.Base">  
<item name="android:textColorSecondary">#54FF9F</item> 
</style>

Use the androidx.appcompat.widget.Toolbar in the Toolbar.xml:

  <?xml version="1.0" encoding="utf-8"?>
 <androidx.appcompat.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:theme="@style/MainTheme"
android:popupTheme="@style/MainTheme.Base" 
 />

enter image description here

iOS:

Like what i said in previouss reply, the Secondary items menu on ios appears below the navigation bar as a horizontal list.

enter image description here

You could use IOSToolbarExtensions instead.

NuGet: https://www.nuget.org/packages/IOSToolbarExtensions/

Install it and add the code below into AssemblyInfo.cs:

[assembly: ExportRenderer(typeof(ContentPage), typeof(IOSToolbarExtensions.iOS.Renderers.IOSToolbarExtensionsContentPageRenderer), Priority = short.MaxValue)]

enter image description here

Upvotes: 3

Related Questions