Versions Compared

Key

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

...

Android allows you to set the appearance of your application using themes. A theme specifies default colors, fonts, and images, for an Android activity or an entire application. Your application can use the device's built-in themes, or include custom themes. Titanium's root splash screen activity uses "Theme.Titanium" by default. All other activity windows will use "Theme.MaterialComponents.Bridge" as of Titanium 9.3.0. Older Titanium versions will use "Theme.AppCompat" for all activity windows.

...

First, create a theme XML file in ./platform/android/res/values. Do  For Titanium SDK 8.x.x and older, do NOT name the file theme.xml. Titanium uses this name as its default theme file, which is required to build the application. If you create a file called theme.xml, it will overwrite the default Titanium one and break the build process 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.

The Titanium SDK uses the appcompat library to provide support for themes. A benefit of using the appcompat library is that it provides ActionBar support on devices running Android 2.1.x and later. Prior to the usage of the appcompat library, the ActionBar was only available to devices running Android 3.x and later. Note that applications can only use the AppCompat 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>

...

To define custom themes, place the theme XML files with your custom styles in the platform/android/res/values folder. For Titanium SDK 8.x.x and older, do NOT name the file theme.xml. since  since it will overwrite Titanium's built-in theme.xml file. This is not an issue with Titanium 9.0.0 and higher.

...

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

Material theme

Starting with Release 4.0As of Titanium 9.3.0, apps use the Titanium SDK exposes the Material Theme color palette attributes, introduced in Android 5.0 (Lollipop). These attributes allow you to style the status bar, action bar and several control widgets, such as toggle switches and text fields, without having to individually style each component.

To use the Material Theme with Titanium, you need to create a custom theme that extends one of the AppCompat themes, then set the color palette attributes you want to change from the default theme (see the attribute table below). You will need to build your application with Android SDK 5.0 (API 21) and greater. Note that some of the attributes will not be applied when the application is ran on devices running previous versions of Android (pre-Lollipop) (see the comparison table below).

...

.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.

With a material based theme, you'll be able to set additional color palette attributes.

Gliffy Diagram
nameMaterialThemeAnnotated

...

The following XML file below defines a theme that uses the default AppCompat extends a material based theme and applies additional color palette attributes. This theme was applied to the application in the previous screen shot.

Code Block
titleplatform/android/res/values/custom_theme.xml
linenumberstrue
languagexml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- For Titanium 8.x.x and older, use "Theme.AppCompat" instead. -->
	<style name="materialThemeMyMaterialTheme" parent="@style/Theme.AppCompatMaterialComponents.Bridge">
    	<item name="colorPrimary">#1565C0</item>
	    <item name="colorPrimaryDark">#0D47A1</item>
    	<item name="colorAccent">#FF80AB</item>
	    <item name="colorControlNormal">#757575</item>
    	<item name="colorControlActivated">#FF6E40</item>
	    <item name="colorControlHighlight">#FF4081</item>
    	<item name="colorSwitchThumbNormal">#BDBDBD</item>
	    <item name="android:colorButtonNormal">#BDBDBD</item>
    	<item name="android:colorEdgeEffect">#FF4081</item>
	</style>
</resources>

...