Adding text over an image/button/icon in Flex

Question

I have a GridItem(). I need to add a small image with text over it, and I can't quite figure out how. I can add a Button and set the label to something and that works great. I can't figure out how to change the image of the button though. I can add an Icon, but the icon just then sits next to the text inside the button.

Any ideas? I'm pretty new to flex and am not sure how to proceed.

I've tried creating some object (Button, Image, Canvas etc), and then adding a child of either text/label, Image, or both. I can always either get just the image or just the text to show up. — user1652427
Sounsd like you have a Z-order issue there; but without seeing the code it is tough to debug. "Please share the code for what you've tried" — JeffryHouser

Josh Josh · Accepted Answer · 2012-09-08T21:53:39

Instead of using a built in component, why not build a custom one? Create a new MXML Component, give it a Group superclass. Then just create exactly what you want.

Should look something like this in the end.

<s:Group width="200" height="50">
    <s:Image id="image" source="blah" left="0" right="0"/>
    <s:Label id="label" text="Blah some more" verticalCenter="0" horizontalCenter="0" />
</s:Group>

That is obviously fairly simplistic, but you get the idea. You can expand upon it with ease. You can add a click event to the base Group, you can add more items within it. And, best yet, you can reuse it all you like. Alternatively, you can just throw that code right into your current class/component and be done with it. The built-in components are great, but sometimes it truly is just easier to build a custom one yourself.

Adding text over an image/button/icon in Flex

1 Answers