Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-5819] Android: Percentage-based views need to be re-drawn on device rotation

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2012-01-03T16:08:16.000+0000
Affected Version/sRelease 1.7.3, Release 1.8.0
Fix Version/sSprint 2011-42, Release 1.7.4, Release 1.8.0, Release 1.7.6
ComponentsAndroid
Labelsmodule_views, percentage, qe-testadded, rotation
ReporterSandeep Bhimavarapu
AssigneeAllen Yeung
Created2011-10-20T14:08:12.000+0000
Updated2012-03-05T11:23:57.000+0000

Description

Views that have widths or positioning points based on percentages do not properly get updated on device rotation. Sample Code {noformat} var tabGroup = Titanium.UI.createTabGroup(); var win1 = Titanium.UI.createWindow({ title: 'Tab 1', backgroundColor: '#fff', fullscreen: 'false' }); var tab1 = Titanium.UI.createTab({ icon: 'KS_nav_views.png', title: 'Tab 1', window: win1 }); win1.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT, Ti.UI.UPSIDE_PORTRAIT]; var v1 = Ti.UI.createView({ backgroundColor: '#f00', width: '30%', left: '20%', top: 0, height: '100%' }); var v3 = Ti.UI.createView({ backgroundColor: 'blue', width: '80%', left: '10%', top: '10%', height: '80%' }); var v5 = Ti.UI.createView({ backgroundColor: 'gray', width: '60%', left: '20%', top: '10%', height: '80%' }); v3.add(v5); v1.add(v3); win1.add(v1); var v2 = Ti.UI.createView({ backgroundColor: '#0f0', width: '30%', right: '20%', top: 0, height: '100%' }); var v4 = Ti.UI.createView({ backgroundColor: 'blue', width: '80%', left: '10%', top: '10%', height: '80%' }); var v6 = Ti.UI.createView({ backgroundColor: 'gray', width: '60%', left: '20%', top: '10%', height: '80%' }); v4.add(v6); v2.add(v4); win1.add(v2); var win2 = Titanium.UI.createWindow({ title: 'Tab 2', backgroundColor: '#fff', fullscreen: 'false' }); win2.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT, Ti.UI.UPSIDE_PORTRAIT]; var tab2 = Titanium.UI.createTab({ icon: 'KS_nav_ui.png', title: 'Tab 2', window: win2 }); var label2 = Titanium.UI.createLabel({ color: '#999', text: 'I am Window 2', font: { fontSize: 20, fontFamily: 'Helvetica Neue' }, textAlign: 'center', width: 'auto' }); win2.add(label2); tabGroup.addTab(tab1); tabGroup.addTab(tab2); tabGroup.open(); {noformat} As shown in the images, when started in Portrait, the views are shown properly. On turning the emulator/ device to landscape, the white space between the two views can be noticed. Also, the bottoms of views are not visible.

Attachments

FileDateSize
Screen Shot 2011-10-20 at 3.02.40 PM.png2011-10-20T14:08:12.000+000076616
Screen Shot 2011-10-20 at 3.02.54 PM.png2011-10-20T14:08:12.000+000072021
Screen Shot 2011-10-20 at 3.51.51 PM.png2011-10-20T14:52:38.000+000080254
Screen Shot 2011-10-20 at 3.52.06 PM.png2011-10-20T14:52:38.000+000075939

Comments

  1. Natalie Huynh 2011-10-24

    Run this code also
       var tabGroup = Titanium.UI.createTabGroup();
       var win1 = Titanium.UI.createWindow({ title: 'Tab 1', backgroundColor: '#fff', fullscreen: 'false' });
       var tab1 = Titanium.UI.createTab({ icon: 'KS_nav_views.png', title: 'Tab 1', window: win1 });
       
       win1.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT, Ti.UI.UPSIDE_PORTRAIT];
       
       var v1 = Ti.UI.createView({
       	backgroundColor: '#f00',
       	//width: '30%',
           width: 'auto',
       	left: '20%',
       	top: 0,
       	height: '100%'
       });
       
       var v3 = Ti.UI.createView({
       	backgroundColor: 'blue',
       	width: '80%',
       	left: '10%',
       	top: '10%',
       	height: '80%'
       });
       
       var v5 = Ti.UI.createView({
       	backgroundColor: 'gray',
       	width: '60%',
       	left: '20%',
       	top: '10%',
       	height: '80%'
       });
       
       //v3.add(v5);
       //v1.add(v3);
       win1.add(v1);
       
       var v2 = Ti.UI.createView({
       	backgroundColor: '#0f0',
       //	width: '30%',
           width: 'auto',
       	right: '20%',
       	top: 0,
       	height: '100%'
       });
       
       var v4 = Ti.UI.createView({
       	backgroundColor: 'blue',
       	width: '80%',
       	left: '10%',
       	top: '10%',
       	height: '80%'
       });
       
       var v6 = Ti.UI.createView({
       	backgroundColor: 'gray',
       	width: '60%',
       	left: '20%',
       	top: '10%',
       	height: '80%'
       });
       
       //v4.add(v6);
       //v2.add(v4);
       win1.add(v2);
       
       var win2 = Titanium.UI.createWindow({ title: 'Tab 2', backgroundColor: '#fff', fullscreen: 'false' });
       win2.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT, Ti.UI.UPSIDE_PORTRAIT];
       var tab2 = Titanium.UI.createTab({ icon: 'KS_nav_ui.png', title: 'Tab 2', window: win2 });
       var label2 = Titanium.UI.createLabel({ color: '#999', text: 'I am Window 2', font: { fontSize: 20, fontFamily: 'Helvetica Neue' }, textAlign: 'center', width: 'auto' });
       win2.add(label2);
       tabGroup.addTab(tab1);
       tabGroup.addTab(tab2);
       tabGroup.open();
       
  2. Bill Dawson 2011-10-25

    Also merged to 1_7_X. In addition to 1.8.0 testing mentioned in the pull request (https://github.com/appcelerator/titanium_mobile/pull/575#issuecomment-2519262) , also tested the two failcases in 1_7_X branch, as well as several screens of KitchenSink.
  3. Natalie Huynh 2011-12-06

    Tested with 1.8.0.1.v20111205164258 v8/rhino on Galaxy 10.1 (3.1) Droid 1 (2.2.2) Nexus S (2.3.6) Emulator (4.0)
  4. Allen Yeung 2011-12-08

    Here is the test case I used (I tweaked the percentages so the bug is more obvious to see).
       Titanium.UI.setBackgroundColor('#000');
       
       var win1 = Titanium.UI.createWindow({  
           title:'Tab 1',
           backgroundColor:'#e7e7e7'
       });
       
       
       var label1 = Titanium.UI.createLabel({
         color:'black',
         top:20,
         //left:20,
         //right:20,
         right:'33%',
         left:'33%',
         height:'auto',
         backgroundColor:'orange',
         text:'Documentation is segmented by the Titanium platform youre using. While APIs are similar between both desktop and mobile, the documentation is specific to each platform to make it easier to understand whats supported and to concentrate on information specific to each platform.',
         font:{fontSize:20,fontFamily:'Helvetica Neue'},
         
       });
        var scrollView = Titanium.UI.createScrollView({
               contentWidth:'auto',
               contentHeight:'auto',
               top:0,
               backgroundColor:'yellow',
               showVerticalScrollIndicator:true,
               showHorizontalScrollIndicator:true,
               layout:'vertical'
           });
       
       
       var view = Ti.UI.createView({
             height:100,
             //right:20,
             left:20,
             right:'33%',
             left:'33%',
             backgroundColor:'white',
             top:10,
             borderRadius:10,
             borderWidth:1,
             borderColor:'#808080',
             layout:'vertical'
           });
       scrollView.add(label1);
       scrollView.add(view);
       win1.add(scrollView);
       
       win1.open();
       
  5. Allen Yeung 2011-12-08

    PR ready https://github.com/appcelerator/titanium_mobile/pull/885
  6. Michael Pettiford 2011-12-10

    Tested on Ti Studio 1.0.7.201112080131 

Ti Mob SDK 1.8.0.1.v20111209102124 v8/rhino 

OSX Lion
 Droid 3 2.3.4 Expected behavior of percentage based views being displayed correctly (redrawn) is shown. Tested using all three test cases
  7. Natalie Huynh 2012-01-03

    Open to add label

JSON Source