Titanium Mobile
  1. Titanium Mobile
  2. TIMOB-3142

Android: Inconsistent Sizing of Tabbed Window with Table and Textfield

    Details

      Description

      {html}<div><h1>Problem</h1>
      <p>The height of a table and a text field in a tabbed window is
      inconsistent when the keyboard pops up. Consider an app with two
      tabs, and the first tab has a table and a text field on it. Touch
      into the text field, and the keyboard pops up over the window. The
      layout of the current tab does not change at all. Switch to the
      second tab, and then back to the first tab, and everything will
      have resized to accomodate for the keyboard. This "resize" does not
      occur if the table is not added to the tab.</p>
      <h1>Expected Behavior</h1>
      <p>The tab should either resize or not. The presence of the table
      should not affect this.</p>
      <h1>Sample Code</h1>
      <p>Follow the instructions of the visible text – "Touch 1st", 2nd,
      and 3rd. After touching the 1st one, notice the keyboard pops up
      and the layout is NOT adjusted. Touch 2nd and 3rd, and now notice
      the tab has been scrunched up.</p>
      <pre>
      <code class=
      "javascript">// create our main window, which is a table with a text field
      var mainWindow = Titanium.UI.createWindow({
      backgroundColor:'yellow',
      title:'Touch Me 3rd'
      });

      // add a table view – note that if you comment out this line, the resize issue will disappear!
      mainWindow.add(Ti.UI.createTableView());

      // add a text field
      mainWindow.add(Titanium.UI.createTextField({
      width:300,
      height:50,
      value: 'Touch Me 1st',
      backgroundColor:'white'
      }));

      // add a footer view
      mainWindow.add(Ti.UI.createView({
      backgroundColor:'#3b5d7c',
      bottom: 0,
      height: 45
      }));

      // add our main window to a tab group
      var tabGroup = Titanium.UI.createTabGroup();
      tabGroup.addTab(Titanium.UI.createTab({
      window: mainWindow,
      title: 'Touch Me 3rd'
      }));
      tabGroup.addTab(Titanium.UI.createTab({
      window:Titanium.UI.createWindow({ backgroundColor: 'cyan', title: 'Touch Me 2nd' }),
      title: 'Touch Me 2nd'
      }));
      tabGroup.open();</code>
      </pre>
      <h1>Tested On</h1>
      <p>Titanium SDK version: 1.6.0 (02/10/11 14:34 9db0685...)<br>
      Android Epic 4G 2.1</p>
      <h2>Associated Helpdesk Ticket</h2>
      <p><a href=
      "http://developer.appcelerator.com/helpdesk/view/72891">http://developer.appcelerator.com/helpdesk/view/72891</a></p></div>{html}

        Issue Links

          Activity

          Hide
          Bill Dawson added a comment -
          {html}<div><p>(from <a href=
          "/projects/32238/changesets/73b9a48bfcafd1ca8e5e13b35f39af9a02b705d6"
          title=
          "Changeset [73b9a48bfcafd1ca8e5e13b35f39af9a02b705d6]">[73b9a48bfcafd1ca8e5e13b35f39af9a02b705d6]</a>)
          Give TabGroup the windowSoftInputMode property that windows also
          enjoy, so that pan/resize behavior can be more predictable.
          [<a href="/projects/32238/tickets/3142" title=
          "Ticket #3142">#3142</a>] <a href=
          "https://github.com/appcelerator/titanium_mobile/commit/73b9a48bfcafd1ca8e5e13b35f39af9a02b705d6">
          https://github.com/appcelerator/titanium_mobile/commit/73b9a48bfcaf...</a></p></div>{html}
          Show
          Bill Dawson added a comment - {html}<div><p>(from <a href= "/projects/32238/changesets/73b9a48bfcafd1ca8e5e13b35f39af9a02b705d6" title= "Changeset [73b9a48bfcafd1ca8e5e13b35f39af9a02b705d6] "> [73b9a48bfcafd1ca8e5e13b35f39af9a02b705d6] </a>) Give TabGroup the windowSoftInputMode property that windows also enjoy, so that pan/resize behavior can be more predictable. [<a href="/projects/32238/tickets/3142" title= "Ticket #3142">#3142</a>] <a href= "https://github.com/appcelerator/titanium_mobile/commit/73b9a48bfcafd1ca8e5e13b35f39af9a02b705d6"> https://github.com/appcelerator/titanium_mobile/commit/73b9a48bfcaf ...</a></p></div>{html}
          Hide
          Bill Dawson added a comment -
          {html}<div><p>(from <a href=
          "/projects/32238/changesets/0adfd459e883edf0661d4ff259b18c3151f06d51"
          title=
          "Changeset [0adfd459e883edf0661d4ff259b18c3151f06d51]">[0adfd459e883edf0661d4ff259b18c3151f06d51]</a>)
          Add windowSoftInput property to TabGroup documentation [<a href=
          "/projects/32238/tickets/3142" title="Ticket #3142">#3142</a>]
          <a href=
          "https://github.com/appcelerator/titanium_mobile/commit/0adfd459e883edf0661d4ff259b18c3151f06d51">
          https://github.com/appcelerator/titanium_mobile/commit/0adfd459e883...</a></p></div>{html}
          Show
          Bill Dawson added a comment - {html}<div><p>(from <a href= "/projects/32238/changesets/0adfd459e883edf0661d4ff259b18c3151f06d51" title= "Changeset [0adfd459e883edf0661d4ff259b18c3151f06d51] "> [0adfd459e883edf0661d4ff259b18c3151f06d51] </a>) Add windowSoftInput property to TabGroup documentation [<a href= "/projects/32238/tickets/3142" title="Ticket #3142">#3142</a>] <a href= "https://github.com/appcelerator/titanium_mobile/commit/0adfd459e883edf0661d4ff259b18c3151f06d51"> https://github.com/appcelerator/titanium_mobile/commit/0adfd459e883 ...</a></p></div>{html}
          Hide
          Bill Dawson added a comment -
          {html}<div><p>(from <a href=
          "/projects/32238/changesets/064abfdece16638592e2a60d2d527b4e39a3e2ec"
          title=
          "Changeset [064abfdece16638592e2a60d2d527b4e39a3e2ec]">[064abfdece16638592e2a60d2d527b4e39a3e2ec]</a>)
          Fix Ti.UI.Window documentation which erroneously refers to property
          "softInputMode" – it's actually "windowSoftInputMode" [<a href=
          "/projects/32238/tickets/3142" title="Ticket #3142">#3142</a>]
          <a href=
          "https://github.com/appcelerator/titanium_mobile/commit/064abfdece16638592e2a60d2d527b4e39a3e2ec">
          https://github.com/appcelerator/titanium_mobile/commit/064abfdece16...</a></p></div>{html}
          Show
          Bill Dawson added a comment - {html}<div><p>(from <a href= "/projects/32238/changesets/064abfdece16638592e2a60d2d527b4e39a3e2ec" title= "Changeset [064abfdece16638592e2a60d2d527b4e39a3e2ec] "> [064abfdece16638592e2a60d2d527b4e39a3e2ec] </a>) Fix Ti.UI.Window documentation which erroneously refers to property "softInputMode" – it's actually "windowSoftInputMode" [<a href= "/projects/32238/tickets/3142" title="Ticket #3142">#3142</a>] <a href= "https://github.com/appcelerator/titanium_mobile/commit/064abfdece16638592e2a60d2d527b4e39a3e2ec"> https://github.com/appcelerator/titanium_mobile/commit/064abfdece16 ...</a></p></div>{html}
          Hide
          Bill Dawson added a comment -
          {html}<div><p>What you're seeing is Android's non-specific behavior when the
          <code>windowSoftInputMode</code> is not explicitly set. See
          Android's doc re <a href=
          "http://developer.android.com/reference/android/view/WindowManager.LayoutParams.html#SOFT_INPUT_ADJUST_UNSPECIFIED">
          the unspecified setting</a>, which states "if neither of these [PAN
          vs RESIZE] are set, then the system will try to pick one or the
          other depending on the contents of the window".</p>
          <p>In step 1 of the sample code, Android (for whatever reason) is
          choosing the "Pan" mode – the window moves up slightly to (just
          barely) accomodate the text field when the soft keyboard appears.
          In step 3, Android decides to use the "Resize" mode – again, for
          whatever reason.</p>
          <p>Android's pan-and/or-resize stuff gets particularly strange and
          ornery when a scrollable view – such as a ListView, which is the
          native control of the TableView – is on the Window. You see this
          in a video I made (no sound):</p>
          <p><a href=
          "http://screencast.com/t/PlRIxPUMseei">http://screencast.com/t/PlRIxPUMseei</a></p>
          <p>The video shows a native (non-Titanium) Android application. The
          blue part near the top of the tabbed window is just a "layout",
          which is like a "View" in titanium – it can hold children. Inside
          it, the grey part is a ListView, which is what Titanium's TableView
          is based on. When I touch into the text field, the non-specific
          pan-or-resize that Android does (or doesn't do) totally mucks up,
          as you see. If I just take out that child ListView, then everything
          works okay.</p>
          <p>Anyway, the point here is that we want to be able to predict how
          Android will behave, rather than the non-specified behavior. So
          I've added the <code>windowSoftInputMode</code> property to
          <code>TabGroup</code>, just like we have it for
          <code>Window</code>. Because "behind" the TabGroup is an Android
          Window which is responsible for the panning/resizing. So you can
          think of it as there being 3 windows in play here: the "outside"
          window which contains the TabGroup (and which you do not specify in
          Titanium code – it's just there already when you create the
          TabGroup), and then the two windows that you created, one each per
          tab.</p>
          <p>It's that outside window – the one holding the entire TabGroup
          – that is responsible for resizing/panning. But until just now,
          Titanium did not have a way for you to tell that outside window
          which pan/resize mode you want Android to use for the TabGroup.</p>
          <p>Now you can specify that. I've added the
          <code>windowSoftInputMode</code> property to TabGroup. So if I
          modify your code, it will look like this:</p>
          <pre>
          <code class=
          "javascript">// create our main window, which is a table with a text field
          var mainWindow = Titanium.UI.createWindow({ backgroundColor:'yellow', title:'Touch Me 3rd' });

          // add a table view – note that if you comment out this line, the resize issue will disappear!
          mainWindow.add(Ti.UI.createTableView());

          // add a text field
          mainWindow.add(Titanium.UI.createTextField({ width:300, height:50, value: 'Touch Me 1st', backgroundColor:'white' }));

          // add a footer view
          mainWindow.add(Ti.UI.createView({ backgroundColor:'#3b5d7c', bottom: 0, height: 45 }));

          // add our main window to a tab group
          var tabGroup = Titanium.UI.createTabGroup({ windowSoftInputMode: Ti.UI.Android.SOFT_INPUT_ADJUST_RESIZE // <--- THAT'S NEW!!! });
          tabGroup.addTab(Titanium.UI.createTab({ window: mainWindow, title: 'Touch Me 3rd' }));
          tabGroup.addTab(Titanium.UI.createTab({
          window:Titanium.UI.createWindow({ backgroundColor: 'cyan', title: 'Touch Me 2nd' }),
          title: 'Touch Me 2nd'
          }));
          tabGroup.open();</code>
          </pre>
          <p>If you run that, you'll get the "resize" mode right away when
          you click into the text field.</p>
          <p><strong>NOTA BENA</strong>: I discovered while working on this
          that our current, live, production documentation is wrong: It shows
          - in Ti.UI.Window - that the property name is
          <strong><code>softInputMode</code></strong>, when in fact it is
          <strong><code>windowSoftInputMode</code></strong>.</p></div>{html}
          Show
          Bill Dawson added a comment - {html}<div><p>What you're seeing is Android's non-specific behavior when the <code>windowSoftInputMode</code> is not explicitly set. See Android's doc re <a href= "http://developer.android.com/reference/android/view/WindowManager.LayoutParams.html#SOFT_INPUT_ADJUST_UNSPECIFIED"> the unspecified setting</a>, which states "if neither of these [PAN vs RESIZE] are set, then the system will try to pick one or the other depending on the contents of the window".</p> <p>In step 1 of the sample code, Android (for whatever reason) is choosing the "Pan" mode – the window moves up slightly to (just barely) accomodate the text field when the soft keyboard appears. In step 3, Android decides to use the "Resize" mode – again, for whatever reason.</p> <p>Android's pan-and/or-resize stuff gets particularly strange and ornery when a scrollable view – such as a ListView, which is the native control of the TableView – is on the Window. You see this in a video I made (no sound):</p> <p><a href= "http://screencast.com/t/PlRIxPUMseei"> http://screencast.com/t/PlRIxPUMseei </a></p> <p>The video shows a native (non-Titanium) Android application. The blue part near the top of the tabbed window is just a "layout", which is like a "View" in titanium – it can hold children. Inside it, the grey part is a ListView, which is what Titanium's TableView is based on. When I touch into the text field, the non-specific pan-or-resize that Android does (or doesn't do) totally mucks up, as you see. If I just take out that child ListView, then everything works okay.</p> <p>Anyway, the point here is that we want to be able to predict how Android will behave, rather than the non-specified behavior. So I've added the <code>windowSoftInputMode</code> property to <code>TabGroup</code>, just like we have it for <code>Window</code>. Because "behind" the TabGroup is an Android Window which is responsible for the panning/resizing. So you can think of it as there being 3 windows in play here: the "outside" window which contains the TabGroup (and which you do not specify in Titanium code – it's just there already when you create the TabGroup), and then the two windows that you created, one each per tab.</p> <p>It's that outside window – the one holding the entire TabGroup – that is responsible for resizing/panning. But until just now, Titanium did not have a way for you to tell that outside window which pan/resize mode you want Android to use for the TabGroup.</p> <p>Now you can specify that. I've added the <code>windowSoftInputMode</code> property to TabGroup. So if I modify your code, it will look like this:</p> <pre> <code class= "javascript">// create our main window, which is a table with a text field var mainWindow = Titanium.UI.createWindow({ backgroundColor:'yellow', title:'Touch Me 3rd' }); // add a table view – note that if you comment out this line, the resize issue will disappear! mainWindow.add(Ti.UI.createTableView()); // add a text field mainWindow.add(Titanium.UI.createTextField({ width:300, height:50, value: 'Touch Me 1st', backgroundColor:'white' })); // add a footer view mainWindow.add(Ti.UI.createView({ backgroundColor:'#3b5d7c', bottom: 0, height: 45 })); // add our main window to a tab group var tabGroup = Titanium.UI.createTabGroup({ windowSoftInputMode: Ti.UI.Android.SOFT_INPUT_ADJUST_RESIZE // <--- THAT'S NEW!!! }); tabGroup.addTab(Titanium.UI.createTab({ window: mainWindow, title: 'Touch Me 3rd' })); tabGroup.addTab(Titanium.UI.createTab({ window:Titanium.UI.createWindow({ backgroundColor: 'cyan', title: 'Touch Me 2nd' }), title: 'Touch Me 2nd' })); tabGroup.open();</code> </pre> <p>If you run that, you'll get the "resize" mode right away when you click into the text field.</p> <p><strong>NOTA BENA</strong>: I discovered while working on this that our current, live, production documentation is wrong: It shows - in Ti.UI.Window - that the property name is <strong><code>softInputMode</code></strong>, when in fact it is <strong><code>windowSoftInputMode</code></strong>.</p></div>{html}
          Hide
          Bill Dawson added a comment -
          {html}<div><p>QE Testing:</p>
          <p>Take the code from my just-previous comment and run it as your
          app.js. When you click in the text field, the window should
          "resize", giving the impression that it compresses and moves the
          text field up and away from the soft keyboard.</p></div>{html}
          Show
          Bill Dawson added a comment - {html}<div><p>QE Testing:</p> <p>Take the code from my just-previous comment and run it as your app.js. When you click in the text field, the window should "resize", giving the impression that it compresses and moves the text field up and away from the soft keyboard.</p></div>{html}

            People

            • Assignee:
              Bill Dawson
              Reporter:
              Dawson Toth
            • Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Development