| GitHub Issue | n/a |
|---|
| Type | Bug |
|---|
| Priority | Medium |
|---|
| Status | Closed |
|---|
| Resolution | Fixed |
|---|
| Resolution Date | 2012-07-12T04:16:47.000+0000 |
|---|
| Affected Version/s | Release 1.7.0, Release 1.7.1, Release 1.7.2, Release 1.8.0 |
|---|
| Fix Version/s | Release 2.1.0, Sprint 2012-07 |
|---|
| Components | Android |
|---|
| Labels | api, module_view, qe-testadded |
|---|
| Reporter | Alan Vaghti |
|---|
| Assignee | Josh Roesslein |
|---|
| Created | 2011-07-26T17:26:38.000+0000 |
|---|
| Updated | 2012-09-10T12:26:45.000+0000 |
|---|
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();
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 });Documentation team needs this fix for samples.
Pull request [#1916](https://github.com/appcelerator/titanium_mobile/pull/1916) sent.
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?
Verified fixed with SDK 2.1.0.v20120618102300 on Droid
Reopening to update labels.