[TIMOB-14008] Android: layout vertical and zIndex problem

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Open
Resolution	Unresolved
Affected Version/s	Release 3.1.0, Release 3.2.0
Fix Version/s	n/a
Components	Android
Labels	layout, parity, zindex
Reporter	Quang Pham
Assignee	Ashraf Abu
Created	2012-10-25T10:17:54.000+0000
Updated	2016-06-30T04:37:07.000+0000

Description

*Expected result* The red view should be located on the black view. *Actual result* The black view is missing. *Note* Works on iOS (both the red view and black view show), but not Android. *Test case*

var win = Ti.UI.createWindow({
	backgroundColor : '#fff',
	navBarHidden : true,
	exitOnClose : true
});

var view = Ti.UI.createView({
	layout : 'vertical'
});

view.add(Ti.UI.createView({
	width : 200,
	height : 50,
	backgroundColor : 'red',
	zIndex : 1
}));

view.add(Ti.UI.createView({
	height : 50,
	backgroundColor : 'black',
	top : -15
}));

win.add(view)

win.open();

Comments

Daniel Sefton 2013-05-28

Tested and confirmed on Samsung Galaxy S2 Android 2.3.6 with Ti SDK 3.1 GA and 3.2 CI. Works as expected on iOS 6 simulator.

Fokke Zandbergen 2013-08-19

Another, maybe more simple test case:

   var w = Ti.UI.createWindow({
       backgroundColor: 'white',
       layout: 'vertical'
   });
   
   var greenFirst = Ti.UI.createView({
       height: 50,
       backgroundColor: 'green',
       zIndex: 1
   });
   
   var redSecond = Ti.UI.createView({
       height: 50,
       backgroundColor: 'red'
   });
   
   w.add(greenFirst);
   w.add(redSecond);
   
   w.open();

On iOS green indeed comes first, but on Android (Samsung Galaxy S2, Android 4.2.3 and SDK 3.1.2.GA) green comes second as soon as you set a zIndex on it.

Ygor Lemos 2015-01-07

Hi guys, this still happens on Ti SDK 3.4.1.GA - for the sake of parity it would be nice if Android respects zIndex as iOS does on vertical layout windows. This is set to high since a long time ago. Can we prioritize this?
Ygor Lemos 2015-01-07

Community QA on this since 2012: https://developer.appcelerator.com/question/148341/zindex-effect-vertical-positioning-on-android
Frank Eijking 2015-06-08

Still an issue in Ti SDK 4.0.0.GA
Hieu Pham 2015-07-01

I'm unable to reproduce this issue on master. I tried both test cases and the views are displayed correctly.

Ashraf Abu 2015-07-02

If you run this, you will see that there is actually more Red and that it was hidden by the black strip (which is now transparent red). When the it is not transparent, the Red should actually be on top of the black strip since the Red portion has zIndex 1

   var win = Ti.UI.createWindow({
   	backgroundColor : '#fff',
   	navBarHidden : true,
   	exitOnClose : true
   });
    
   var view = Ti.UI.createView({
   	layout : 'vertical'
   });
    
   view.add(Ti.UI.createView({
   	width : 200,
   	height : 50,
   	backgroundColor : 'red',
   	zIndex : 1
   }));
    
   view.add(Ti.UI.createView({
   	height : 50,
   	backgroundColor : '#5f40',
   	top : -15
   }));
    
   win.add(view)
    
   win.open();

Ashraf Abu 2015-07-02
Chee Kiat Ng 2015-08-27

'elevation' might be the best approach to address this requirement. Will be closing this ticket, let me know if you feel otherwise.
Fokke Zandbergen 2015-08-27

Well, unless elevation will replace zIndex for Android this ticket is still a valid parity-bug.

JSON Source