Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-12477] Android: Tab Icons not displayed with Theme.Holo

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2013-02-22T21:51:35.000+0000
Affected Version/sn/a
Fix Version/sRelease 3.1.0, 2013 Sprint 04 API, 2013 Sprint 04
ComponentsAndroid
Labelsandroid, api, holo, insight
ReporterThomas Keunebroek
AssigneeVishal Duggal
Created2013-01-10T05:59:33.000+0000
Updated2013-07-12T08:54:18.000+0000

Description

When using the Holo Theme in your Android application (Android version > 3.0), the tabs icons are not displayed anymore. To reproduce, just download the KitchenSink sample and add the following lines in the tiapp.xml - before the part:
<uses-sdk android:targetSdkVersion="11"/>
- in your declaration:
android:theme="@android:style/Theme.Holo"
You'll see that the tabs don't have icons anymore.

Attachments

FileDateSize
tabs-holo.png2013-01-10T05:59:33.000+000055792

Comments

  1. Eduardo Gomez 2013-01-28

    Can you provide either a titanium projec sample or tiapp.xml file? It will allow to replicate what you're seeing quicker, thanks. Hope hearing from you soon, Thomas.
  2. Thomas Keunebroek 2013-01-29

    Well, like I said, you just need the KitchenSink using the Android Holo theme to replicate. However, here's a sample app I've just built using the "Tabbed Application" sample from Titanium Studio. tiapp.xml
       <?xml version="1.0" encoding="UTF-8"?>
       <ti:app xmlns:ti="http://ti.appcelerator.org">
           <id>com.tab.test</id>
           <name>TabTest</name>
           <version>1.0</version>
           <publisher>shopmium</publisher>
           <url>http://</url>
           <description>not specified</description>
           <copyright>2013 by shopmium</copyright>
           <icon>appicon.png</icon>
           <persistent-wifi>false</persistent-wifi>
           <prerendered-icon>false</prerendered-icon>
           <statusbar-style>default</statusbar-style>
           <statusbar-hidden>false</statusbar-hidden>
           <fullscreen>false</fullscreen>
           <navbar-hidden>false</navbar-hidden>
           <analytics>true</analytics>
           <guid>e962583e-41b2-4280-b05a-dfa612e015f2</guid>
           <property name="ti.ui.defaultunit" type="string">system</property>
           <iphone>
               <orientations device="iphone">
                   <orientation>Ti.UI.PORTRAIT</orientation>
               </orientations>
               <orientations device="ipad">
                   <orientation>Ti.UI.PORTRAIT</orientation>
                   <orientation>Ti.UI.UPSIDE_PORTRAIT</orientation>
                   <orientation>Ti.UI.LANDSCAPE_LEFT</orientation>
                   <orientation>Ti.UI.LANDSCAPE_RIGHT</orientation>
               </orientations>
           </iphone>
       	<android xmlns:android="http://schemas.android.com/apk/res/android">
       	<tool-api-level>17</tool-api-level>
       	<manifest>
       		<uses-sdk android:minSdkVersion="8" />
       	
       		<!-- TI_MANIFEST -->
       	
       		<application android:icon="@drawable/appicon"
       			android:label="TabTest" android:name="TabtestApplication"
       			android:theme="@android:style/Theme.Holo"
       			android:debuggable="false">
       	
       			<!-- TI_APPLICATION -->
       	
       			<activity android:name=".TabtestActivity"
       				android:label="TabTest"
       				android:configChanges="keyboardHidden|orientation">
       				<intent-filter>
       					<action android:name="android.intent.action.MAIN" />
       					<category android:name="android.intent.category.LAUNCHER" />
       				</intent-filter>
       			</activity>
       	
       			<activity android:name="org.appcelerator.titanium.TiActivity"
       				android:configChanges="keyboardHidden|orientation" />
       			<activity android:name="org.appcelerator.titanium.TiTranslucentActivity"
       				android:configChanges="keyboardHidden|orientation"
       				android:theme="@android:style/Theme.Translucent" />
       			<activity android:name="org.appcelerator.titanium.TiModalActivity"
       				android:configChanges="keyboardHidden|orientation"
       				android:theme="@android:style/Theme.Translucent" />
       			<activity android:name="ti.modules.titanium.ui.TiTabActivity"
       				android:configChanges="keyboardHidden|orientation" />		
       	
       		</application>	
       	
       		</manifest>
       	</android>
           <modules/>
           <deployment-targets>
               <target device="blackberry">false</target>
               <target device="android">true</target>
               <target device="ipad">false</target>
               <target device="iphone">false</target>
               <target device="mobileweb">false</target>
           </deployment-targets>
           <sdk-version>3.0.0.GA</sdk-version>
       </ti:app>
       
    app.js
       /*
        * A tabbed application, consisting of multiple stacks of windows associated with tabs in a tab group.
        * A starting point for tab-based application with multiple top-level windows.
        * Requires Titanium Mobile SDK 1.8.0+.
        *
        * In app.js, we generally take care of a few things:
        * - Bootstrap the application with any data we need
        * - Check for dependencies like device type, platform version or network connection
        * - Require and open our top-level UI component
        *
        */
       
       //bootstrap and check dependencies
       if (Ti.version < 1.8 ) {
       	alert('Sorry - this application template requires Titanium Mobile SDK 1.8 or later');
       }
       
       // This is a single context application with mutliple windows in a stack
       (function() {
       	//determine platform and form factor and render approproate components
       	var osname = Ti.Platform.osname,
       		version = Ti.Platform.version,
       		height = Ti.Platform.displayCaps.platformHeight,
       		width = Ti.Platform.displayCaps.platformWidth;
       
       	var Window = require('ui/handheld/ApplicationWindow');
       
       	var ApplicationTabGroup = require('ui/common/ApplicationTabGroup');
       	new ApplicationTabGroup(Window).open();
       })();
       
    ApplicationTabGroup.js
       function ApplicationTabGroup(Window) {
       	//create module instance
       	var self = Ti.UI.createTabGroup();
       	
       	//create app tabs
       	var win1 = new Window(L('home')),
       		win2 = new Window(L('settings'));
       	
       	var tab1 = Ti.UI.createTab({
       		title: L('home'),
       		icon: '/images/KS_nav_ui.png',
       		window: win1
       	});
       	win1.containingTab = tab1;
       	
       	var tab2 = Ti.UI.createTab({
       		title: L('settings'),
       		icon: '/images/KS_nav_views.png',
       		window: win2
       	});
       	win2.containingTab = tab2;
       	
       	self.addTab(tab1);
       	self.addTab(tab2);
       	
       	return self;
       };
       
       module.exports = ApplicationTabGroup;
       
    ApplicationWindow.js
       function ApplicationWindow(title) {
       	var self = Ti.UI.createWindow({
       		title:title,
       		backgroundColor:'white'
       	});
       
       	return self;
       };
       
       module.exports = ApplicationWindow;
       
    Please note that the only things that have been modified from the sample is the tiapp.xml, with the Android API version and the Holo theme. If you just remove the and use @style:Theme.Titanium instead of Holo, you have the tab icons. Thanks for your help, we're glad that you're trying to address the issue. Regards,
  3. Eduardo Gomez 2013-01-29

    Moved to main project to dig into it. Above test reproduces the issue. Tested multiple times, attaching yet another tiapp.xml.

    Tested on

    Android Emulator - Google APIs Android 4.0 & 4.0.3

    tiapp.xml

           <android xmlns:android="http://schemas.android.com/apk/res/android">
             <tool-api-level>14</tool-api-level>
               <manifest>
               		<uses-sdk android:minSdkVersion="8" />
                   <uses-sdk android:targetSdkVersion="14"/>           
               <application android:icon="@drawable/appicon"
                   android:label="Test" 
                   android:theme="@android:style/Theme.Holo"
                   android:debuggable="false">    
               </application>                
                   <uses-permission android:name="android.permission.READ_CALENDAR"/>
                   <uses-permission android:name="android.permission.WRITE_CALENDAR"/>
               </manifest>
           </android>
       
  4. Vivekr 2013-02-09

    Looks like an android bug. We can reproduce the same issue in a stand alone android application with holo theme.
  5. Vivekr 2013-02-09

    Looks like an android bug. We can reproduce the same issue in a stand alone android application using holo theme.
  6. Thomas Keunebroek 2013-02-11

    Well, there are plenty of native Android apps that use tab along with icons. For instance, the official Contact app. I've been digging into the source code a bit, they set icons here: https://github.com/android/platform_packages_apps_contacts/blob/master/src/com/android/contacts/activities/ActionBarAdapter.java#L262 Thanks again for your feedback. Regards,
  7. Vivekr 2013-02-14

    in progress
  8. Vishal Duggal 2013-02-15

    Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/3873 This adds support for setting the icons on ActionBarTab. Might fix the holo issue as well.
  9. Dhirendra Jha 2013-07-12

    Environment Used - SDK - 3.1.2.v20130710144553, 3.1.1.GA Appcelerator Studio - 3.1.2.201307101037 Device - Nexus 7(v4.1) acs - 1.0.3 alloy - 1.1.3 npm - 1.2.14 titanium - 3.1.1 titanium-code-processor - 1.0.1 Reproduced this issue using 3.0.2.GA build but unable to reproduce using 3.1.1.GA and latest 3.1.2.v20130710144553 sdk builds. Tabs icon are displayed using Holo theme. Used Kitchen Sink application for verification. Hence closing this issue.

JSON Source