NavigationPage.SetTitleIcon

MichaelOConnorMichaelOConnor ✭✭USUniversity ✭✭

What might cause an icon not to display? If I create a blank Xamarin Forms app and use the example from the documentation I can get an icon to display but in three other active projects with lots of code any call to NavigationPage.SetTitleIcon is ignored - no errors, just no icon. NavigationPage.SetBackButtonTitle works in every case.

  • Is there something specific about the size of the icon/image that must be used?
  • Does it require a specific file extension? JPG is used in the example and but isn't working for me.
  • I've tried using ContentPages, NavigationPages, ContentPages within NavigationPages, TabbedPages ...

Any ideas would be appreciated.

thanks.

Best Answers

Answers

  • MichaelOConnorMichaelOConnor ✭✭ USUniversity ✭✭

    What a super answer, thanks Mark.

    A few things I found trying to make this happen that may be useful to others:

    • calls to NavigationPage.SetTitleIcon(this,"path"); only work in the initializer of the content page. If you call it from OnAppearing it will simply be ignored.

    • you have to pass the contentPage, if you try to pass in the NavigationPage it will be ignored.

    • it's not actually a FileImageSource as indicated in the docs and intellisense, just a string filename.

  • MarkSmith.8123MarkSmith.8123 Xamurai USXamarin Team, University, XamUProfessors Xamurai

    Great notes Michael -- yes, since this is an attached property associated to a page (not the NavigationPage as you noted), it is only set when the page is initially constructed by the platform code (e.g. the UIViewController, or view).. that's why you have to set it as part of the constructor.

    By the way, you didn't ask this, but you can also set this in XAML which I find to be very useful:

    <ContentPage ... NavigationPage.TitleIcon="someicon.png">
    ...
    
  • MichaelOConnorMichaelOConnor ✭✭ USUniversity ✭✭

    @MarkSmith.1116 although I have it working now in a project on a ContentPage, I still can't get a logo to show up on a TabbedPage. I'm testing on iOS, I verified the case of the filename, etc. Are TitleIcons supported within a TabbedPage, which is the primary navigation for my app?

    thanks!

  • Quinn.MacKenzieQuinn.MacKenzie USMember

    Another thing worth mentioning (this is probably a bug): If the image you set in NavigationPage.SetTitleIcon contains any transparency, it doesn't seem to show up at all on iOS.

  • JimTyminskiJimTyminski ✭✭ USUniversity ✭✭

    Is it possible to have both and icon AND text?

  • codercamposcodercampos ✭✭ SVMember ✭✭

    This is not working if you are using FormsAppCompatActivity. This is the way AppCompat should work?

  • ShahriatHossainShahriatHossain ✭✭ USMember ✭✭

    I am trying to use this code on my content page xaml: NavigationPage.TitleIcon="logo.png" keeping this logo.png file on both of resources folder of ios as well as android. But this is only showing on my ios device but not for android, can you please help me how can I show this also for my android device. I am using here xamarin.forms.

  • mikewhite2731mikewhite2731 USMember

    @codercampos @ShahriatHossain , i have the same problem! no image is showed using FormsAppCompatActivity. Do you find a solution for this problem? Thank you!

  • codercamposcodercampos ✭✭ SVMember ✭✭
    edited July 2018

    @mikewhite2731 said:
    @codercampos @ShahriatHossain , i have the same problem! no image is showed using FormsAppCompatActivity. Do you find a solution for this problem? Thank you!

    Actually I solved it (thanks to a friend who works with Android).

    On Toolbar.xml you must add an ImageView with the Image you may want to add. This is an example of what I have done:

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.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="?attr/actionBarSize"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/im_navlogo"
            android:layout_gravity="center" />
    </android.support.v7.widget.Toolbar>
    

    Hope this helps you and anyone .. regards

  • codercamposcodercampos ✭✭ SVMember ✭✭

    @mikewhite2731 did it work for you?

  • mikewhite2731mikewhite2731 USMember

    @codercampos Yeah, it works like a charm! Thank you! :)

  • KenNickersonKenNickerson ✭✭✭ USMember ✭✭✭

    codecampos

    Your toolbar.xml looks to be what I need, however, I am new to Xamarin Forms - Android and need some help understanding how to implement the toolbar.xml that you have presented. If you could provide the style.xml and any changes to MainActivity.cs, I would greatly apprecaite it.

    thanks in advance

  • KuhdinkleKuhdinkle ✭✭ USMember ✭✭

    codercampos

    Worked for me too. Thanks. The doc on this is non-existent. NavigationPage.SetTitleIcon(child, "someicon.jpg");
    doesn't seem to work for Material Design. More explanation would be appreciated.

  • codercamposcodercampos ✭✭ SVMember ✭✭
    edited March 2017

    @Kuhdinkle
    I am not an Android expert but seems that when you call NavigationPage.SetTitleIcon(child, "someicon.jpg") does not reach the toolbar's render time (AKA (maybe) onDraw method). I am actually studying right now the Android Lifecycle and later clarify why this happens. Maybe making a CustomRenderer of your NavgationPage should be able to you to custom your icon anytime you want. For the moment this a quick workaround I think of (and most of the apps, does not change their Title Icons more than the initial set up)

  • andreim123andreim123 USMember
    edited April 2017

    On iOS there's another issue regarding setting the title icon. My attempt of doing it was through xaml, as recommended by @MarkSmith.8123
    <ContentPage ... NavigationPage.TitleIcon="someicon.png">

    On ios, this works only if the image is added to the Resources folder. It does not work however if it's added to Assets.xcassets.

  • MarkSmith.8123MarkSmith.8123 Xamurai USXamarin Team, University, XamUProfessors Xamurai

    Hi @AndreiManole --

    I think today that API requires a file-based resource, which means a separate icon image in Resources. You can use asset catalogs with Image, including the vector-based support (.pdf), but I don't think it works today for the navigation titlebar icon.

  • Pierre-ChristopheDusPierre-ChristopheDus ✭✭✭ FRUniversity ✭✭✭

    Hi guys, is there a way to display the icon on a single page only on Android?
    There is no problem on iOS, but I don't see how to achieve it on Android...

Sign In or Register to comment.