Xamarin Forms ToolbarItem text (only) is not displaying on Android (only)

user_4157812 0
Viewed 362

I have a working Xamarin Forms app for Android and UWP. (I have not yet attempted iOS.) I have the following ToolbarItem:

<ContentPage Title="Debug" ...  >

    <ContentPage.ToolbarItems>
        <ToolbarItem IconImageSource="Question_16x.png" Text="Help" Clicked="OnHelpPressed" Order="Primary" Priority="0"/>
    </ContentPage.ToolbarItems>
...

On UWP it works as I would expect:

Enter image description here

But on Android, either the Android simulator or a Samsung phone, I get just a very muddy question mark icon and no text "Help":

Enter image description here

If I remove the icon the text displays.

On both platforms, clicking or tapping the item drives the Clicked method as expected. It is the exact same icon in both projects.

How can I fix it?

xamarin.forms toolbar android
2 Answers

On Android and iOS, you could use the code below to display text and icons:

<ContentPage.ToolbarItems>
    <ToolbarItem IconImageSource="Question_16x.png" Order="Primary" Priority="0"/>
    <ToolbarItem Text="Help"Clicked="OnHelpPressed" Order="Primary" Priority="0"/>
</ContentPage.ToolbarItems>
user_163319930

To have an icon be less "muddy", use a larger icon bitmap.

Here is a question mark, designed to be high-resolution on a high DPI device (It's higher resolution than needed; shrink it down if you want):

High-resolution question mark

It is derived from Wikimedia - Icon-round-Question_mark.jpg.

--- To see more icons, go to Wikimedia Category:icons. It’s not the most convenient to browse; it’s easier to google what you want: Wikimedia icon question mark ---

Place this file in YourProjectName.Android\Resources\drawable folder. In the project's Solution Explorer pane, right-click that folder, "Add Existing Item", and browse to that file. This sets Build Action to "AndroidResource".

If you examine that file in a paint app, you'll see that there is some transparent area "padding" surrounding the question mark picture.

This is per Material Design icons in app bar / Specs - Mobile. To adjust, in a paint app, use "Image / Canvas Size" to change the amount of padding.

It was tested in xamarin-forms-samples/UserInterface/ToolbarItemDemos.

user_1993640
Related