Forum Xamarin.Forms

TabbedPage Icons

MichaelOConnorMichaelOConnor USUniversity ✭✭
edited February 2015 in Xamarin.Forms

I have killed many, many hours now trying to make icons appear for Tabbed Pages on iOS. According to all of the forum and blog posts I've seen this is supposed to be super simple.

In fact my page is exactly this simple:

public class MainPage : TabbedPage
{
    public MainPage ()
    {
        Page page = new Page {
            Title = "Title",
            Icon = "clock.png"
        };

        this.Children.Add (page);
    }
}

The tab shows up, the "title" shows up, the icon never does.

The PNG is in the Resources folder of the iOS project and the build action is set to BundleResource.

I've tried:

  • a wide variety of images for the icon - a txt.png that I got from a sample, varying sizes from 30x30 to 48x48.
  • using icons from 3rd parties specifically designed to be beautiful, awesome, iOS icons for my app.
  • ensuring that the filename is all lower case, no spaces, dashes, tildes, acronyms or puns.
  • using a FileImageSource instead.
  • cleaning the project, rebuilding the project, uninstalling the app, killing the emulator.
  • Throwing salt over my shoulder, buying a rabbit's foot and throwing pennies in a fountain.

There is either some secret sauce to this or a bug ... would appreciate any suggestions.

Thanks,

Michael

Posts

  • MichaelOConnorMichaelOConnor USUniversity ✭✭

    Thank you so much Geoff, your code fixed the issue for me straight away. I really appreciate it.

  • GeoffArmstrongGeoffArmstrong CAMember ✭✭

    No problem! We're all in this together. :smile:

  • AMAXAMAX USMember ✭✭

    @GeoffArmstrong said:
    Yeah, we had problems with this too. I ended up making a custom renderer for this.

    using UIKit;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.iOS;
    
    [assembly: ExportRenderer(typeof(TabbedPage), typeof(MyProject.iOS.Renderers.IosMainMenuRenderer))]
    
    namespace MyProject.iOS.Renderers {
      public class IosMainMenuRenderer : TabbedRenderer {
          public override void ViewWillAppear(bool animated)
          {
              base.ViewWillAppear(animated);
              var items = TabBar.Items;
              for (var i = 0; i < items.Length; i++) {
                  var icon = i == 0 ? "apple" : i == 1 ? "bear" : i == 2 ? "chair" : i == 3 ? "door" : "elephant";
                  items[i].Image = UIImage.FromBundle("ic_menu_" + icon);
                  items[i].SelectedImage = UIImage.FromBundle("ic_menu_" + icon + "_sel");
              }
          }
      }
    }
    

    This also solved the problem of specifying a selected image for the tabs in the case where simple tinting didn't suffice.

    How about the Toolbar item? Is it the same as TabbedRenderer?

  • Christin98Christin98 Member

    I am new to xamarin and I have been stuck on this similar issue for a long time. I have given coloured PNG images has icons for a button but in my android app it shows as an icon with white color only. The layout of the button is there but no color, only white. How to fix this in android..?

Sign In or Register to comment.