Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

You can also assign a unique theme to an activity instead which would override the application's assigned theme.

Android AppCompat themes

...

Titanium

...

material

...

themes

...

Android provides some built-in themes to easily change the overall appearance of your application. To use a built-in theme, you need to create a theme XML file for your project, specify the built-in theme you want to use, and reference it in the Android manifest section of your tiapp.xml file.

First, create a theme XML file in ./platform/android/res/values. For Titanium SDK 8.x.x and older, do NOT name the file theme.xml since it will overwrite Titanium's built-in theme.xml file. This is not an issue with Titanium 9.0.0 and higher.

In the theme XML file, add the theme you want to use. Themes defined by the Android system, excluding the AppCompat ones, are prefaced with @android:style (for example, @android:style/Theme.Translucent). Custom themes defined by the application are prefaced with @style (for example, @style/Theme.MyTheme). For example, the file below adds support for some of the common built-in Android themes.

Code Block
titleplatform/android/res/values/builtin_themes.xml
linenumberstrue
languagexml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
	<style name="LightDarkBar" parent="Theme.AppCompat.Light.DarkActionBar"/>
	<style name="Light" parent="Theme.AppCompat.Light"/>
	<style name="Dark" parent="Theme.AppCompat"/>
</resources>

Finally, to use a theme in your application, modify the Android section of your tiapp.xml file to reference the style name you want to use:

Code Block
linenumberstrue
languagexml
<android xmlns:android="http://schemas.android.com/apk/res/android">
    <manifest>
        <application android:theme="@style/LightDarkBar"/>
    </manifest>
</android>

The screenshots below show the difference between the various built-in themes:

AppCompat.Light

AppCompat/HoloAppCompat.Light.DarkActionBar
Image RemovedImage RemovedImage Removed

Titanium material themes

As of Titanium 10.0.0, all of the below are material based themes which support displaying Google's native material widgets/views. You can apply these themes to your application or individual activities instead of creating your own custom theme.

...

Refer to Android Developers: Styles and Themes for detailed information on customizing items.

Material theme

...

Override a theme

If you have a global theme set, the application can override the theme for a window or activity, or if you want to specify a custom theme for a specific window or activity.

Override a window theme

Use the theme property to override the global theme for an individual window. Set the property to the name of the theme you want to apply to the window. The property can only be set when creating the Window object and cannot be changed after it is set. For Titanium 10.0.0 and higher, you should use one of the Theme.AppDerived.* based themes since they are based on the theme assigned to <application/>, making it look consistent with other windows. For Titanium 9.3.x, use a Theme.Titanium.* based theme. For older Titanium versions, you should use a Theme.AppCompat.* based theme.

 

Code Block
languagejs
const win = Ti.UI.createWindow({
    theme: "Theme.AppDerived.Fullscreen"
});

Override an activity theme

As you can see in the previous examples, an application-wide theme can be specified in the <application> element of your tiapp.xml file, but it can also be overridden on a per-activity basis. These activities are defined in the AndroidManifest.xml file, generated by the build process. You can find the generated AndroidManifest.xml file in the build/android folder under your project folder. Inside the AndroidManifest.xml, you'll find code like this:

Code Block
linenumberstrue
languagexml
<activity android:name=".ThemetestActivity" android:theme="@style/Theme.Titanium">
    <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"/>
<activity android:name="org.appcelerator.titanium.TiTranslucentActivity" android:theme="@android:style/Theme.AppDerived.Translucent"/>
Note

The build folder is hidden by default in Studio's App Explorer and Project Explorer views, but visible in the Navigator view.

To override the theme for one of these activities, copy the activity definition into the tiapp.xml file, and place it inside the <android><manifest> element. The <activity> element must be nested inside an <application> element, as in the original AndroidManifest.xml file. The end result should look something like this:

Code Block
linenumberstrue
languagexml
<android xmlns:android="http://schemas.android.com/apk/res/android">
    <manifest>
        <application>
            <!-- Override the root splash screen activity's theme. -->
            <activity android:name=".ThemetestActivity" android:theme="@style/Theme.MyTheme">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN"/>
                    <category android:name="android.intent.category.LAUNCHER"/>
                </intent-filter>
            </activity>
        </application>
    </manifest>
</android>
Note

If you change the name of the application, you will need to copy the newly generated android:name value from the AndroidManifest.xml file and overwrite the old value in the tiapp.xml file.

Android Material themes

As of Titanium 9.3.0, apps use the Theme.MaterialComponents.Bridge by default. You do not need to create your own theme.

For older Titanium SDK versions, you'll need to create a custom theme. For 9.0.0 and above, it should be extend a Theme.MaterialComponents.* based theme.  For Titanium 8.x.x and older, it should extend  a Theme.AppCompat.* based theme.

...

Override a theme

If you have a global theme set, the application can override the theme for a window or activity, or if you want to specify a custom theme for a specific window or activity.

Override a window theme

Use the theme property to override the global theme for an individual window. Set the property to the name of the theme you want to apply to the window. The property can only be set when creating the Window object and cannot be changed after it is set. For Titanium 10.0.0 and higher, you should use one of the Theme.AppDerived.* based themes since they are based on the theme assigned to <application/>, making it look consistent with other windows. For Titanium 9.3.x, use a Theme.Titanium.* based theme. For older Titanium versions, you should use a Theme.AppCompat.* based theme.

 

Code Block
languagejs
const win = Ti.UI.createWindow({
    theme: "Theme.AppDerived.Fullscreen"
});

Override an activity theme

As you can see in the previous examples, an application-wide theme can be specified in the <application> element of your tiapp.xml file, but it can also be overridden on a per-activity basis. These activities are defined in the AndroidManifest.xml file, generated by the build process. You can find the generated AndroidManifest.xml file in the build/android folder under your project folder. Inside the AndroidManifest.xml, you'll find code like this:

...

Android AppCompat themes

Warning
As of Titanium 10.0.0, AppCompat themes are no longer supported. Using them will cause a runtime error occur. This is because Titanium 10.0.0 uses native material widgets/views that require MaterialComponents based themes to work.

Android provides some built-in themes to easily change the overall appearance of your application. To use a built-in theme, you need to create a theme XML file for your project, specify the built-in theme you want to use, and reference it in the Android manifest section of your tiapp.xml file.

First, create a theme XML file in ./platform/android/res/values. For Titanium SDK 8.x.x and older, do NOT name the file theme.xml since it will overwrite Titanium's built-in theme.xml file. This is not an issue with Titanium 9.0.0 and higher.

In the theme XML file, add the theme you want to use. Themes defined by the Android system, excluding the AppCompat ones, are prefaced with @android:style (for example, @android:style/Theme.Translucent). Custom themes defined by the application are prefaced with @style (for example, @style/Theme.MyTheme). For example, the file below adds support for some of the common built-in Android themes.

Code Block
titleplatform/android/res/values/builtin_themes.xml
linenumberstrue
languagexml
<activity android:name<?xml version="1.ThemetestActivity0" android:themeencoding="@style/Theme.Titanium"utf-8"?>
    <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"/>
<activity android:name="org.appcelerator.titanium.TiTranslucentActivity" android:theme="@android:style/Theme.AppDerived.Translucent"/>
Note

The build folder is hidden by default in Studio's App Explorer and Project Explorer views, but visible in the Navigator view.

...

<resources xmlns:android="http://schemas.android.com/apk/res/android">
	<style name="LightDarkBar" parent="Theme.AppCompat.Light.DarkActionBar"/>
	<style name="Light" parent="Theme.AppCompat.Light"/>
	<style name="Dark" parent="Theme.AppCompat"/>
</resources>

Finally, to use a theme in your application, modify the Android section of your tiapp.xml file to reference the style name you want to use:

Code Block
linenumberstrue
languagexml
<android xmlns:android="http://schemas.android.com/apk/res/android">
    <manifest>
        <application>
            <!-- Override the root splash screen activity's theme. -->
            <activity android:name=".ThemetestActivity" android:<application android:theme="@style/Theme.MyTheme">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN"LightDarkBar"/>
                    <category android:name="android.intent.category.LAUNCHER"/>
                </intent-filter>
            </activity>
        </application>
    </manifest>
</android>
Note

If you change the name of the application, you will need to copy the newly generated android:name value from the AndroidManifest.xml file and overwrite the old value in the tiapp.xml file.

The screenshots below show the difference between the various built-in themes:

AppCompat.Light

AppCompat/HoloAppCompat.Light.DarkActionBar
Image AddedImage AddedImage Added

Further reading