[TIMOB-20363] Android: Buttons inside views appear on top of all other children
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Medium |
Status | Open |
Resolution | Unresolved |
Affected Version/s | Release 5.1.2, Release 8.2.0 |
Fix Version/s | n/a |
Components | Android |
Labels | android, engReviewed |
Reporter | Matt Mendick |
Assignee | Joshua Quick |
Created | 2016-02-03T16:26:33.000+0000 |
Updated | 2019-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
File | Date | Size |
---|---|---|
android-broken.png | 2016-02-03T16:23:53.000+0000 | 185582 |
buttonTest.png | 2016-02-03T16:24:29.000+0000 | 94481 |
ios-works.png | 2016-02-03T16:23:53.000+0000 | 82355 |
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.
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.
https://github.com/appcelerator/titanium_mobile/pull/9679
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.
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