Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-4800] Ti.UI.backgroundColor/Ti.UI.backgroundImage not translucent

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2012-07-12T04:16:47.000+0000
Affected Version/sRelease 1.7.0, Release 1.7.1, Release 1.7.2, Release 1.8.0
Fix Version/sRelease 2.1.0, Sprint 2012-07
ComponentsAndroid
Labelsapi, module_view, qe-testadded
ReporterAlan Vaghti
AssigneeJosh Roesslein
Created2011-07-26T17:26:38.000+0000
Updated2012-09-10T12:26:45.000+0000

Description

Setting background on Root Window

1) Create project in TiStudio and replace app.js with
Ti.UI.backgroundColor = '#f00';
Ti.UI.backgroundImage = 'KS_nav_ui.png';

var win = Ti.UI.createWindow();
win.open();
(or use attached Resources folder) 2) Launch application Expected: Image appears with a red background. Actual: Only image appears. (See screen shot) Note: Talked to Jon Alter about this. He says it isn't a major issue because he doesn't see a circumstance where someone would set the background this way. It is a parity issue. Setting the background this way works as expected on iOS devices.

Setting background on a view.

Verify image is shown with a red background. Also verify background color changes when the state of the view changes (ex: focused, selected).
var win = Ti.UI.createWindow({
	backgroundColor: 'white',
	layout: 'vertical'
});

var colorView = Ti.UI.createView({
	width: 400, height: 400,
	focusable: true,
	backgroundColor: 'blue',
	backgroundImage: 'background.png',
	backgroundSelectedColor: 'red',
	backgroundFocusedColor: 'yellow',
	backgroundDisabledColor: 'black'
});
win.add(colorView);

var disableButton = Ti.UI.createButton({
	title: 'Enable/Disable View',
	width: 150
});
disableButton.on('click', function() {
	colorView.enabled = !colorView.enabled;
});
win.add(disableButton);

win.open();

Attachments

FileDateSize
device.png2011-07-26T17:26:38.000+000059543
Resources.zip2011-07-26T17:26:38.000+00002310699
Screen Shot 2012-03-14 at 10.00.54 PM.png2012-03-14T21:06:41.000+0000156927

Comments

  1. Tim Poulsen 2012-03-14

    This bug applies to views of all sorts, in addition to windows as described here. See the screen shot I attached (side-by-side simulators). I'm using a transparent gradient png in addition to a background color to provide visual depth to the columns in the chart. On iOS, they are translucent and show the background color. On Android, the background color is masked.
       var bar = Ti.UI.createView({
         width:'100%',
         height: 100,
         backgroundColor: 'blue',
         backgroundImage: 'gradient1.png',
         left: 0, right: 0,
         bottom:32		
       });
       
    Tested on various SDKs including 2.0.0.v20120314154741
  2. Neeraj Gupta 2012-03-15

    Documentation team needs this fix for samples.
  3. Josh Roesslein 2012-04-04

    Pull request [#1916](https://github.com/appcelerator/titanium_mobile/pull/1916) sent.
  4. Arthur Evans 2012-05-24

    It appears that normal background images (i.e., View.backgroundImage) are now translucent. That is, if you set both View.backgroundColor and View.backgroundImage, they are composited now. In 2.0.1 and earlier, the image is not composited with the BG color unless: - Window.windowPixelFormat is translucent, for example, Ti.UI.Android.PIXEL_FORMAT_TRANSLUCENT. - Window.modal is true (modal windows are always translucent) Is this related? Is it a regression?
  5. Eric Merriman 2012-06-18

    Verified fixed with SDK 2.1.0.v20120618102300 on Droid
  6. Neha Chhabra 2012-07-12

    Reopening to update labels.

JSON Source