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

Android: TabGroup never translucent even if translucent theme applied to TiTabActivity

    Details

      Description

      {html}<div><p>For an activity window to be translucent, Android appears to
      require that you set the activity's theme to a translucent theme in
      the AndroidManifest.xml – <a href=
      "http://groups.google.com/group/android-developers/browse_thread/thread/599807e7818f926f/db8fd5c21ae8f0ac?show_docid=db8fd5c21ae8f0ac">
      it does not appear to be possible to successfully set a translucent
      theme – or a transparent window background – at runtime</a>.</p>
      <p>You could, for example, use a custom AndroidManifest.xml in your
      Titanium application and set the TiActivity as such:</p>
      <pre>
      <code><activity android:configChanges="keyboardHidden|orientation" android:name="ti.modules.titanium.ui.TiActivity" android:theme="@android:style/Theme.Translucent"/></code>
      </pre>
      <p>TiActivity is the activity we use for all "heavyweight" windows
      in Titanium. The above change to the TiActivity's manifest entry –
      adding
      <code>android:theme="@android:style/Theme.Translucent"</code>
      successfully makes your windows translucent by default. (In code,
      you can then give a <code>backgroundColor</code> to a window if you
      don't want it to be translucent.)</p>
      <p>When you use a TabGroup, however, you need to consider the theme
      for the <strong><code>TiTabActivity</code></strong>, which is the
      activity we use for TabGroups. So this <strong>should
      work</strong>:</p>
      <pre>
      <code><activity android:configChanges="keyboardHidden|orientation" android:name="ti.modules.titanium.ui.TiTabActivity" android:theme="@android:style/Theme.Translucent"/></code>
      </pre>
      <p>But, in fact, it's not working. The reason is because we
      explicitly – in our Java code – set the Android TabHost's
      background drawable to a <code>ColorDrawable</code> with color
      value <code>#ff1a1a1a</code>.</p>
      <p>SO ... to re-create the failcase, follow these rather elaborate
      steps...</p>
      <ul>
      <li>
      <p>Create a new Titanium application.</p>
      </li>
      <li>
      <p>Make this its app.js:</p>
      </li>
      </ul>
      <pre>
      <code class=
      "javascript">Ti.UI.backgroundImage = 'KS_nav_ui.png'; // Set the root background to show an (ugly, stretched) image
      var tabGroup = Titanium.UI.createTabGroup();
      var win1 = Titanium.UI.createWindow({
      title:'Tab 1',
      backgroundColor:'transparent'
      });
      var tab1 = Titanium.UI.createTab({
      icon:'KS_nav_views.png',
      title:'Tab 1',
      window:win1
      });
      var win2 = Titanium.UI.createWindow({
      title:'Tab 2',
      backgroundColor:'transparent'
      });
      var tab2 = Titanium.UI.createTab({
      icon:'KS_nav_ui.png',
      title:'Tab 2',
      window:win2
      });
      tabGroup.addTab(tab1);
      tabGroup.addTab(tab2);
      tabGroup.open();</code>
      </pre>
      <ul>
      <li>
      <p>Run the app once so that it generates our default
      AndroidManifest.xml.</p>
      </li>
      <li>
      <p>Create the folder <code>platform/android</code> under the
      project's root folder.</p>
      </li>
      <li>
      <p>Copy <code>build/android/AndroidManifest.xml</code> into
      <code>platform/android</code>. This tells Titanium you want to use
      a custom AndroidManifest.xml.</p>
      </li>
      <li>
      <p>Edit <code>platform/android/AndroidManifest.xml</code></p>
      </li>
      <li>
      <p>Search for <code>TiTabActivity</code>. When you find it, add
      this attribute to its element:
      <code>android:theme="@android:style/Theme.Translucent"</code> so
      that the complete element looks like:</p>
      </li>
      </ul>
      <pre>
      <code><activity android:configChanges="keyboardHidden|orientation" android:name="ti.modules.titanium.ui.TiTabActivity" android:theme="@android:style/Theme.Translucent"/></code>
      </pre>
      <ul>
      <li>
      <p>Save these changes you've made to
      <code>platform/android/AndroidManifest.xml</code>.</p>
      </li>
      <li>
      <p>Re-launch the application. You will see that although you have
      specified a translucent theme for our tab Activity, you still won't
      be able to see through to the default background, which is the
      image KS_nav_ui.png.</p>
      </li>
      </ul></div>{html}

        Attachments

          Activity

            People

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

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

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

                  Git Integration