Home > Devices > Fire Phone

Applying Themes to Your App

Introduction

This page discusses how to apply Euclid themes and styles to your app. Euclid has two theme color schemes: Light and Dark, which have three layout options for each theme.

Note: While the Fire Phone SDK includes Theme.Amazon.Light and Theme.Amazon.Dark, these themes are specifically for 2D controls. If you are using Euclid controls, you should either use one of the Euclid themes for your activity or at least style all of your individual Euclid controls with and appropriate Euclid style.

Available Euclid Themes

The Fire Phone SDK provides six theme options for Euclid. Decide whether you want to use a Light or Dark theme, and then choose the appropriate theme for your layout:

  • Theme.Euclid.Light
  • Theme.Euclid.Dark
  • Theme.Euclid.Light.NoTitleBar
  • Theme.Euclid.Dark.NoTitleBar
  • Theme.Euclid.Light.FullScreen
  • Theme.Euclid.Dark.FullScreen

@euclid:style/Theme.Euclid.{Light, Dark}

Use one of the basic Euclid themes when you are placing an Android title bar at the top of the activity and do not want the theme to occupy the full screen. If a user enables the persistent status bar in Settings, the status bar is shown above the title bar, reducing the amount of screen available to the app.

@euclid:style/Theme.Euclid.{Light, Dark}.NoTitleBar

The NoTitleBar themes occupy the full screen by default. No Android title bar displays at the top of the activity. If a user enables the persistent status bar in Settings, the status bar is shown at the top of the screen, reducing the amount of screen available to the app. Most apps should use these themes, which take up the full screen by default and respect the persistent status bar option.

@euclid:style/Theme.Euclid.{Light, Dark}.FullScreen

The FullScreen themes also occupy the full screen by default and do not display an Android title bar at the top of the activity. However, even if a user enables the persistent status bar in Settings, the status bar does not display. The entire screen is available to the app. Use these themes for full screen games or full screen video apps.

Setting a Euclid Theme

The most simple way to style your controls with a Euclid theme is to assign a Euclid theme to your activity.

Use the following syntax in your manifest file to specify a Euclid Light or Dark theme:

<application android:theme=”@euclid:style/Theme.Euclid.Light ... Or

<application android:theme=”@euclid:style/Theme.Euclid.Dark ...

Note that if you are programmatically inflating any layouts that should have Euclid themes, inflate them in the proper activity context so that a Euclid theme is properly applied.

Applying a Euclid Theme to Individual Euclid controls

Although every Euclid control should have a Euclid theme applied themed, you do not need to use a Euclid theme directly. If you choose to use a theme for your activity that is not a descendant of a Euclid theme but you want to include Euclid controls in your layout, you can either add the appropriate Euclid themed attribute to your theme, or style your Euclid controls individually.

If a Euclid control is not styled with the appropriate Euclid style, the control might not function as expected, similarly to how themes work with stock Android controls and Android themes.

Control Themed attribute Styles
Enhanced List View (Use ZCheckBox.) amazon:enhancedListViewStyle Widget.Euclid.Dark.EnhancedListView
Widget.Euclid.Light.EnhancedListView
Navigation Pane (Set everything in the Navigation Pane to a Dark theme.) amazon:navigationPaneStyle Widget.Euclid.Default.NavigationPane
ScrollAnimation (TiltScroll) euclid:scrollAnimationStyle Widget.Euclid.Light.ScrollAnimation
Widget.Euclid.Dark.ScrollAnimation
ZButton euclid:zbuttonStyle Widget.Euclid.Dark.ZButton
Widget.Euclid.Light.ZButton
ZCaptionedIconButton

euclid;zcaptionediconbuttonStyle

Widget.Euclid.Dark.ZCaptionedIconButton
Widget.Euclid.Light.ZCaptionedIconButton

ZCheckBox euclid:zcompoundbuttonStyle Widget.Euclid.Dark.ZCompoundButton
Widget.Euclid.Light.ZCompoundButton
ZCheckBox (in a CheckBoxPreference) android:checkBoxPreferenceStyle Widget.Euclid.Preference.CheckBoxPreference
ZContainer euclid:zcontainerStyle Widget.Euclid.Dark.ZContainer
Widget.Euclid.Light.ZContainer
ZExtrudedText euclid:zextrudedtextStyle Widget.Euclid.Dark.ZExtrudedText
Widget.Euclid.Light.ZExtrudedText
ZHeaderNavigationBar euclid:zheadernavigationbarStyle Widget.Euclid.Dark.ZHeaderNavigationBar
Widget.Euclid.Light.ZHeaderNavigationBar
ZHeaderNavigationBar – Title euclid:zheaderNavigationBarTitleStyle Widget.Euclid.Dark.ZHeaderNavigationBar.TitleStyle
Widget.Euclid.Light.ZHeaderNavigationBar.TitleStyle
ZHeaderNavigationBar – Secondary Title euclid:zheaderNavigationBarSecondaryTitleStyle Widget.Euclid.Dark.ZHeaderNavigationBar.SecondaryTitleStyle
Widget.Euclid.Light.ZHeaderNavigationBar.SecondaryTitleStyle
ZHeaderNavigationBar – Subtitle euclid:zheaderNavigationBarSubtitleStyle Widget.Euclid.Dark.ZHeaderNavigationBar.SubtitleStyle
Widget.Euclid.Light.ZHeaderNavigationBar.SubtitleStyle
ZHeaderNavigationBar – Peek Title euclid:zheaderNavigationBarPeekTitleStyle Widget.Euclid.Dark.ZHeaderNavigationBar.PeekTitleStyle
Widget.Euclid.Light.ZHeaderNavigationBar.PeekTitleStyle
ZImageButton euclid:zimagebuttonStyle Widget.Euclid.Dark.ZImageButton
Widget.Euclid.Light.ZImageButton
ZParallaxBackground euclid:zparallaxbackgroundStyle Widget.Euclid.Dark.ZParallaxBackground
Widget.Euclid.Light.ZParallaxBackground
ZProgressBar euclid:zprogressbarStyle Widget.Euclid.Dark.ZProgressBar
Widget.Euclid.Light.ZProgressBar
ZRadioButton euclid:zcompoundbuttonStyle Widget.Euclid.Dark.ZCompoundButton
Widget.Euclid.Light.ZCompoundButton
ZSeekBar euclid:zseekbarStyle Widget.Euclid.Dark.ZSeekBar
Widget.Euclid.Light.ZSeekBar
ZSwitch euclid:zswitchStyle Widget.Euclid.Dark.ZSwitch
Widget.Euclid.Light.ZSwitch
ZSwitch (in a SwitchPreference) android:switchPreferenceStyle Widget.Euclid.Preference.SwitchPreference
ZTabBar euclid:ztabbarStyle Widget.Euclid.Dark.ZBaseBarItem
Widget.Euclid.Light.ZBaseBarItem
ZToggleButton euclid:ztolgglebuttonStyle Widget.Euclid.Dark.ZToggleButton
Widget.Euclid.Light.ZToggleButton