[TIMOB-12477] Android: Tab Icons not displayed with Theme.Holo
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | High |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2013-02-22T21:51:35.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | Release 3.1.0, 2013 Sprint 04 API, 2013 Sprint 04 |
| Components | Android |
| Labels | android, api, holo, insight |
| Reporter | Thomas Keunebroek |
| Assignee | Vishal Duggal |
| Created | 2013-01-10T05:59:33.000+0000 |
| Updated | 2013-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:
declaration:
<uses-sdk android:targetSdkVersion="11"/>
- in your android:theme="@android:style/Theme.Holo"
You'll see that the tabs don't have icons anymore.
Attachments
| File | Date | Size |
|---|---|---|
| tabs-holo.png | 2013-01-10T05:59:33.000+0000 | 55792 |
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.
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
app.jsApplicationTabGroup.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(); })();ApplicationWindow.jsfunction 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;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 thefunction ApplicationWindow(title) { var self = Ti.UI.createWindow({ title:title, backgroundColor:'white' }); return self; }; module.exports = ApplicationWindow;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.3tiapp.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>Looks like an android bug. We can reproduce the same issue in a stand alone android application with holo theme.
Looks like an android bug. We can reproduce the same issue in a stand alone android application using holo theme.
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,
in progress
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.
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.