Button BackgroundImage, but silver button corners still show?

Question

Button BackgroundImage, but silver button corners still show?

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

ANDROID 2.3.3 Samsung Galaxy S

Okay so I created a button, set a background image (blue rounded rectangle) but the corners of the grey button show up behind the image no matter what way I stretch it screenshot

Is there an easy way to stop this? Maybe I should just use an image instead of a button... (that worked)

1 Answer

Your Answer

Think you can help? Login to answer this question!

Accepted Answer

Accepted Answer

I have successfully used background images on buttons without the button borders showing. See screenshot.

But I explicitly set the height and width of the button to match the image. And this gets a little tricky with android's multiple resolutions, but it can be done.

I provide multiple versions of my background image for the different resolutions, and then I use the code in the Sizer class of the TitanUp library to get the right height and width for the button. Example:

var btnw = TU.UI.Sizer.getDimensionExact (56, 74, 111, 148);
    var btnh = TU.UI.Sizer.getDimensionExact (25, 33, 49, 65); 
    var btnsp = parseInt ((_vw - 4 * btnw) / 5);
 
    _btn1 = Ti.UI.createButton ({
        width: btnw,
        height: btnh,
        left: btnsp,
        style: Ti.UI.iPhone.SystemButtonStyle.PLAIN,
        backgroundImage: '/images/btn_1-normal.png',
        backgroundSelectedImage: '/images/btn_1-active.png'
    });

(I'm putting them into a view that has layout = 'horizontal'.)

So I provide four versions of btn1-normal.png and four versions of btn_1-active.png:

Resources/android/images/res-ldpi/btn_1-normal.png     56x25
Resources/android/images/res-mdpi/btn_1-normal.png     74x33
Resources/android/images/res-hdpi/btn_1-normal.png    111x49
Resources/android/images/res-xhdpi/btn_1-normal.png   148x65
 
Resources/android/images/res-ldpi/btn_1-active.png     56x25
Resources/android/images/res-mdpi/btn_1-active.png     74x33
Resources/android/images/res-hdpi/btn_1-active.png    111x49
Resources/android/images/res-xhdpi/btn_1-active.png   148x65

Android takes care of picking the right PNG file for us based on screen density. We use the getDimensionExact() function to get the corresponding image width and height.