Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-20363] Android: Buttons inside views appear on top of all other children

GitHub Issuen/a
TypeBug
PriorityMedium
StatusOpen
ResolutionUnresolved
Affected Version/sRelease 5.1.2, Release 8.2.0
Fix Version/sn/a
ComponentsAndroid
Labelsandroid, engReviewed
ReporterMatt Mendick
AssigneeJoshua Quick
Created2016-02-03T16:26:33.000+0000
Updated2019-10-14T20:59:30.000+0000

Description

Android only: If a button is added to a base view, and then that button should be obstructed by a view added to the base view because it was added after the button, the button will still show through. Test Case (be sure to include buttonTest.png at the root of the test project):
Titanium.UI.setBackgroundColor('#000');

var window = Titanium.UI.createWindow({  
    backgroundColor:'#fff'
});

// create a main view which will contain the button and the view
var mainViewContainer = Ti.UI.createView({
	top: 0,
	left: 0,
	right: 0,
	bottom:0,
	backgroundColor: 'red'
});

// create a view which will obscure the button
var shouldObscureButton = Ti.UI.createView({
	top: 0,
	left: 0,
	width: 200, 
	bottom: 0,
	backgroundColor: 'blue'
});

// create a button which is wider than the obscure view
var button = Ti.UI.createButton({
	height: 350,
	width: 350,
	left: 0,
	backgroundImage: 'buttonTest.png',
	backgroundColor: 'transparent'
});

// add the button to the main view container before the obscure view
mainViewContainer.add(button);

// add a view that should obscure the button after the button has been added
mainViewContainer.add(shouldObscureButton);

// add the main view to the window and open it
window.add(mainViewContainer);
window.open();

Expected results: The button (green checkmark) should be partially obscured by the obstructing view (blue background). This is the behavior on iOS and Mobile Web. Actual results: The button appears on top of the obstructing view (blue background).

Attachments

FileDateSize
android-broken.png2016-02-03T16:23:53.000+0000185582
buttonTest.png2016-02-03T16:24:29.000+000094481
ios-works.png2016-02-03T16:23:53.000+000082355

Comments

  1. Jebun Naher 2016-02-04

    Hello, We observed the same issue as the reporter. The button appears on top of the children view on android but works as expected on iOS. *Testing Environment:* Appcelerator Studio, build: 4.4.0.201511241829 Appcelerator Command-Line Interface, version 5.1.0 Titanium Command-Line Interface, CLI version 5.0.5, Titanium SDK version : 5.1.2 GA Mac OS X : 10.11.1 (EI Capitan) Android Emulator: Google Nexus 7-5.1.0 Android device: Nexus 7(android 6) iOS simulator: iPhone5s(iOS-9.1) *Test Code:* Provided by the reporter *Output:* [Simulator Output](http://postimg.org/image/kakyngc2t/) [Emulator Output](http://postimg.org/image/9fy8el6fj/) *Steps to reproduce:* Create a classic project with the provided test code and run the app. Observe that the button image appears on top of all. Thanks.
  2. Joshua Quick 2017-12-08

    This issue is only reproducible on Android 5.0 and above. This is because Android's native button implementation is set up to use a higher "elevation" (a concept introduced in API Level 21) than the other views.
  3. Maggie Chen 2017-12-12

    https://github.com/appcelerator/titanium_mobile/pull/9679
  4. Joshua Quick 2018-02-15

    Rejecting the change since it'll end up removing the button's drop-shadow effect on Android 5.0 and higher. We'll need to find an alternative solution. Note that Google implements the button's drop-shadow effective via the "elevation" property, but setting it to a higher elevation makes it appear above the other views. So, it's a design issue on Google's end that we need to find a work-around for.
  5. Alan Hutton 2019-09-30

    Reproducible with 8.2.0.GA. Axway Appcelerator Studio, build: 5.1.4.201909061933  macOS : 10.14.6 Node.js Version : 8.9.1 npm Version : 5.5.1 Appcelerator CLI : 7.1.1 Titanium CLI CLI Version : 5.2.1 node-appc Version : 0.2.49

JSON Source