Having an image filling a button in Titanium

Question

I'm working with Titanium studio on an Alloy project. In one of my pages, I would like to have a button with an image inside, an image that would fill the button.

What I'm doing now is :

<Button image="/images/micro.png"/>

It successfully retrieve the image, but it's displayed really small :

enter image description here

I also tried to do the same in JS :

win.add(Ti.UI.createButton({image:"/images/micro.png"}));

But I ended with the same result..

So, is there a way to manage the size of those images?

LHIOUI LHIOUI · Accepted Answer · 2014-06-18T07:22:18

if you wouldn't use backgroundImage you can create your own Button: example :

<Alloy>
    //Your stuff ....
    <View id="button">
        <ImageView id="buttImage" image="yourpath/yourIcon.png"/>
        <Label id='buttTitle" text="Button Title"/>
    <View/>
    //Your Stuff ...
</Alloy>

the in style.tss

"#button":{
        layout:'horizontal'
        backgroundColor:"##3498db",
        height:70,
        width:300
        }
"#buttImage":{
           height:50,
           width:50,
           left:10
           }
"#buttTitle":{
            font:{
                 fontSize:19,
                 color:"#000"
                }

and in .js file you add you click event Listener :

$.button.addEventListener("click",clickFunction);

Also you can take a look at this awesome widget where you can add icons and many customization ...

Having an image filling a button in Titanium

2 Answers