CODEWITHSUNDEEP
androidxamarin.formstoolbar
Charles
Charles

Reputation: 509

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

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?

Upvotes: 1

Views: 741

Answers (2)

Adrain
Adrain

Reputation: 1934

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>

Upvotes: 1

ToolmakerSteve
ToolmakerSteve

Reputation: 21243

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.

Upvotes: 1

Related Questions