Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-11232] Android: TableView / HeaderView Android Parity Issue

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2014-08-14T00:45:35.000+0000
Affected Version/sRelease 2.1.2, Release 2.1.3, Release 3.0.0, Release 3.1.0
Fix Version/s2013 Sprint 21, 2013 Sprint 21 API, Release 3.2.0
ComponentsAndroid
Labelsapi, module_tableview, parity, qe-manualtest
ReporterFrank Apap
AssigneeSunila
Created2012-05-20T12:45:37.000+0000
Updated2014-08-14T00:45:35.000+0000

Description

A headerview added to a tableview in android allocates space but does not show any children(or backgrounds) the way it does on iOS. Sample code below:
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');


navWindow = Ti.UI.createWindow();


//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({  
    backgroundColor:'#fff'
});

var data = [
	{title:'Alan', hasChild:true, header:'A'},
	{title:'Alice', hasDetail:true},
	{title:'Alexander'},
	{title:'Amos'},
	{title:'Alonzo'},
	{title:'Brad', header:'B'},
	{title:'Brent'},
	{title:'Billy'},
	{title:'Brenda'},
	{title:'Potsie'}
];

	var header=Ti.UI.createView({
		width:'100%',
		backgroundColor:'red',
		height:149
	});
	
	
	// Create a Label.
	var aLabel = Ti.UI.createLabel({
		text : 'aLabel',
		color : 'black',
		font : {fontSize:22},
		height : 44,
		width : 222,
		top : 2,
		left : 5,
		textAlign : 'center'
	});
	
	// Add to the parent view.
	header.add(aLabel);
	

var tableview = Titanium.UI.createTableView({
	data:data,
	headerView:header
});


win1.add(tableview);

win1.open();

Attachments

FileDateSize
iOS Simulator Screen shot Mar 21, 2013 2.59.04 PM.png2013-03-21T09:35:59.000+000016379
Screenshot_2013-03-21-15-02-34.png2013-03-21T09:35:59.000+000023435

Comments

  1. Daniel Sefton 2012-10-01

    Tested and confirmed parity issue on iOS 5.1 and Android emulator 2.3.3 with TiSDK 2.1.2 GA, 2.1.3 RC 2, 3.0.0. Not sure if this is platform specific behavior however, someone else will need to clarify this.
  2. Tony Lukasavage 2012-12-07

    I can also confirm that this behavior is still present in the latest 3.1.0 TiSDK build that I've been using, tested on Android emulator and my Galaxy Nexus (4.1.1). I came upon this creating a test app for Alloy. Works fine on iOS, but as this ticket states, the header/footer views allocate space but show no UI on android. For reference, the test app is here: https://github.com/appcelerator/alloy/tree/master/test/apps/ui/proxy_properties
  3. sunil alachi 2012-12-13

    This should work if the width is specified as 'fill' instead of '100%'. Since the width is given in percentage, framework uses the parent width to calculate the width of the headerview. Since the parent (list) layout is not completed at this time, parent width is returned as 0 and hence the headerview is created with width set to 0. See method layoutHeaderOrFooter in TiTableView.
  4. Tony Lukasavage 2012-12-13

    @sunil: In the alloy example I cited above, I don't use 100% for the width. In fact, I don't specify a width, which according to the docs should use Ti.UI.FILL by default. I still see this same behavior only on android.
  5. sunil alachi 2012-12-18

    oops, I missed the alloy sample, I was looking at the sample here. I will take a look at the alloy sample.
  6. sunil alachi 2012-12-18

    Based on the layout precedence documentation "If width is defined, it takes precedence and the positioning pins are not used to determine the view's width. If width is not defined, and at least two horizontal positioning pins are defined, the width is calculated implicitly from the pins. For example, left and right or left and center.x. If all three horizontal pins are defined, the width is determined by the left and center.x pins. If width cannot be implicitly calculated it follows the view's default sizing behavior." Looks like the default width and height for headerView is 'WRAP_CONTENT'. I think it would have been nice if the default for height was 'WRAP_CONTENT' and width be 'FILL'
  7. Tony Lukasavage 2012-12-18

    Great analysis. In the end, I don't care how it's handled so long as it is uniform across the supported platforms.
  8. jithinpv 2013-03-21

    Issue reproduces Tested with Titanium Studio, build: 3.0.1.201212181159 Titanium SDK version: 3.1.0 (03/11/13 15:43 0c88429) Titanium SDK version: 3.0.2 (02/07/13 16:46 a4def81) Device: Samsung galaxy s duos Android version: 4.0.4 iOS iPhone Simulator: iOS SDK version: 6.0 jithinpv
  9. Stefan Moonen 2013-03-25

    Another parity issue would be that HeaderViews on TableViewSections need to be set on creation, as opposed to iOS where they can be changed afterwards.
  10. Fokke Zandbergen 2013-09-13

    [~qonstrukt] they can be set after creation, but not changed or removed: TC-2748
  11. Fokke Zandbergen 2013-09-13

    So, what's the status on this? BTW, on iOS on the other hand, regardless of what you set the header or footerView's width to, it will always FILL.
  12. Sunila 2013-10-06

    Set the width to be MATCH_PARENT for header and footer to be consistent with iPhone. https://github.com/appcelerator/titanium_mobile/pull/4762
  13. Hieu Pham 2013-10-10

    CR + FR
  14. Paras Mishra 2013-10-22

    Tested and confirmed fix on: Device : HTC desire V , Android version : 4.0.3 SDK: 3.2.0.v20131021142445 CLI version : 3.2.0 OS : MAC OSX 10.8.4 Alloy : 1.2.2 Appcelerator Studio, build: 3.2.0.201310181700 XCode : 5

JSON Source