Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-5819

Android: Percentage-based views need to be re-drawn on device rotation

    Details

      Description

      Views that have widths or positioning points based on percentages do not properly get updated on device rotation.

      Sample Code

      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();
      

      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

          Issue Links

            Activity

              People

              • Assignee:
                ayeung Allen Yeung
                Reporter:
                sbhimavarapu Sandeep Bhimavarapu
              • Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Titanium SDK/CLI <> Titanium Mobile
                    Synced with:
                    TIMOB-4948
                    Sync status:
                    ERROR
                    Last received:
                    Last sent:

                    Git Integration