Use background image on variable size buttons on Android

You must Login before you can answer or comment on any questions.

I have troubles making the backgroundImage property work on Android with dynamic size buttons. The following code works well on iPhone and the image stretch properly but Android ignore it and doesn't respect the dimensions of my corners:

app.tss

"Button": {
  color:'#fff',
  backgroundImage: '/button_orange.png',
  borderRadius: 5,
  left: 10,
  right: 10,
  width:Ti.UI.FILL,
  height:57,
  font:{fontSize:20,fontWeight:'bold',fontFamily:'Helvetica Neue'}
},
 
"Button[platform=ios]": {
  style:Ti.UI.iPhone.SystemButtonStyle.PLAIN,
}
Screen shots

Even when I use the draw9patch tool I got the same result, but this time with the black borders displayed:

app.tss - addition

"Button[platform=android]": {
  backgroundImage: '/android/button_orange.9.png',
}
Screen shot

I know that the Kitchen sink has the button.js file that style buttons but it is using buttons that match the size of the given images and that is not a solution for me at this moment, I want to make it work with variable width/height.

Any idea how to make this thing work?

2 Answers

Hi

There are two likely things causing your problem;

  • The image you supply that will smart stretch MUST be equal to or smaller than the width and height of the view it sits behind. So if your button height is 57, then your button graphic must be 57 pixel or less in height.
  • When referencing the patch9 image, you DO NOT need to reference the .9 section, so your;

"Button[platform=android]": {
  backgroundImage: '/android/button_orange.9.png',
}
Should not be included as it will try and load the image as if it was standard image - so you will see the bars, if you had referenced it as;
"Button[platform=android]": {
  backgroundImage: '/android/button_orange.png',
}
Then Android realises there is a 9patch image and uses that instead. As your own tss references this;
"Button": {
  ...
  backgroundImage: '/button_orange.png',
  ...
},
Then that is sufficient for both Android and iOS. But to make it work well, place the iOS one in the iphone folder and the Android one in the android folder. When the app is compiled the virtual iphone/android folders disappear and you just reference the image as if they had not been there;
"Button": {
  ...
  backgroundImage: '/button_orange.png',
  ...
},
And place the images as follows;
/{appname}/app/assets/iphone/button_orange.png
/{appname}/app/assets/android/button_orange.9.png
This should work a treat.

Here are my images based on your example;

— answered 1 year ago by Malcolm Hollingsworth
answer permalink
4 Comments
  • I will try and take a look at your code this evening and report back. My solutions was tested on iOS and Android so I know it should work..

    — commented 1 year ago by Malcolm Hollingsworth

  • Hi Malcolm,

    Sorry to bother you but have you had a chance to take a look at this?

    If you haven't and it is easier for you to post a working example somewhere where I can grab the code I'm open to that option too.

    Thanks

    — commented 1 year ago by Alberto Trujillo

  • Hi, sorry I was not able to so far. I will check it first thing in the morning and report back.

    — commented 1 year ago by Malcolm Hollingsworth

  • Show 1 more comment

Hi Malcolm,

Thank you so much for your answer, unfortunately your solution didn't work either and I'm using the images you provided.

Placing the button images into specific folders as you mention, and then just use '/button_orange.png' as only path outputs no image at all. I placed a copy of 'button_orange.png' in the assest folder to see if that would do the trick but I ended up with the same result.

I have create a repository on github with my code so you can have a better look at it.

Once again, thank you so much for your help.

— answered 1 year ago by Alberto Trujillo
answer permalink
2 Comments
  • Quick tip; please comment on the related answer or the actual question if there is no answer - rather than creating a whole new answer which is really a comment - it makes it harder in the future to work out threads if any answers score change or other answers are added. (You are not being told off)

    — commented 1 year ago by Malcolm Hollingsworth

  • Sorry about that, I will continue my activity in the previous thread.

    — commented 1 year ago by Alberto Trujillo

Your Answer

Think you can help? Login to answer this question!