Forum Archive

Showing image in ui Button

mmontague

This is probably an easy one. But I've been spinning my wheels for a while so I thought it's time to ask for help.

I want to show a graphical image in a ui Button (not the black-white icons that are available through the ui designer, but emojis and custom images). But no matter how I try to do this, the image always shows up as single-color silhouette.

For example, here is the "getting started" sample code from the tutorial on ui, with an added line to set the image:

import ui

def button_tapped(sender):
    sender.title = 'Hello'

view = ui.View()                                      # [1]
view.name = 'Demo'                                    # [2]
view.background_color = 'white'                       # [3]
button = ui.Button(title='Tap me!')                   # [4]
button.center = (view.width * 0.5, view.height * 0.5) # [5]
button.flex = 'LRTB'                                  # [6]
button.action = button_tapped                         # [7]
button.image = ui.Image.named('Ear') # added this
view.add_subview(button)                              # [8]
view.present('sheet')                                 # [9]

This results in a blue ear.

I'm likely missing something about how these objects are getting drawn. Thanks for you help!

techteej

@mmontague

Change button.image = ui.Image.named('Ear') # added this
to button.image = ui.Image.named('Ear').with_rendering_mode(ui.RENDERING_MODE_ORIGINAL)

This should remove the blue tint.

mmontague

Ok that worked great! I read the docs and it looks like buttons default to TEMPLATE rendering mode. I never would have figured that out.

Thanks for the help!!