Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-7526] iOS: Button - setting backgroundImage causes the button to glow when it is clicked

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionInvalid
Resolution Date2012-03-01T13:02:39.000+0000
Affected Version/sRelease 2.0.0, Release 1.8.1
Fix Version/sn/a
ComponentsiOS
Labelsn/a
ReporterEduardo Gomez
AssigneeNeeraj Gupta
Created2012-02-02T15:52:40.000+0000
Updated2017-03-24T18:17:21.000+0000

Description

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();

Comments

  1. Vishal Duggal 2012-03-01

    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.
  2. David Knell 2012-03-06

    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.
  3. Arthur Evans 2012-03-12

    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.
  4. Tommy Leung 2012-03-13

    In 1.8.0.1 * If backgroundImage is specified and backgroundFocusedImage is ''(blank string), you get the grey overlay effect
  5. Lee Morris 2017-03-24

    Closing ticket as invalid with reference to the above comments.

JSON Source