[TIMOB-12202] Android: Section header views are redrawn when a TabGroup is used

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2013-01-24T10:45:14.000+0000
Affected Version/s	Release 3.0.0, Release 3.0.1, Release 3.1.0
Fix Version/s	Release 3.0.2, Release 3.1.0, 2013 Sprint 02 API, 2013 Sprint 02
Components	Android
Labels	SupportTeam, module_tableview, parity, qe-testadded
Reporter	Eduardo Gomez
Assignee	Vishal Duggal
Created	2013-01-03T16:26:53.000+0000
Updated	2014-06-19T12:43:40.000+0000

Description

Problem

We are getting this issue only once when the orientation of the Window changes in the tabGroup.

Tested on

Droid Razr 2.3.5

Expected behavior

It looks like if a single window is used, issue does not happens.

Additional details

To try out please uncomment line near the very bottom instead of open the tabGroup: //contactusWindow.open(); Issues does not seem to occur in iOS

Current behavior

Section header Views swapping issues

Steps to reproduce

1. Run sample 2. Press tab 2. 3. Change orientation from portrait to landscape. 4. Change it back. 5. the second tableViewSections disappears. **Notice how the first 2 tableViewSections are "gone"** (or at least redrawn).

Repro sequence

var tabGroup = Titanium.UI.createTabGroup();
 var win1 = Titanium.UI.createWindow({});
var tab1 = Titanium.UI.createTab({
    title : 'Tab 1',
    window : win1
}); 
 var contactusWindow = Titanium.UI.createWindow({
    title : 'Contact',
    backgroundColor : 'white'
});
var contactDataInput = []; 
var contactHeaderLabel = Ti.UI.createLabel({
    text : 'GeoBlue Expats',
    left : '3%',
    font : {
        fontSize : 14,
        fontWeight : 'bold'
    },
    color : '#373737'
});
 
var contactSummaryHeaderView = Ti.UI.createView({
    backgroundGradient : {
        type : 'linear',
        startPoint : {
            x : '0%',
            y : '50%'
        },
        endPoint : {
            x : '0%',
            y : '100%'
        },
        colors : [{
            color : '#C5CDD0',
            offset : 0.0
        }, {
            color : '#BFC7CB',
            offset : 0.05
        }]
    },
    height : 25
});
contactSummaryHeaderView.add(contactHeaderLabel);
 
var contactSummarySection = Ti.UI.createTableViewSection({
    headerView : contactSummaryHeaderView
});
 
var contactExpatRow = Ti.UI.createTableViewRow({
    width : Ti.UI.FILL,
    backgroundColor : 'white',
    selectedBackgroundColor : 'transparent',
    backgroundSelectedColor : 'transparent'
});
 
contactExpatRow.add(Ti.UI.createLabel({
    text : 'Customer Service for GeoBlue Expatriates.',
    left : '3%',
    font : {
        fontSize : 14
    },
    color : 'black'
}));

var contactInsideUSLabel = Ti.UI.createLabel({
    text : '+1.855.282.3517(Inside the US)',
    font : {
        fontSize : 14,
        fontWeight : 'bold'
    },
    color : '#06465D'
});
 
var contactInsideUSRow = Ti.UI.createTableViewRow({
    width : Ti.UI.FILL,
    backgroundColor : 'white',
    selectedBackgroundColor : '#4CA4BB',
    backgroundSelectedColor : '#4CA4BB'
});
contactInsideUSRow.add(contactInsideUSLabel);
 
var contactOutsideUSLabel = Ti.UI.createLabel({
    text : '+1.610.254.5304(Outside the US)',
    font : {
        fontSize : 14,
        fontWeight : 'bold'
    },
    color : '#06465D'
});
 
var contactOutsideUSRow = Ti.UI.createTableViewRow({
    width : Ti.UI.FILL,
    backgroundColor : 'white',
    selectedBackgroundColor : '#4CA4BB',
    backgroundSelectedColor : '#4CA4BB'
});
contactOutsideUSRow.add(contactOutsideUSLabel);
 
contactSummarySection.add(contactExpatRow);
contactSummarySection.add(contactInsideUSRow);
contactSummarySection.add(contactOutsideUSRow);
contactDataInput.push(contactSummarySection);
var contactTravelerSection;
 
var contactTrvlrHeaderLbl = Ti.UI.createLabel({
    text : 'GeoBlue Travelers',
    left : '3%',
    font : {
        fontSize : 14,
        fontWeight : 'bold'
    },
    color : '#373737'
});
 
var contactTrvlrHeaderView = Ti.UI.createView({
    backgroundGradient : {
        type : 'linear',
        startPoint : {
            x : '0%',
            y : '50%'
        },
        endPoint : {
            x : '0%',
            y : '100%'
        },
        colors : [{
            color : '#C5CDD0',
            offset : 0.0
        }, {
            color : '#BFC7CB',
            offset : 0.05
        }]
    },
    height : 25
});
contactTrvlrHeaderView.add(contactTrvlrHeaderLbl);
 
contactTravelerSection = Ti.UI.createTableViewSection({
    headerView : contactTrvlrHeaderView
});
 
var contactTrvlrRow = Ti.UI.createTableViewRow({
    width : Ti.UI.FILL,
    backgroundColor : 'white',
    selectedBackgroundColor : 'transparent',
    backgroundSelectedColor : 'transparent'
});
contactTrvlrRow.add(Ti.UI.createLabel({
    text : 'Customer Service for GeoBlue Travelers.',
    left : '3%',
    font : {
        fontSize : 14
    },
    color : 'black'
}));
 
var contactTrvlrInsideUSLbl = Ti.UI.createLabel({
    text : '+1.888.412.6403(Inside the US)',
    font : {
        fontSize : 14,
        fontWeight : 'bold'
    },
    color : '#06465D'
});
 
var contactTrvlrInsideUSRow = Ti.UI.createTableViewRow({
    width : Ti.UI.FILL,
    backgroundColor : 'white',
    selectedBackgroundColor : '#4CA4BB',
    backgroundSelectedColor : '#4CA4BB'
});
contactTrvlrInsideUSRow.add(contactTrvlrInsideUSLbl);
 
var contactTrvlrOutsideUSLbl = Ti.UI.createLabel({
    text : '+1.610.254.5830(Outside the US)',
    font : {
        fontSize : 14,
        fontWeight : 'bold'
    },
    color : '#06465D'
});
 
var contactTrvlrOutsideUSRow = Ti.UI.createTableViewRow({
    width : Ti.UI.FILL,
    backgroundColor : 'white',
    selectedBackgroundColor : '#4CA4BB',
    backgroundSelectedColor : '#4CA4BB'
});
contactTrvlrOutsideUSRow.add(contactTrvlrOutsideUSLbl);
 
contactTravelerSection.add(contactTrvlrRow);
contactTravelerSection.add(contactTrvlrInsideUSRow);
contactTravelerSection.add(contactTrvlrOutsideUSRow);
contactDataInput.push(contactTravelerSection);
var contactFeedbackSection;
 
var contactFeedbackHeaderLabel = Ti.UI.createLabel({
    text : 'Feedback',
    left : '3%',
    font : {
        fontSize : 14,
        fontWeight : 'bold'
    },
    color : '#373737'
});
 
contactFeedbackHeaderView = Ti.UI.createView({
    backgroundGradient : {
        type : 'linear',
        startPoint : {
            x : '0%',
            y : '50%'
        },
        endPoint : {
            x : '0%',
            y : '100%'
        },
        colors : [{
            color : '#C5CDD0',
            offset : 0.0
        }, {
            color : '#BFC7CB',
            offset : 0.05
        }]
    },
    height : 25
});
contactFeedbackHeaderView.add(contactFeedbackHeaderLabel);
 
contactFeedbackSection = Ti.UI.createTableViewSection({
    headerView : contactFeedbackHeaderView
});
 
var contactFeedbackRow = Ti.UI.createTableViewRow({
    width : Ti.UI.FILL,
    layout : 'vertical',
    height : Ti.UI.SIZE,
    backgroundColor : 'white',
    selectedBackgroundColor : 'transparent',
    backgroundSelectedColor : 'transparent'
});
contactFeedbackRow.add(Ti.UI.createLabel({
    text : 'To provide feedback, recommend enhancements, or to notify GeoBlue of issues or concerns regarding your mobile app, please email us directly at:',
    left : '3%',
    font : {
        fontSize : 14
    },
    color : 'black'
}));
 
var contactEmailLabel = Ti.UI.createLabel({
    text : 'mobileapps@geo-blue.com',
    font : {
        fontSize : 14,
        fontWeight : 'bold'
    },
    color : '#06465D'
});
 
var emailRow = Ti.UI.createTableViewRow({
    width : Ti.UI.FILL,
    backgroundColor : 'white',
    selectedBackgroundColor : '#4CA4BB',
    backgroundSelectedColor : '#4CA4BB'
});
emailRow.add(contactEmailLabel);
 
contactFeedbackSection.add(contactFeedbackRow);
contactFeedbackSection.add(emailRow);
contactDataInput.push(contactFeedbackSection);

var tableViewOptions = {
    minRowHeight : 50,
    separatorColor : 'black',
    backgroundImage : 'none'
};
 
var contactusTable = Ti.UI.createTableView(tableViewOptions);
 
contactusTable.setData(contactDataInput);
 
contactusWindow.add(contactusTable);
 
var homeTab = Titanium.UI.createTab({
    icon : 'KS_nav_ui.png',
    title : 'Tab 2',
    window : contactusWindow
});
 
tabGroup.addTab(tab1);
tabGroup.addTab(homeTab);
 
tabGroup.open();

Customer remarks

we observed this issue in HTC Sensation OS 2.3.4, Samsung Galaxy S2 OS 4.0.3, Sony Xperia OS 4.0.4.

Attachments

File	Date	Size
AndroidPortrait1.JPG	2013-01-03T16:26:53.000+0000	605587
AndroidPortrait2.JPG	2013-01-03T16:26:53.000+0000	596579

Comments

Mauro Parra-Miranda 2013-01-08

Added a smaller testcase.

Vishal Duggal 2013-01-16

Expanded test case

   var tabGroup = Titanium.UI.createTabGroup();
    var win1 = Titanium.UI.createWindow({});
   var tab1 = Titanium.UI.createTab({
       title : 'Tab 1',
       window : win1
   }); 
    var contactusWindow = Titanium.UI.createWindow({
       title : 'Contact',
       backgroundColor : 'white'
   });
   var contactDataInput = []; 
   
   var expatsSection = function(){
       var contactHeaderLabel = Ti.UI.createLabel({
           text : 'GeoBlue Expats',
           left : '3%',
           font : {
               fontSize : 14,
               fontWeight : 'bold'
           },
           color : '#373737'
       });
         
       var contactSummaryHeaderView = Ti.UI.createView({
           backgroundGradient : {
               type : 'linear',
               startPoint : {
                   x : '0%',
                   y : '50%'
               },
               endPoint : {
                   x : '0%',
                   y : '100%'
               },
               colors : [{
                   color : '#C5CDD0',
                   offset : 0.0
               }, {
                   color : '#BFC7CB',
                   offset : 0.05
               }]
           },
           height : 25
       });
       contactSummaryHeaderView.add(contactHeaderLabel);
         
       var contactSummarySection = Ti.UI.createTableViewSection({
           headerView : contactSummaryHeaderView
       });
         
       var contactExpatRow = Ti.UI.createTableViewRow({
           width : Ti.UI.FILL,
           backgroundColor : 'white',
           selectedBackgroundColor : 'transparent',
           backgroundSelectedColor : 'transparent'
       });
         
       contactExpatRow.add(Ti.UI.createLabel({
           text : 'Customer Service for GeoBlue Expatriates.',
           left : '3%',
           font : {
               fontSize : 14
           },
           color : 'black'
       }));
        
       var contactInsideUSLabel = Ti.UI.createLabel({
           text : '+1.855.282.3517(Inside the US)',
           font : {
               fontSize : 14,
               fontWeight : 'bold'
           },
           color : '#06465D'
       });
         
       var contactInsideUSRow = Ti.UI.createTableViewRow({
           width : Ti.UI.FILL,
           backgroundColor : 'white',
           selectedBackgroundColor : '#4CA4BB',
           backgroundSelectedColor : '#4CA4BB'
       });
       contactInsideUSRow.add(contactInsideUSLabel);
         
       var contactOutsideUSLabel = Ti.UI.createLabel({
           text : '+1.610.254.5304(Outside the US)',
           font : {
               fontSize : 14,
               fontWeight : 'bold'
           },
           color : '#06465D'
       });
         
       var contactOutsideUSRow = Ti.UI.createTableViewRow({
           width : Ti.UI.FILL,
           backgroundColor : 'white',
           selectedBackgroundColor : '#4CA4BB',
           backgroundSelectedColor : '#4CA4BB'
       });
       contactOutsideUSRow.add(contactOutsideUSLabel);
         
       contactSummarySection.add(contactExpatRow);
       contactSummarySection.add(contactInsideUSRow);
       contactSummarySection.add(contactOutsideUSRow);
       
       return contactSummarySection;
   }
   
   var travelSection = function()
   {
       var contactTrvlrHeaderLbl = Ti.UI.createLabel({
           text : 'GeoBlue Travelers',
           left : '3%',
           font : {
               fontSize : 14,
               fontWeight : 'bold'
           },
           color : '#373737'
       });
         
       var contactTrvlrHeaderView = Ti.UI.createView({
           backgroundGradient : {
               type : 'linear',
               startPoint : {
                   x : '0%',
                   y : '50%'
               },
               endPoint : {
                   x : '0%',
                   y : '100%'
               },
               colors : [{
                   color : '#C5CDD0',
                   offset : 0.0
               }, {
                   color : '#BFC7CB',
                   offset : 0.05
               }]
           },
           height : 25
       });
       contactTrvlrHeaderView.add(contactTrvlrHeaderLbl);
         
       var contactTravelerSection = Ti.UI.createTableViewSection({
           headerView : contactTrvlrHeaderView
       });
         
       var contactTrvlrRow = Ti.UI.createTableViewRow({
           width : Ti.UI.FILL,
           backgroundColor : 'white',
           selectedBackgroundColor : 'transparent',
           backgroundSelectedColor : 'transparent'
       });
       contactTrvlrRow.add(Ti.UI.createLabel({
           text : 'Customer Service for GeoBlue Travelers.',
           left : '3%',
           font : {
               fontSize : 14
           },
           color : 'black'
       }));
         
       var contactTrvlrInsideUSLbl = Ti.UI.createLabel({
           text : '+1.888.412.6403(Inside the US)',
           font : {
               fontSize : 14,
               fontWeight : 'bold'
           },
           color : '#06465D'
       });
         
       var contactTrvlrInsideUSRow = Ti.UI.createTableViewRow({
           width : Ti.UI.FILL,
           backgroundColor : 'white',
           selectedBackgroundColor : '#4CA4BB',
           backgroundSelectedColor : '#4CA4BB'
       });
       contactTrvlrInsideUSRow.add(contactTrvlrInsideUSLbl);
         
       var contactTrvlrOutsideUSLbl = Ti.UI.createLabel({
           text : '+1.610.254.5830(Outside the US)',
           font : {
               fontSize : 14,
               fontWeight : 'bold'
           },
           color : '#06465D'
       });
         
       var contactTrvlrOutsideUSRow = Ti.UI.createTableViewRow({
           width : Ti.UI.FILL,
           backgroundColor : 'white',
           selectedBackgroundColor : '#4CA4BB',
           backgroundSelectedColor : '#4CA4BB'
       });
       contactTrvlrOutsideUSRow.add(contactTrvlrOutsideUSLbl);
         
       contactTravelerSection.add(contactTrvlrRow);
       contactTravelerSection.add(contactTrvlrInsideUSRow);
       contactTravelerSection.add(contactTrvlrOutsideUSRow);
       
       return contactTravelerSection;
   }
   
   var feedbackSection = function()
   {
       var contactFeedbackSection;
         
       var contactFeedbackHeaderLabel = Ti.UI.createLabel({
           text : 'Feedback',
           left : '3%',
           font : {
               fontSize : 14,
               fontWeight : 'bold'
           },
           color : '#373737'
       });
         
       contactFeedbackHeaderView = Ti.UI.createView({
           backgroundGradient : {
               type : 'linear',
               startPoint : {
                   x : '0%',
                   y : '50%'
               },
               endPoint : {
                   x : '0%',
                   y : '100%'
               },
               colors : [{
                   color : '#C5CDD0',
                   offset : 0.0
               }, {
                   color : '#BFC7CB',
                   offset : 0.05
               }]
           },
           height : 25
       });
       contactFeedbackHeaderView.add(contactFeedbackHeaderLabel);
         
       contactFeedbackSection = Ti.UI.createTableViewSection({
           headerView : contactFeedbackHeaderView
       });
         
       var contactFeedbackRow = Ti.UI.createTableViewRow({
           width : Ti.UI.FILL,
           layout : 'vertical',
           height : Ti.UI.SIZE,
           backgroundColor : 'white',
           selectedBackgroundColor : 'transparent',
           backgroundSelectedColor : 'transparent'
       });
       contactFeedbackRow.add(Ti.UI.createLabel({
           text : 'To provide feedback, recommend enhancements, or to notify GeoBlue of issues or concerns regarding your mobile app, please email us directly at:',
           left : '3%',
           font : {
               fontSize : 14
           },
           color : 'black'
       }));
         
       var contactEmailLabel = Ti.UI.createLabel({
           text : 'mobileapps@geo-blue.com',
           font : {
               fontSize : 14,
               fontWeight : 'bold'
           },
           color : '#06465D'
       });
         
       var emailRow = Ti.UI.createTableViewRow({
           width : Ti.UI.FILL,
           backgroundColor : 'white',
           selectedBackgroundColor : '#4CA4BB',
           backgroundSelectedColor : '#4CA4BB'
       });
       emailRow.add(contactEmailLabel);
         
       contactFeedbackSection.add(contactFeedbackRow);
       contactFeedbackSection.add(emailRow);
       
       return contactFeedbackSection;
   }
   contactDataInput.push(expatsSection());
   contactDataInput.push(travelSection());
   contactDataInput.push(feedbackSection());
   contactDataInput.push(expatsSection());
   contactDataInput.push(travelSection());
   contactDataInput.push(feedbackSection());
   contactDataInput.push(expatsSection());
   contactDataInput.push(travelSection());
   contactDataInput.push(feedbackSection());
   contactDataInput.push(expatsSection());
   contactDataInput.push(travelSection());
   contactDataInput.push(feedbackSection());
    
   var tableViewOptions = {
       minRowHeight : 50,
       separatorColor : 'black',
       backgroundImage : 'none'
   };
     
   var contactusTable = Ti.UI.createTableView(tableViewOptions);
     
   contactusTable.setData(contactDataInput);
     
   contactusWindow.add(contactusTable);
     
   var homeTab = Titanium.UI.createTab({
       icon : 'KS_nav_ui.png',
       title : 'Tab 2',
       window : contactusWindow
   });
     
   tabGroup.addTab(tab1);
   tabGroup.addTab(homeTab);
     
   tabGroup.open();

Vishal Duggal 2013-01-16

Pull pending https://github.com/appcelerator/titanium_mobile/pull/3722
Vishal Duggal 2013-01-18

Backport Task TIMOB-12309 Backport PR https://github.com/appcelerator/titanium_mobile/pull/3727
Olga Romero 2013-01-23

Closing as fixed. Tested and verified with: Titanium Studio, build: 3.0.1.201212181159 Titanium SDK, build: 3.0.2.v20130122172624 Devices: Nexus7 Android version 4.2 Nexus4 4.2
Anshu Mittal 2013-01-24

Reopening to update labels

JSON Source