Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-5799] Android: Child element does not respect opacity of parent

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2012-07-13T01:50:13.000+0000
Affected Version/sRelease 1.7.3
Fix Version/sRelease 2.1.0, Sprint 2012-08
ComponentsAndroid
Labelsandroid, api, defect, module_views, qe-testadded
ReporterMatthew Congrove
AssigneeJosh Roesslein
Created2011-10-19T12:37:50.000+0000
Updated2013-07-03T18:07:14.000+0000

Description

Original test case.

A child element attached to a parent with an opacity of 0 is still visible, but should be hidden.
var win = Ti.UI.createWindow({
	title: "Window",
	backgroundColor: "#FFF"
});

var view = Ti.UI.createView({
	width: 50,
	height: 50,
	left: 0,
	top: 0,
	backgroundColor: "transparent",
	opacity: 0
});

var img = Ti.UI.createImageView({
	image: "KS_nav_ui.png",
	width: 40,
	height: 40,
	left: 0,
	top: 0
});

view.add(img);
win.add(view);
win.open();

Child and Parent View w/ sliders to control opacity.

Try adjusting the opacity of the parent and child views. The child's opacity should be properly composited with that of the parent. As you lower the opacity of the parent, the child should also become more transparent. But if you only lower the child's opacity, the parent should not be affected.

var win = Ti.UI.createWindow({
	layout: 'vertical',
	backgroundColor: 'white'
});

var parent = Ti.UI.createView({
	backgroundColor: "blue",
	width: 200, height: 200
});
win.add(parent);

var child = Ti.UI.createView({
	backgroundColor: "black",
	width: '50%', height: '50%'
});
parent.add(child);

function createOpacitySlider(title, view) {
	var container = Ti.UI.createView({
		width: '75%', height: 75,
		layout: 'horizontal'
	});

	container.add(Ti.UI.createLabel({
		text: title,
		left: 5
	}));

	var slider = Ti.UI.createSlider({
		min: 0, max: 100,
		value: 100
	});
	container.add(slider);

	slider.addEventListener('change', function(e) {
		view.opacity = e.value / 100;
	});

	return container;
}

win.add(createOpacitySlider('Parent', parent));
win.add(createOpacitySlider('Child', child));

win.open();

Comments

  1. Josh Roesslein 2012-04-23

    Sent [PR #2051](https://github.com/appcelerator/titanium_mobile/pull/2051) to address this issue.
  2. Tamila Smolich 2012-06-23

    Closing as fixed. Verified with: Titanium Studio, build: 2.1.0.201206221045 Titanium SDK: 2.1.0.v20120622174154 Device: Samsung Galaxy tab (3.2)
  3. Shyam Bhadauria 2012-07-13

    Re-opening to edit label

JSON Source