Description
Ti.UI.Button glows when it is being clicked if it has backgroundImage set.
Reproduction steps
Step 1: Make sure the image by default is located into your Resources folder
Step 2: run the code below
Step 3: click the button
Step 4: notice that that button glows when it is being clicked
Expected behavior
Visual feedback instead of glow should actually be a "grey overlay on top of the non-transparent areas" as per earlier TiSDKs
Tested on
TiSDK > 1.8.1
TiSDK > 1.9.0.v20120126104634
Repro steps
var win1 = Titanium.UI.createWindow({
backgroundColor:'black'
});
var button = Ti.UI.createButton({
width: 100,
height: 50,
backgroundImage: 'KS_nav_ui.png',
//backgroundSelectedImage:'KS_nav_views.png',
//backgroundFocusedImage:''
});
button.addEventListener('click', function(){
Ti.API.info("clicked");
});
win1.add(button);
win1.open();
This is a side effect of the fix for TIMOB-5803 which was a parity issue with android. The "gray overlap" effect is only available if the backgroundSelectedImage property is not set. Right now it is always set to the backgroundImage. This behavior is documented. The "glow" feedback is enabled when the backgroundSelectedImage property is not set or is the same as backgroundImage property. Please use the backgroundSelectedImage to set up a different image for background when the button is highlighted.
Vishal, That is incorrect according to the [documentation](http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.iPhone.SystemButtonStyle-object.html). It states that the glow effect should only occur if a button is added to a toolbar and has style set to Titanium.UI.iPhone.SystemButtonStyle.PLAIN. {quote} When you add a button to a Toolbar, the styles have a slightly different effect: * PLAIN Button style for an undecorated button with large text and a glow effect when the button is pressed. Default style for buttons in toolbars. * BORDERED. Simple button style with a rounded border and a light blue background. * DONE. Like the bordered button, but with a dark blue background. {quote} This behavior does not coincide with the documentation and it only started occurring in 1.8.1 and up. This needs to be fixed ASAP. Using 1.8.1 or 1.8.2, results in all buttons in an app being obstructed by this glow effect.
After comparing the current functionality to the documentation, here's the current state of affairs: 1) In 1.7.5: - if backgroundImage is specified, backgroundSelectedImage is not specified, and *no style is specified* you get the grey overlay effect. (Bordered style comes with its own highlight effect.) - if backgroundImage and backgroundSelectedImage are specified as the same image, you get no effect. - If backgroundImage and backgroundSelectedImage are specified as different images, you get a fully custom effect. 3) In 1.8.0.1, you got neither the grey overlay effect nor the glow effect in any of the above scenarios. 4) In 1.8.1 and newer, it's a little different: - If backgroundImage is specified and backgroundSelectedImage is *not* specified, you get the "glow" effect. This is because (for parity reasons) setting a backgroundImage now sets the backgroundSelected image as well, as on Android. With both images set the same, you see the "glow" effect that appears on many native iOS buttons. - If backgroundImage is specified and you set backgroundSelectedImage to null, you get the grey overlay effect seen in 1.7.5. - If you explicitly set the images for each button state, you get a fully-custom button, as before.
In 1.8.0.1 * If backgroundImage is specified and backgroundFocusedImage is ''(blank string), you get the grey overlay effect
Closing ticket as invalid with reference to the above comments.