[Beta] Android Interface Customization

Getting Started

Migrating styling will be familiar, yet different. We have opened up more options for styling and kept most of the styling parameters while removing others in order to better support a wider range of styles.

Prerequisites

What’s new?

  • We are now using Material Design’s Material Components within our SDK (designed to be used with Material Design 2, but Material 3 will also work)
  • shouldInheritAppTheme will let you decide if you want to use Apptentive’s colors or if we should inherit your app’s colors
    • Default is true, which will inherit your app’s colors
  • Every layout, text, button, widget, and most other views on the screen now have their own customization attribute associated with it
  • We have removed all hard-coded stylings from the views themselves in order to give greater freedom when overriding our styles
  • We now have an alpha attribute that allows us to give text better visual priorities without needing separate similar text colors
    • These attributes are apptentiveHeaderAlpha and apptentiveSubheaderAlpha

Coming Soon

  • Android UI Cookbook with custom UI examples with code snippets

How to override an Apptentive style

  1. Go to your styles.xml file
  2. Add an ApptentiveThemeOverride style
<style name="ApptentiveThemeOverride">
    // Override items go here
</style>

Apptentive Code Resources

Styling Information

Style / Theme Hierarchy

  1. ApptentiveThemeOverride (set only by the developer in their styles.xml file) takes priority over all other stylings
  2. Second priority, we disable the style item android:background
    1. This is a problem style for many of our Material Design widgets
    2. We use android:colorBackground (Activities) and colorSurface (Dialogs) for background colors
    3. If you do need to use android:background with our interactions, you can re-enable it with ApptentiveThemeOverride
  3. Third priority, we apply the host app’s theme if shouldInheritAppTheme is set to true 
  4. Last priority, we apply Apptentive’s theme
    1. If shouldInheritAppTheme is false and you don’t have anything set in ApptentiveThemeOverride, you will be able to see Apptentive’s default theme

See ThemeHelper.kt for more info.

Important styles we inherit

We are following Material Theme guidelines for color styling

These do not need to be set within ApptentiveThemeOverride, we will inherit them automatically

Dialog colors (Love Dialog, Notes, Rating Dialog)

  • Background uses colorSurface
  • Non-button text uses colorOnSurface
  • Button text uses colorSecondary

Survey colors

  • Toolbar (top and bottom) background uses colorPrimary
  • Toolbar (top and bottom) text uses colorOnPrimary
  • Activity main background uses android:colorBackground
  • Question Text uses colorOnBackground
  • Question Widgets use a combination of colorOnBackground and colorSecondary
  • Question Error Text uses colorError
  • Submit button uses colorPrimary
  • Submit button text uses colorOnPrimary

Apptentive Theme Default Colors

Not all colors are used directly in our stylings but may be used by parent themes

f

Item nameLight mode hex colorDark mode hex color
colorPrimary#2A3355#80B9F2
colorOnPrimary#FFFFFF#2D2D2D
colorPrimaryVariant#000a2b#2D2D2D
colorSecondary#2A3355#80B9F2
colorSecondaryVariant#1d67a2#4589CD
colorOnSecondary#FFFFFF#E1E1E1
android:colorBackground#FFFFFF#212121
colorOnBackground#2D2D2D#FFFFFF
colorSurface#FFFFFF#353535
colorOnSurface#2D2D2D#FFFFFF
android:textColorSecondary#858585#C9C9C9
colorError#B00020#FF8A9F
android:statusBarColor#2A3355#80B9F2

Interaction stylings

Screenshots are taken from a live app and have additional elements behind the dialogs, causing the borders to look irregular

Love Dialog

Apptentive default light-themed Love Dialog
Apptentive default dark-themed Love Dialog

Available Styles

Taken from apptentive-kit-android/apptentive-attrs.xml

<attr name="apptentiveLoveDialogLayoutStyle" format="color|reference" /> 
<attr name="apptentiveLoveDialogHeaderImageStyle" format="reference" /> 
<attr name="apptentiveLoveDialogTitleStyle" format="reference" /> 
<attr name="apptentiveLoveDialogTitleImageStyle" format="reference" /> 
<attr name="apptentiveLoveDialogButtonLayoutStyle" format="reference" /> 
<attr name="apptentiveLoveDialogYesButtonStyle" format="reference" /> 
<attr name="apptentiveLoveDialogNoButtonStyle" format="reference" />

Elements & Default Styling

Visual ElementOverride Value and Apptentive Default Styling
BackgroundElement: apptentiveLoveDialogLayoutStyle
_______________________________________________________________
<style name="Apptentive.Dialog.Layout">
<item name="android:background">?apptentiveDialogBackground</item> <!-- ?colorSurface -->
<item name="android:paddingStart">8dp</item>
<item name="android:paddingEnd">8dp</item>
<item name="android:paddingTop">18dp</item>
<item name="android:paddingBottom">2dp</item>
</style>
TitleElement: apptentiveLoveDialogTitleStyle
_______________________________________________________________
<style name="Apptentive.TextAppearance.Title.Dialog.TitleOrMessageOnly">
<item name="android:textSize">?apptentiveTextSizeDialogTitleOrMessageOnly</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorDialogTitleOrMessageOnly</item> <!-- ?colorOnSurface -->
<item name="android:typeface">?apptentiveTypefaceDialogTitleOrMessageOnly</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyTitle</item> <!-- ?android:fontFamily -->
<item name="android:alpha">?apptentiveSubheaderAlpha</item> <!-- 0.75 -->
<item name="android:letterSpacing">.02</item>
<item name="android:paddingStart">16dp</item>
<item name="android:paddingEnd">16dp</item>
<item name="android:minHeight">32dp</item>
<item name="android:accessibilityHeading" tools:targetApi="p">true</item>
</style>
Button LayoutElement: apptentiveLoveDialogButtonLayoutStyle
_______________________________________________________________
<style name="Apptentive.Dialog.ButtonLayout">
<item name="android:gravity">end</item>
</style>
Positive Button (YES)Element: apptentiveLoveDialogYesButtonStyle
_______________________________________________________________
<style name="Apptentive.Widget.Dialog.Button.SideBySide.Yes" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="android:textSize">?apptentiveTextSizeButtonBorderless</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorButtonBorderless</item> <!-- ?colorSecondary -->
<item name="android:typeface">?apptentiveTypefaceButtonBorderless</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyButtonBorderless</item> <!-- ?android:fontFamily -->
<item name="backgroundTint">@color/apptentive_mtrl_btn_text_btn_bg_color_selector</item>
<item name="rippleColor">@color/apptentive_mtrl_btn_ripple_color</item>
<item name="android:maxWidth">160dp</item>
</style>

backgroundTint file: apptentive_mtrl_btn_text_btn_bg_color_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.08" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_checked="true"/> <!-- ?attr/colorSecondary -->
<item android:color="@android:color/transparent" android:state_checked="false"/>
</selector>

rippleColor file: apptentive_mtrl_btn_ripple_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.12" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_pressed="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_focused="true" android:state_hovered="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_focused="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_hovered="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.00" android:color="?attr/apptentiveTextColorButtonBorderless"/> <!-- ?attr/colorSecondary -->
</selector>
Negative Button (NO)Element: apptentiveLoveDialogNoButtonStyle
_______________________________________________________________
<style name="Apptentive.Widget.Dialog.Button.SideBySide.No" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="android:textSize">?apptentiveTypefaceButtonBorderless</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorButtonBorderless</item> <!-- ?colorSecondary -->
<item name="android:typeface">?apptentiveTypefaceButtonBorderless</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyButtonBorderless</item> <!-- ?android:fontFamily -->
<item name="backgroundTint">@color/apptentive_mtrl_btn_text_btn_bg_color_selector</item>
<item name="rippleColor">@color/apptentive_mtrl_btn_ripple_color</item>
<item name="android:maxWidth">160dp</item>
<item name="android:layout_marginEnd">8dp</item>
</style>
backgroundTint file: apptentive_mtrl_btn_text_btn_bg_color_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.08" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_checked="true"/> <!-- ?attr/colorSecondary -->
<item android:color="@android:color/transparent" android:state_checked="false"/>
</selector>
rippleColor file: apptentive_mtrl_btn_ripple_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.12" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_pressed="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_focused="true" android:state_hovered="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_focused="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_hovered="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.00" android:color="?attr/apptentiveTextColorButtonBorderless"/> <!-- ?attr/colorSecondary -->
</selector>

Extra Available Stylings

Visual ElementOverride Value and Apptentive Default Styling
Header ImageElement: apptentiveLoveDialogHeaderImageStyle
_______________________________________________________________
<style name="Custom.LoveDialog.HeaderImage">
<item name="android:src">@drawable/love_dialog_header_image</item>
<item name="android:layout_weight">1dp</item>
<item name="android:adjustViewBounds">true</item>
</style>
Image before Title TextElement: apptentiveLoveDialogTitleImageStyle
_______________________________________________________________
<style name="Custom.LoveDialog.Title.Image">
<item name="android:src">@mipmap/ic_launcher</item>
<item name="android:maxWidth">40dp</item>
<item name="android:maxHeight">40dp</item>
<item name="android:minWidth">40dp</item>
<item name="android:minHeight">40dp</item>
<item name="android:adjustViewBounds">true</item>
</style>
(6.0.0-beta02)

Alternate Layout option for a Yes -> No ordering
Element: apptentiveLoveDialogButtonLayoutStyleAlternate
_______________________________________________________________
<style name="Custom.LoveDialog.ButtonLayoutAlternate">
<item name="android:background">?colorSurface</item>
</style>
(6.0.0-beta02)

Positive Button (YES) in alternate Yes -> No Orientation
Element: apptentiveLoveDialogYesButtonStyleAlternate
_______________________________________________________________
<style name="Custom.Dialog.Button.LoveDialogYes.Alternate" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textSize">14sp</item>
<item name="android:textColor">?colorSecondary</item>
<item name="android:typeface">normal</item>
<item name="android:maxWidth">160dp</item>
</style>
(6.0.0-beta02)

Negative Button (NO) in alternate Yes -> No Orientation
Element: apptentiveLoveDialogNoButtonStyleAlternate
_______________________________________________________________
<style name="Custom.Dialog.Button.LoveDialogNo.Alternate" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textSize">14sp</item>
<item name="android:textColor">?colorSecondary</item>
<item name="android:typeface">normal</item>
<item name="android:layout_marginEnd">8dp</item>
<item name="android:maxWidth">160dp</item>
</style>

Note

Apptentive default light-themed Note with title, message, and four buttons
Apptentive default light-themed Note with ONLY a title OR message, and one button
Apptentive default dark-themed Note with title, message, and four buttons
Apptentive dark-themed Note with ONLY a title OR message, and one button

Available Styles

Taken from apptentive-kit-android/apptentive-attrs.xml

<attr name="apptentiveNoteLayoutStyle" format="reference" />
<attr name="apptentiveNoteHeaderImageStyle" format="reference"/>
<attr name="apptentiveNoteTitleWithMessageTextStyle" format="reference" />
<attr name="apptentiveNoteTitleWithMessageImageStyle" format="reference" />
<attr name="apptentiveNoteTitleOrMessageOnlyTextStyle" format="reference" />
<attr name="apptentiveNoteTitleOrMessageOnlyImageStyle" format="reference" />
<attr name="apptentiveNoteMessageTextStyle" format="reference" />
<attr name="apptentiveNoteButtonLayoutStyle" format="reference" />
<attr name="apptentiveNoteButtonStyle" format="reference"/>

Elements & Default Styling

Visual ElementOverride Value and Apptentive Default Styling
BackgroundElement: apptentiveNoteLayoutStyle
_______________________________________________________________
<style name="Apptentive.Dialog.Layout">
<item name="android:background">?apptentiveDialogBackground</item> <!-- ?colorSurface -->
<item name="android:paddingStart">8dp</item>
<item name="android:paddingEnd">8dp</item>
<item name="android:paddingTop">18dp</item>
<item name="android:paddingBottom">2dp</item>
</style>
Title (with Message)Element: apptentiveNoteTitleWithMessageTextStyle
_______________________________________________________________
<style name="Apptentive.TextAppearance.Title.Dialog.WithMessage">
<item name="android:textSize">?apptentiveTextSizeDialogTitleWithMessage</item> <!-- 18sp -->
<item name="android:textColor">?apptentiveTextColorDialogTitleWithMessage</item> <!-- ?colorOnSurface -->
<item name="android:typeface">?apptentiveTypefaceDialogTitle</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyTitle</item> <!-- ?android:fontFamily -->
<item name="android:alpha">?apptentiveHeaderAlpha</item> <!-- 0.9 -->
<item name="android:paddingStart">16dp</item>
<item name="android:paddingEnd">16dp</item>
<item name="android:paddingBottom">8dp</item>
<item name="android:accessibilityHeading" tools:targetApi="p">true</item>
</style>
Title OR Message ONLYElement: apptentiveNoteTitleOrMessageOnlyTextStyle
_______________________________________________________________
<style name="Apptentive.TextAppearance.Title.Dialog.TitleOrMessageOnly">
<item name="android:textSize">?apptentiveTextSizeDialogTitleOrMessageOnly</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorDialogTitleOrMessageOnly</item> <!-- ?colorOnSurface -->
<item name="android:typeface">?apptentiveTypefaceDialogTitleOrMessageOnly</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyTitle</item> <!-- ?android:fontFamily -->
<item name="android:alpha">?apptentiveSubheaderAlpha</item> <!-- 0.75 -->
<item name="android:letterSpacing">.02</item>
<item name="android:paddingStart">16dp</item>
<item name="android:paddingEnd">16dp</item>
<item name="android:minHeight">32dp</item>
<item name="android:accessibilityHeading" tools:targetApi="p">true</item>
</style>
Message (with Title)Element: apptentiveNoteMessageTextStyle
_______________________________________________________________
<style name="Apptentive.TextAppearance.Message.Dialog" parent="Apptentive.TextAppearance">
<item name="android:textSize">?apptentiveTextSizeSubhead</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorSubhead</item> <!-- ?colorOnSurface -->
<item name="android:typeface">?apptentiveTypefaceSubhead</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilySubhead</item> <!-- ?android:fontFamily -->
<item name="android:alpha">?apptentiveSubheaderAlpha</item> <!-- 0.75 -->
<item name="android:paddingStart">16dp</item>
<item name="android:paddingEnd">16dp</item>
<item name="android:paddingBottom">8dp</item>
<item name="android:minHeight">32dp</item>
</style>
Button LayoutElement: apptentiveNoteButtonLayoutStyle
_______________________________________________________________
<style name="Apptentive.Dialog.ButtonLayout">
<item name="android:gravity">end</item>
<item name="android:orientation">vertical</item>
</style>
Buttons (all)
(except DISMISS in (6.0.0-beta02))
Element: apptentiveNoteButtonStyle
_______________________________________________________________
<style name="Apptentive.Widget.Dialog.Button.Stacked" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textSize">?apptentiveTextSizeButtonBorderless</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorButtonBorderless</item> <!-- ?colorSecondary -->
<item name="android:typeface">?apptentiveTypefaceButtonBorderless</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyButtonBorderless</item> <!-- ?android:fontFamily -->
<item name="android:textAlignment">viewEnd</item>
<item name="android:layout_gravity">end|center_vertical</item>
<item name="backgroundTint">@color/apptentive_mtrl_btn_text_btn_bg_color_selector</item>
<item name="rippleColor">@color/apptentive_mtrl_btn_ripple_color</item>
</style>
backgroundTint file: apptentive_mtrl_btn_text_btn_bg_color_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.08" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_checked="true"/> <!-- ?attr/colorSecondary -->
<item android:color="@android:color/transparent" android:state_checked="false"/>
</selector>
rippleColor file: apptentive_mtrl_btn_ripple_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.12" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_pressed="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_focused="true" android:state_hovered="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_focused="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_hovered="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.00" android:color="?attr/apptentiveTextColorButtonBorderless"/> <!-- ?attr/colorSecondary -->
</selector>
(6.0.0-beta02)

DISMISS Button (Same style as others, but opens up more customization options)
Element: apptentiveNoteDismissButtonStyle
_______________________________________________________________
<style name="Apptentive.Widget.Dialog.Button.Stacked" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textSize">?apptentiveTextSizeButtonBorderless</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorButtonBorderless</item> <!-- ?colorSecondary -->
<item name="android:typeface">?apptentiveTypefaceButtonBorderless</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyButtonBorderless</item> <!-- ?android:fontFamily -->
<item name="android:textAlignment">viewEnd</item>
<item name="android:layout_gravity">end|center_vertical</item>
<item name="backgroundTint">@color/apptentive_mtrl_btn_text_btn_bg_color_selector</item>
<item name="rippleColor">@color/apptentive_mtrl_btn_ripple_color</item>
</style>
backgroundTint file: apptentive_mtrl_btn_text_btn_bg_color_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.08" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_checked="true"/> <!-- ?attr/colorSecondary -->
<item android:color="@android:color/transparent" android:state_checked="false"/>
</selector>
rippleColor file: apptentive_mtrl_btn_ripple_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.12" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_pressed="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_focused="true" android:state_hovered="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_focused="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_hovered="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.00" android:color="?attr/apptentiveTextColorButtonBorderless"/> <!-- ?attr/colorSecondary -->
</selector>

Extra Available Stylings

Visual ElementOverride Value and Apptentive Default Styling
Header ImageElement: apptentiveNoteHeaderImageStyle
_______________________________________________________________
<style name="Custom.Note.HeaderImage">
<item name="android:src">@drawable/note_header_image</item>
<item name="android:paddingStart">-2dp</item>
<item name="android:paddingEnd">-2dp</item>
<item name="android:layout_weight">1dp</item>
<item name="android:adjustViewBounds">true</item>
</style>
Image before Title TextElement: apptentiveNoteTitleWithMessageImageStyle
_______________________________________________________________
<style name="Custom.Note.Title.Image">
<item name="android:src">@mipmap/ic_launcher</item>
<item name="android:maxWidth">40dp</item>
<item name="android:maxHeight">40dp</item>
<item name="android:minWidtht">40dp</item>
<item name="android:minHeight">40dp</item>
<item name="android:layout_gravity">center_vertical</item>
<item name="android:layout_marginStart">16dp</item>
<item name="android:layout_marginTop">8dp</item>
<item name="android:layout_marginBottom">8dp</item>
<item name="android:adjustViewBounds">true</item>
</style>
Image before Title OR Message ONLY TextElement: apptentiveNoteTitleOrMessageOnlyImageStyle
_______________________________________________________________
<style name="Custom.Note.Title.Image">
<item name="android:src">@mipmap/ic_launcher</item>
<item name="android:maxWidth">40dp</item>
<item name="android:maxHeight">40dp</item>
<item name="android:minWidtht">40dp</item>
<item name="android:minHeight">40dp</item>
<item name="android:layout_gravity">center_vertical</item>
<item name="android:layout_marginStart">16dp</item>
<item name="android:layout_marginTop">8dp</item>
<item name="android:layout_marginBottom">8dp</item>
<item name="android:adjustViewBounds">true</item>
</style>

Rating Dialog

Apptentive default light-themed Rating Dialog
Apptentive default dark-themed Rating Dialog

Available Styles

Taken from apptentive-kit-android/apptentive-attrs.xml

<attr name="apptentiveRatingDialogLayoutStyle" format="reference" />
<attr name="apptentiveRatingDialogHeaderImageStyle" format="reference" />
<attr name="apptentiveRatingDialogTitleTextStyle" format="reference" />
<attr name="apptentiveRatingDialogTitleImageStyle" format="reference" />
<attr name="apptentiveRatingDialogMessageTextStyle" format="reference" />
<attr name="apptentiveRatingDialogButtonStyle" format="reference"/>

Elements & Default Styling

Visual ElementOverride Value and Apptentive Default Styling
BackgroundElement: apptentiveRatingDialogLayoutStyle
_______________________________________________________________
<style name="Apptentive.Dialog.Layout">
<item name="android:background">?apptentiveDialogBackground</item> <!-- ?colorSurface -->
<item name="android:paddingStart">8dp</item>
<item name="android:paddingEnd">8dp</item>
<item name="android:paddingTop">18dp</item>
<item name="android:paddingBottom">2dp</item>
</style>
TitleElement: apptentiveRatingDialogTitleTextStyle
_______________________________________________________________
<style name="Apptentive.TextAppearance.Title.Dialog.WithMessage">
<item name="android:textSize">?apptentiveTextSizeDialogTitleWithMessage</item> <!-- 18sp -->
<item name="android:textColor">?apptentiveTextColorDialogTitleWithMessage</item> <!-- ?colorOnSurface -->
<item name="android:typeface">?apptentiveTypefaceDialogTitle</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyTitle</item> <!-- ?android:fontFamily -->
<item name="android:alpha">?apptentiveHeaderAlpha</item> <!-- 0.9 -->
<item name="android:paddingStart">16dp</item>
<item name="android:paddingEnd">16dp</item>
<item name="android:paddingBottom">8dp</item>
<item name="android:accessibilityHeading" tools:targetApi="p">true</item>
</style>
MessageElement: apptentiveRatingDialogMessageTextStyle
_______________________________________________________________
<style name="Apptentive.TextAppearance.Message.Dialog" parent="Apptentive.TextAppearance">
<item name="android:textSize">?apptentiveTextSizeSubhead</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorSubhead</item> <!-- ?colorOnSurface -->
<item name="android:typeface">?apptentiveTypefaceSubhead</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilySubhead</item> <!-- ?android:fontFamily -->
<item name="android:alpha">?apptentiveSubheaderAlpha</item> <!-- 0.75 -->
<item name="android:paddingStart">16dp</item>
<item name="android:paddingEnd">16dp</item>
<item name="android:paddingBottom">8dp</item>
<item name="android:minHeight">32dp</item>
</style>
Buttons (all)Element: apptentiveRatingDialogButtonStyle
_______________________________________________________________
><style name="Apptentive.Widget.Dialog.Button.Stacked.RatingDialog">
<item name="android:textSize">?apptentiveTextSizeButtonBorderless</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorButtonBorderless</item> <!-- ?colorSecondary -->
<item name="android:typeface">?apptentiveTypefaceButtonBorderless</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyButtonBorderless</item> <!-- ?android:fontFamily -->
<item name="android:textAlignment">viewEnd</item>
<item name="android:layout_marginStart">8dp</item>
<item name="android:layout_marginEnd">8dp</item>
<item name="android:textAlignment">viewEnd</item>
<item name="android:layout_gravity">end|center_vertical</item>
<item name="backgroundTint">@color/apptentive_mtrl_btn_text_btn_bg_color_selector</item>
<item name="rippleColor">@color/apptentive_mtrl_btn_ripple_color</item>
</style>
backgroundTint file: apptentive_mtrl_btn_text_btn_bg_color_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.08" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_checked="true"/> <!-- ?attr/colorSecondary -->
<item android:color="@android:color/transparent" android:state_checked="false"/>
</selector>
rippleColor file: apptentive_mtrl_btn_ripple_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.12" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_pressed="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_focused="true" android:state_hovered="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_focused="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_hovered="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.00" android:color="?attr/apptentiveTextColorButtonBorderless"/> <!-- ?attr/colorSecondary -->
</selector>

Extra Available Stylings

Visual ElementOverride Value and Apptentive Default Styling
Header ImageElement: apptentiveRatingDialogHeaderImageStyle
_______________________________________________________________
<style name="Custom.RatingDialog.HeaderImage">
<item name="android:src">@drawable/rating_dialog_header_image</item>
<item name="android:layout_weight">1dp</item>
<item name="android:adjustViewBounds">true</item>
</style>
Image before Title TextElement: apptentiveRatingDialogTitleImageStyle
_______________________________________________________________
<style name="Custom.RatingDialog.Title.Image">
<item name="android:src">@mipmap/ic_launcher</item>
<item name="android:maxWidth">40dp</item>
<item name="android:maxHeight">40dp</item>
<item name="android:minWidtht">40dp</item>
<item name="android:minHeight">40dp</item>
<item name="android:layout_gravity">center_vertical</item>
<item name="android:layout_marginStart">16dp</item>
<item name="android:layout_marginTop">8dp</item>
<item name="android:layout_marginBottom">8dp</item>
<item name="android:adjustViewBounds">true</item>
</style>

Survey

Available Styles

Taken from apptentive-kit-android/apptentive-attrs.xml

<!-- Layout -->
<attr name="apptentiveSurveyLayoutStyle" format="reference"/>

<!-- App Bars -->
<attr name="apptentiveSurveyToolbarStyle" format="reference"/>
<attr name="apptentiveSurveyBottomAppBarStyle" format="reference"/>

<!-- TextViews -->
<attr name="apptentiveSurveyTitleStyle" format="reference"/>
<attr name="apptentiveSurveyIntroductionStyle" format="reference"/>
<attr name="apptentiveSurveyQuestionTitleStyle" format="reference"/>
<attr name="apptentiveSurveyQuestionInstructionsStyle" format="reference"/>
<attr name="apptentiveSurveyQuestionErrorStyle" format="reference"/>
<attr name="apptentiveSurveyRangeLabelStyle" format="reference"/>
<attr name="apptentiveSurveySubmitErrorStyle" format="reference" />
<attr name="apptentiveSurveyFootnoteStyle" format="reference" />
<attr name="apptentiveSurveyTermsAndConditionsStyle" format="reference" />

<!-- Widgets -->
<attr name="apptentiveSurveyHeaderImageStyle" format="reference"/>
<attr name="apptentiveSurveyCheckBoxStyle" format="reference"/>
<attr name="apptentiveSurveyRadioButtonStyle" format="reference"/>
<attr name="apptentiveSurveyRangeStyle" format="reference"/>
<attr name="apptentiveSurveySingleLineLayoutStyle" format="reference"/>
<attr name="apptentiveSurveySingleLineEditTextStyle" format="reference"/>
<attr name="apptentiveSurveyOtherTextFieldLayoutStyle" format="reference"/>
<attr name="apptentiveSurveyOtherTextFieldEditTextStyle" format="reference"/>
<attr name="apptentiveSurveySubmitButtonStyle" format="reference" />
<attr name="apptentiveSurveyButtonColorDefault" format="color|reference" />

Status Bar, Toolbar, Title, and Introduction

Apptentive default light-theme toolbar, title, and introduction
Apptentive default dark-theme toolbar, title, and introduction

Elements & Default Styling

Visual ElementOverride Value and Apptentive Default Styling
ToolbarElement: apptentiveSurveyToolbarStyle
_______________________________________________________________
https://material.io/components/app-bars-top/android
<style name="Apptentive.Widget.Survey.Toolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
<item name="navigationIcon">@drawable/ic_baseline_close_24</item> <!-- https://fonts.google.com/icons?selected=Material+Symbols+Outlined:close-->
<item name="navigationContentDescription">@string/close</item> <!-- "Close" -->
</style>
TitleElement: apptentiveSurveyTitleStyle
_______________________________________________________________
<style name="Apptentive.TextAppearance.Title.Survey">
<item name="android:textColor">?apptentiveTextColorSurveyTitle</item> <!-- ?colorOnPrimary -->
<item name="android:typeface">?apptentiveTypefaceToolbar</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyToolbar</item> <!-- ?android:fontFamily -->
<item name="android:textAppearance">?textAppearanceHeadline6</item> <!-- Android style -->
<item name="android:accessibilityHeading" tools:targetApi="p">true</item>
</style>
IntroductionElement: apptentiveSurveyIntroductionStyle
_______________________________________________________________
<style name="Apptentive.TextAppearance.Introduction.Survey" parent="Apptentive.TextAppearance">
<item name="android:textSize">?apptentiveTextSizeSurveyIntroduction</item> <!-- 20sp -->
<item name="android:textColor">?apptentiveTextColorSurveyIntroduction</item> <!-- ?colorOnBackground -->
<item name="android:typeface">?apptentiveTypefaceSurveyIntroduction</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyDefault</item> <!-- ?android:fontFamily -->
<item name="android:alpha">?apptentiveHeaderAlpha</item> <!-- 0.9 -->
<item name="android:textAppearance">?textAppearanceHeadline6</item> <!-- Android style -->
<item name="android:textAlignment">center</item>
<item name="android:padding">16dp</item>
<item name="android:accessibilityHeading" tools:targetApi="p">true</item>
</style>

Extra Available Stylings

Visual ElementOverride Value and Apptentive Default Styling
Toolbar Header Image (Small)
Large Header Image can be done through the Toolbar itself (using android:background)
Element: apptentiveSurveyTitleStyle
_______________________________________________________________
<style name="Custom.Survey.HeaderImage">
<item name="android:src">@drawable/small_header_image</item>
<item name="android:maxHeight">?actionBarSize</item>
<item name="android:adjustViewBounds">true</item>
<item name="android:layout_gravity">center</item>
<item name="android:layout_margin">2dp</item>
</style>

General Question Structure (Title, Label, Error)

Apptentive default theme survey question title & label (below the title)
Apptentive default theme survey question title, label (below the title), & error text
Apptentive default dark-theme survey question title & label (below the title)
Apptentive default dark-theme survey question title, label (below the title), & error

Elements & Default Styling

Visual ElementOverride Value and Apptentive Default Styling
TitleElement: apptentiveSurveyQuestionTitleStyle
_______________________________________________________________
<style name="Apptentive.TextAppearance.Title.Survey.Question">
<item name="android:textSize">?apptentiveTextSizeSurveyQuestionTitle</item> <!-- 16sp -->
<item name="android:textColor">?apptentiveTextColorTitle</item> <!-- ?colorOnBackground or ?colorError (if error)-->
<item name="android:typeface">?apptentiveTypefaceTitle</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilySubhead</item> <!-- ?android:fontFamily -->
<item name="android:alpha">?apptentiveHeaderAlpha</item> <!-- 0.9 -->
<item name="android:textAppearance">?textAppearanceHeadline6</item> <!-- Android style -->
<item name="android:autoLink">all</item>
<item name="android:importantForAccessibility">no</item>
<item name="android:layout_marginTop">12dp</item>
<item name="android:layout_marginBottom">8dp</item>
<item name="android:layout_marginStart">16dp</item>
<item name="android:layout_marginEnd">16dp</item>
<item name="android:accessibilityHeading" tools:targetApi="p">true</item>
</style>
IntroductionElement: apptentiveSurveyQuestionInstructionsStyle
_______________________________________________________________
<style name="Apptentive.TextAppearance.Caption.Survey.Instructions">
<item name="android:textSize">?apptentiveTextSizeCaption</item> <!-- 12sp -->
<item name="android:textColor">?apptentiveTextColorSurveyQuestionInstructions</item> <!-- ?colorOnBackground or ?colorError (if error) -->
<item name="android:typeface">?apptentiveTypefaceCaption</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyCaption</item> <!-- ?android:fontFamily -->
<item name="android:alpha">?apptentiveSubheaderAlpha</item> <!-- 0.75 -->
<item name="android:textAppearance">@style/TextAppearance.MaterialComponents.Caption</item> <!-- Android style -->
<item name="android:layout_marginStart">16dp</item>
<item name="android:layout_marginEnd">16dp</item>
<item name="android:layout_marginBottom">4dp</item>
</style>
Error (only shows if there’s an issue with how the question was answered & the user tapped the Submit button)Element: apptentiveNoteMessageTextStyle
_______________________________________________________________
<style name="Apptentive.TextAppearance.Caption.Survey.Error">
<item name="android:textSize">?apptentiveTextSizeCaption</item> <!-- 12sp -->
<item name="android:textColor">?apptentiveTextColorError</item> <!-- ?colorError -->
<item name="android:typeface">?apptentiveTypefaceCaption</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyCaption</item> <!-- ?android:fontFamily -->
<item name="android:alpha">?apptentiveHeaderAlpha</item> <!-- 0.9 -->
<item name="android:textAppearance">@style/TextAppearance.MaterialComponents.Caption</item> <!-- Android style -->
<item name="android:importantForAccessibility">no</item>
<item name="android:layout_marginStart">16dp</item>
<item name="android:layout_marginEnd">16dp</item>
<item name="android:layout_marginBottom">12dp</item>
</style>

Single Select Question Type

Apptentive default light-theme Single Select question type (with other option)
Apptentive default light-theme Single Select question type (with other option) error
Apptentive default dark-theme Single Select question type (with other option)
Apptentive default dark-theme Single Select question type (with other option) error

Elements & Default Styling

Visual ElementOverride Value and Apptentive Default Styling
Radio button style (includes text)Element: apptentiveSurveyRadioButtonStyle
_______________________________________________________________
https://material.io/components/radio-buttons/android
<style name="Apptentive.Widget.Survey.RadioButton" parent="Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:textSize">?apptentiveTextSizeBody1</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorBody1</item> <!-- ?colorOnBackground -->
<item name="android:typeface">?apptentiveTypefaceBody1</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyBody1</item> <!-- ?android:fontFamily -->
<item name="android:layout_marginStart">11dp</item>
<item name="android:layout_marginEnd">11dp</item>
<item name="android:paddingStart">8dp</item>
<item name="android:paddingEnd">8dp</item>
<item name="android:minHeight">40dp</item>
<item name="buttonTint">@color/apptentive_mtrl_selection_control_button_tint</item>
</style>
buttonTint file: apptentive_mtrl_selection_control_button_tint.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Checked -->
<item android:color="?attr/colorSecondary" android:state_checked="true"/>
<!-- Unchecked -->
<item android:alpha="0.60" android:color="?attr/colorOnBackground" android:state_checked="false"/>
<!-- Disabled -->
<item android:alpha="@dimen/material_emphasis_disabled" android:color="?attr/colorOnBackground" android:state_enabled="false"/> <!-- .38 -->
</selector>
Other Option: TextInputLayout (Same styling for both Single Select and Multi Select question types)Element: apptentiveSurveyOtherTextFieldLayoutStyle
_______________________________________________________________
https://material.io/components/text-fields/android#outlined-text-field
<style name="Apptentive.Widget.Survey.OtherTextField.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:animateLayoutChanges">true</item>
<item name="errorEnabled">true</item>
<item name="errorIconDrawable">@null</item>
<item name="android:fontFamily">?apptentiveFontFamilyBody1</item> <!-- ?android:fontFamily -->
<item name="android:layout_marginStart">40dp</item>
<item name="android:layout_marginEnd">16dp</item>
<item name="boxStrokeColor">@color/apptentive_mtrl_outlined_stroke_color</item>
<item name="android:textColorHint">@color/apptentive_mtrl_text_box_text_color</item>
<item name="hintTextColor">@color/apptentive_mtrl_text_box_text_color</item>
</style>
boxStrokeColor file: apptentive_mtrl_outlined_stroke_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Focused -->
<item android:color="?attr/colorSecondary" android:state_focused="true"/>
<!-- Not Focused -->
<item android:alpha="0.40" android:color="?attr/colorOnBackground" />
<!-- Hovered -->
<item android:alpha=".90" android:color="?attr/colorOnBackground" android:state_hovered="true"/>
</selector>
android:textColorHint & hintTextColor file: apptentive_mtrl_text_box_text_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Focused -->
<item android:color="?attr/colorSecondary" android:state_focused="true"/>
<!-- Not Focused -->
<item android:alpha="0.60" android:color="?attr/colorOnBackground"/>
<!-- Disabled -->
<item android:alpha="@dimen/material_emphasis_disabled" android:color="?attr/colorOnBackground" android:state_enabled="false"/> <!-- .38 -->
</selector>
Other Option: TextInputEditText (Same styling for both Single Select and Multi-Select question types)Element: apptentiveSurveyOtherTextFieldEditTextStyle
_______________________________________________________________
<style name="Apptentive.Widget.Survey.OtherTextField.EditText" parent="Widget.AppCompat.EditText">
<item name="android:textSize">?apptentiveTextSizeBody1</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorBody1</item> <!-- ?colorOnBackground -->
<item name="android:typeface">?apptentiveTypefaceBody1</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyBody1</item> <!-- ?android:fontFamily -->
<item name="android:imeOptions">actionDone</item>
<item name="android:inputType">textMultiLine|textCapSentences</item>
<item name="android:maxLines">4</item>
<item name="android:minLines">1</item>
<item name="android:minHeight">48dp</item>
<item name="android:textCursorDrawable">@drawable/apptentive_mtrl_text_cursor</item>
</style>
android:textCursorDrawable file: apptentive_mtrl_text_cursor.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="2dp"
android:width="2dp"/>
<solid android:color="?attr/colorSecondary"/>
</shape>

Multi-Select Question Type

Apptentive default theme Multi-Select question type (with other option)
Apptentive default theme Multi-Select question type (with other option) error
Apptentive default dark-theme Multi-Select question type (with other option)
Apptentive default dark-theme Multi-Select question type (with other option) error

Elements & Default Styling

Visual ElementOverride Value and Apptentive Default Styling
Checkbox style (includes text)Element: apptentiveSurveyCheckBoxStyle
_______________________________________________________________
https://material.io/components/checkboxes/android
<style name="Apptentive.Widget.Survey.Checkbox" parent="Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:textSize">?apptentiveTextSizeBody1</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorBody1</item> <!-- ?colorOnBackground -->
<item name="android:typeface">?apptentiveTypefaceBody1</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyBody1</item> <!-- ?android:fontFamily -->
<item name="android:layout_marginStart">11dp</item>
<item name="android:layout_marginEnd">11dp</item>
<item name="android:paddingStart">8dp</item>
<item name="android:paddingEnd">8dp</item>
<item name="android:minHeight">40dp</item>
<item name="buttonTint">@color/apptentive_mtrl_selection_control_button_tint</item>
</style>
buttonTint file: apptentive_mtrl_selection_control_button_tint.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Checked -->
<item android:color="?attr/colorSecondary" android:state_checked="true"/>
<!-- Unchecked -->
<item android:alpha="0.60" android:color="?attr/colorOnBackground" android:state_checked="false"/>
<!-- Disabled -->
<item android:alpha="@dimen/material_emphasis_disabled" android:color="?attr/colorOnBackground" android:state_enabled="false"/> <!-- .38 -->
</selector>
Other Option: TextInputLayout (Same styling for both Single Select and Multi Select question types)Element: apptentiveSurveyOtherTextFieldLayoutStyle
_______________________________________________________________
https://material.io/components/text-fields/android#outlined-text-field
<style name="Apptentive.Widget.Survey.OtherTextField.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:animateLayoutChanges">true</item>
<item name="errorEnabled">true</item>
<item name="errorIconDrawable">@null</item>
<item name="android:fontFamily">?apptentiveFontFamilyBody1</item> <!-- ?android:fontFamily -->
<item name="android:layout_marginStart">40dp</item>
<item name="android:layout_marginEnd">16dp</item>
<item name="boxStrokeColor">@color/apptentive_mtrl_outlined_stroke_color</item>
<item name="android:textColorHint">@color/apptentive_mtrl_text_box_text_color</item>
<item name="hintTextColor">@color/apptentive_mtrl_text_box_text_color</item>
</style>

boxStrokeColor file: apptentive_mtrl_outlined_stroke_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Focused -->
<item android:color="?attr/colorSecondary" android:state_focused="true"/>
<!-- Not Focused -->
<item android:alpha="0.40" android:color="?attr/colorOnBackground" />
<!-- Hovered -->
<item android:alpha=".90" android:color="?attr/colorOnBackground" android:state_hovered="true"/>
</selector>
android:textColorHint & hintTextColor file: apptentive_mtrl_text_box_text_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Focused -->
<item android:color="?attr/colorSecondary" android:state_focused="true"/>
<!-- Not Focused -->
<item android:alpha="0.60" android:color="?attr/colorOnBackground"/>
<!-- Disabled -->
<item android:alpha="@dimen/material_emphasis_disabled" android:color="?attr/colorOnBackground" android:state_enabled="false"/> <!-- .38 -->
</selector>
Other Option: TextInputEditText (Same styling for both Single Select and Multi-Select question types)Element: apptentiveSurveyOtherTextFieldEditTextStyle
_______________________________________________________________
<style name="Apptentive.Widget.Survey.OtherTextField.EditText" parent="Widget.AppCompat.EditText">
<item name="android:textSize">?apptentiveTextSizeBody1</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorBody1</item> <!-- ?colorOnBackground -->
<item name="android:typeface">?apptentiveTypefaceBody1</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyBody1</item> <!-- ?android:fontFamily -->
<item name="android:imeOptions">actionDone</item>
<item name="android:inputType">textMultiLine|textCapSentences</item>
<item name="android:maxLines">4</item>
<item name="android:minLines">1</item>
<item name="android:minHeight">48dp</item>
<item name="android:textCursorDrawable">@drawable/apptentive_mtrl_text_cursor</item>
</style>
android:textCursorDrawable file: apptentive_mtrl_text_cursor.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="2dp"
android:width="2dp"/>
<solid android:color="?attr/colorSecondary"/>
</shape>

Free Form Question Types (Single-Line & Multi-Line)

Apptentive default light-theme Free Form question (single-line style)
Apptentive default light-theme Free Form question (single-line style) error
Apptentive default light-theme Free Form question (multi-line style)
Apptentive default light-theme Free Form question (multi-line style) error
Apptentive default dark-theme Free Form question (single-line style)
Apptentive default dark-theme Free Form question (multi-line style)
Apptentive default dark-theme Free Form question (single-line style) error
Apptentive default dark-theme Free Form question (multi-line style) error

Elements & Default Styling

Visual ElementOverride Value and Apptentive Default Styling
TextInputLayoutElement: apptentiveSurveySingleLineLayoutStyle
_______________________________________________________________
https://material.io/components/text-fields/android#outlined-text-field
<style name="Apptentive.Widget.Survey.SingleLine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:animateLayoutChanges">true</item>
<item name="errorEnabled">true</item>
<item name="errorIconDrawable">@null</item>
<item name="android:fontFamily">?apptentiveFontFamilyBody1</item> <!-- ?android:fontFamily -->
<item name="android:paddingStart">16dp</item>
<item name="android:paddingEnd">16dp</item>
<item name="boxStrokeColor">@color/apptentive_mtrl_outlined_stroke_color</item>
<item name="android:textColorHint">@color/apptentive_mtrl_text_box_text_color</item>
<item name="hintTextColor">@color/apptentive_mtrl_text_box_text_color</item>
</style>
boxStrokeColor file: apptentive_mtrl_outlined_stroke_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Focused -->
<item android:color="?attr/colorSecondary" android:state_focused="true"/>
<!-- Not Focused -->
<item android:alpha="0.40" android:color="?attr/colorOnBackground" />
<!-- Hovered -->
<item android:alpha=".90" android:color="?attr/colorOnBackground" android:state_hovered="true"/>
</selector>
android:textColorHint & hintTextColor file: apptentive_mtrl_text_box_text_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Focused -->
<item android:color="?attr/colorSecondary" android:state_focused="true"/>
<!-- Not Focused -->
<item android:alpha="0.60" android:color="?attr/colorOnBackground"/>
<!-- Disabled -->
<item android:alpha="@dimen/material_emphasis_disabled" android:color="?attr/colorOnBackground" android:state_enabled="false"/> <!-- .38 -->
</selector>
TextInputEditTextElement: apptentiveSurveyOtherTextFieldEditTextStyle
_______________________________________________________________
<style name="Apptentive.Widget.Survey.SingleLine.EditText" parent="Widget.AppCompat.EditText">
<item name="android:textSize">?apptentiveTextSizeBody1</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorBody1</item> <!-- ?colorOnBackground -->
<item name="android:typeface">?apptentiveTypefaceBody1</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyBody1</item> <!-- ?android:fontFamily -->
<item name="android:imeOptions">actionDone</item>
<item name="android:minHeight">48dp</item>
<item name="android:textCursorDrawable">@drawable/apptentive_mtrl_text_cursor</item>
</style>
android:textCursorDrawable file: apptentive_mtrl_text_cursor.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="2dp"
android:width="2dp"/>
<solid android:color="?attr/colorSecondary"/>
</shape>

Range Question Types (Range & NPS)

Apptentive default light-theme Range question
Apptentive default light-theme Range question error
Apptentive default light-theme NPS question
Apptentive default light-theme NPS question error
Apptentive default dark-theme Range question
Apptentive default dark-theme NPS question
Apptentive default dark-theme Range question error
Apptentive default dark-theme NPS question error

Elements & Default Styling

Visual ElementOverride Value and Apptentive Default Styling
Range WidgetElement: apptentiveSurveySingleLineLayoutStyle
_______________________________________________________________
https://material.io/components/sliders/android
<style name="Apptentive.Widget.Survey.Range" parent="Widget.MaterialComponents.Slider">
<item name="android:layout_gravity">center</item>
<item name="haloColor">@color/apptentive_mtrl_slider_halo_color</item>
<item name="thumbColor">@color/apptentive_mtrl_slider_thumb_color</item>
<item name="tickColorActive">@color/apptentive_mtrl_slider_active_tick_marks_color</item>
<item name="tickColorInactive">@color/apptentive_mtrl_slider_inactive_tick_marks_color</item>
<item name="trackColorActive">@color/apptentive_mtrl_slider_active_track_color</item>
<item name="trackColorInactive">@color/apptentive_mtrl_slider_inactive_track_color</item>
<item name="android:layout_marginStart">11dp</item>
<item name="android:layout_marginEnd">11dp</item>
</style>
haloColor file: apptentive_mtrl_slider_halo_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.24" android:color="?attr/colorSecondary" android:state_enabled="true"/>
<item android:color="?android:color/transparent" />
</selector>
thumbColor file: apptentive_mtrl_slider_thumb_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorSecondary" android:state_enabled="true"/>
<item android:alpha="0.38" android:color="?attr/colorOnBackground"/>
</selector>
tickColorActive file: tickColorActive.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.54" android:color="?attr/colorOnSecondary" android:state_enabled="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSecondary" />
</selector>
tickColorInactive file: apptentive_mtrl_slider_inactive_tick_marks_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.54" android:color="?attr/colorSecondary" android:state_enabled="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnBackground"/>
</selector>
trackColorActive file: apptentive_mtrl_slider_active_track_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorSecondary" android:state_enabled="true"/>
<item android:alpha="0.32" android:color="?attr/colorOnBackground" />
</selector>
trackColorInactive file: apptentive_mtrl_slider_inactive_track_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.24" android:color="?attr/colorSecondary" android:state_enabled="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnBackground"/>
</selector>
Range Labels (Note that the “max range caption label” has android:textAlignment="viewEnd" hard coded into it)Element: apptentiveSurveyRangeLabelStyle
_______________________________________________________________
<style name="Apptentive.TextAppearance.Caption.Survey.Instructions">
<item name="android:textSize">?apptentiveTextSizeCaption</item> <!-- 12sp -->
<item name="android:textColor">?apptentiveTextColorSurveyRangeLabel</item> <!-- ?colorOnBackground -->
<item name="android:typeface">?apptentiveTypefaceCaption</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyCaption</item> <!-- ?android:fontFamily -->
<item name="android:alpha">?apptentiveSubheaderAlpha</item> <!-- 0.75 -->
<item name="android:textAppearance">@style/TextAppearance.MaterialComponents.Caption</item> <!-- Android style -->
<item name="android:layout_weight">1</item
<item name="android:focusable">true</item>>
<item name="android:paddingTop">2dp</item>
<item name="android:paddingBottom">2dp</item>
<item name="android:paddingStart">16dp</item>
<item name="android:paddingEnd">16dp</item>
</style>

Submit Button and Bottom Bar

Apptentive default light-theme submit button and bottom bar
Apptentive default light-theme submit button and bottom bar error
Apptentive default dark-theme submit button and bottom bar
Apptentive default dark-theme submit button and bottom bar

Elements & Default Styling

Visual ElementOverride Value and Apptentive Default Styling
Submit ButtonElement: apptentiveSurveySubmitButtonStyle
_______________________________________________________________
https://material.io/components/buttons/android#contained-button
<style name="Apptentive.Widget.Survey.Button.Submit" parent="Widget.MaterialComponents.Button">
<item name="android:textSize">?apptentiveTextSizeButtonColored</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorButtonColored</item> <!-- ?colorOnPrimary -->
<item name="android:typeface">?apptentiveTypefaceButtonColored</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyButtonColored</item> <!-- ?android:fontFamily -->
<item name="android:backgroundTint">?apptentiveSurveyButtonColorDefault</item> <!-- ?colorPrimary -->
<item name="android:layout_marginTop">16dp</item>
<item name="android:layout_marginBottom">16dp</item>
</style>
Submit Error (Only shows when there is an error with at least one question & after clicking submit)Element: apptentiveSurveySubmitErrorStyle
_______________________________________________________________
<style name="Apptentive.TextAppearance.Caption.Survey.Error.Footer">
<item name="android:textSize">?apptentiveTextSizeBody1</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorError</item> <!-- ?colorError -->
<item name="android:typeface">?apptentiveTypefaceBody1</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyBody1</item> <!-- ?android:fontFamily -->
<item name="android:alpha">?apptentiveHeaderAlpha</item> <!-- 0.9 -->
<item name="android:textAlignment">center</item>
<item name="android:layout_marginStart">16dp</item>
<item name="android:layout_marginEnd">16dp</item>
<item name="android:layout_marginBottom">16dp</item>
</style>
Bottom BarElement: apptentiveSurveyBottomAppBarStyle
_______________________________________________________________
<style name="Apptentive.Widget.Survey.BottomAppBar">
<item name="android:background">?colorPrimary</item>
<item name="android:minHeight">36dp</item>
</style>

Extra Available Stylings

Visual ElementOverride Value and Apptentive Default Styling
Footnote Text

NOTE: Appears below Submit Button & Submit Error
Element: apptentiveSurveyFootnoteStyle
_______________________________________________________________
<style name="Custom.Survey.Footnote">
<item name="android:textColor">?colorOnBackground</item>
<item name="android:textSize">11sp</item>
<item name="android:gravity">center</item>
<item name="android:text">Footnote Text Here</item>
</style>
Terms and Conditions (in Bottom Bar)

NOTE: This will be set through the dashboard. Currently will not show
Element: apptentiveSurveyTermsAndConditionsStyle
_______________________________________________________________
<style name="Custom.Survey.TermsAndConditions">
<item name="android:textColor">?colorOnPrimary</item>
<item name="android:textSize">11sp</item>
<item name="android:gravity">center</item>
<item name="android:textColorLink">?colorOnPrimary</item>
</style>

Close Survey Dialog

Apptentive default light-theme close survey dialog
Apptentive default dark-theme close survey dialog

Elements & Default Styling

Visual ElementOverride Value and Apptentive Default Styling
BackgroundElement: apptentiveGenericDialogLayoutStyle
_______________________________________________________________
<style name="Apptentive.Dialog.Layout">
<item name="android:background">?apptentiveDialogBackground</item> <!-- ?colorSurface -->
<item name="android:paddingStart">8dp</item>
<item name="android:paddingEnd">8dp</item>
<item name="android:paddingTop">18dp</item>
<item name="android:paddingBottom">2dp</item>
</style>
TitleElement: apptentiveGenericDialogTitleTextStyle
_______________________________________________________________
<style name="Apptentive.TextAppearance.Title.Dialog.WithMessage">
<item name="android:textSize">?apptentiveTextSizeDialogTitleWithMessage</item> <!-- 18sp -->
<item name="android:textColor">?apptentiveTextColorDialogTitleWithMessage</item> <!-- ?colorOnSurface -->
<item name="android:typeface">?apptentiveTypefaceDialogTitle</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyTitle</item> <!-- ?android:fontFamily -->
<item name="android:alpha">?apptentiveHeaderAlpha</item> <!-- 0.9 -->
<item name="android:paddingStart">16dp</item>
<item name="android:paddingEnd">16dp</item>
<item name="android:paddingBottom">8dp</item>
<item name="android:accessibilityHeading" tools:targetApi="p">true</item>
</style>
MessageElement: apptentiveGenericDialogMessageTextStyle
_______________________________________________________________
<style name="Apptentive.TextAppearance.Message.Dialog" parent="Apptentive.TextAppearance">
<item name="android:textSize">?apptentiveTextSizeSubhead</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorSubhead</item> <!-- ?colorOnSurface -->
<item name="android:typeface">?apptentiveTypefaceSubhead</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilySubhead</item> <!-- ?android:fontFamily -->
<item name="android:alpha">?apptentiveSubheaderAlpha</item> <!-- 0.75 -->
<item name="android:paddingStart">16dp</item>
<item name="android:paddingEnd">16dp</item>
<item name="android:paddingBottom">8dp</item>
<item name="android:minHeight">32dp</item>
</style>
Button LayoutElement: apptentiveGenericDialogButtonLayoutStyle
_______________________________________________________________
<style name="Apptentive.Dialog.ButtonLayout">
<item name="android:gravity">end</item>
</style>
Positive Button (BACK TO SURVEY)Element: apptentiveGenericDialogPositiveButtonStyle
_______________________________________________________________
<style name="Apptentive.Widget.Dialog.Button.SideBySide.Yes" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="android:textSize">?apptentiveTextSizeButtonBorderless</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorButtonBorderless</item> <!-- ?colorSecondary -->
<item name="android:typeface">?apptentiveTypefaceButtonBorderless</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyButtonBorderless</item> <!-- ?android:fontFamily -->
<item name="backgroundTint">@color/apptentive_mtrl_btn_text_btn_bg_color_selector</item>
<item name="rippleColor">@color/apptentive_mtrl_btn_ripple_color</item>
<item name="android:maxWidth">160dp</item>
</style>
backgroundTint file: apptentive_mtrl_btn_text_btn_bg_color_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.08" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_checked="true"/> <!-- ?attr/colorSecondary -->
<item android:color="@android:color/transparent" android:state_checked="false"/>
</selector>
rippleColor file: apptentive_mtrl_btn_ripple_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.12" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_pressed="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_focused="true" android:state_hovered="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_focused="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_hovered="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.00" android:color="?attr/apptentiveTextColorButtonBorderless"/> <!-- ?attr/colorSecondary -->
</selector>
Negative Button (CLOSE)Element: apptentiveGenericDialogNegativeButtonStyle
_______________________________________________________________
<style name="Apptentive.Widget.Dialog.Button.SideBySide.No" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="android:textSize">?apptentiveTypefaceButtonBorderless</item> <!-- 14sp -->
<item name="android:textColor">?apptentiveTextColorButtonBorderless</item> <!-- ?colorSecondary -->
<item name="android:typeface">?apptentiveTypefaceButtonBorderless</item> <!-- normal -->
<item name="android:fontFamily">?apptentiveFontFamilyButtonBorderless</item> <!-- ?android:fontFamily -->
<item name="backgroundTint">@color/apptentive_mtrl_btn_text_btn_bg_color_selector</item>
<item name="rippleColor">@color/apptentive_mtrl_btn_ripple_color</item>
<item name="android:maxWidth">160dp</item>
<item name="android:layout_marginEnd">8dp</item>
</style>
backgroundTint file: apptentive_mtrl_btn_text_btn_bg_color_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.08" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_checked="true"/> <!-- ?attr/colorSecondary -->
<item android:color="@android:color/transparent" android:state_checked="false"/>
</selector>
rippleColor file: apptentive_mtrl_btn_ripple_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.12" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_pressed="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_focused="true" android:state_hovered="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_focused="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.20" android:color="?attr/apptentiveTextColorButtonBorderless" android:state_hovered="true"/> <!-- ?attr/colorSecondary -->
<item android:alpha="0.00" android:color="?attr/apptentiveTextColorButtonBorderless"/> <!-- ?attr/colorSecondary -->
</selector>

Extra Available Stylings

Visual ElementOverride Value and Apptentive Default Styling
Header ImageElement: apptentiveGenericDialogHeaderImageStyle
_______________________________________________________________
<style name="Custom.Dialog.HeaderImage">
<item name="android:src">@drawable/dialog_header_image</item>
<item name="android:layout_weight">1dp</item>
<item name="android:adjustViewBounds">true</item>
</style>
Image before Title TextElement: apptentiveGenericDialogHeaderImageStyle
_______________________________________________________________
<style name="Custom.Dialog.Title.Image">
<item name="android:src">@mipmap/ic_launcher</item>
<item name="android:maxWidth">40dp</item>
<item name="android:maxHeight">40dp</item>
<item name="android:minWidtht">40dp</item>
<item name="android:minHeight">40dp</item>
<item name="android:layout_gravity">center_vertical</item>
<item name="android:layout_marginStart">16dp</item>
<item name="android:layout_marginTop">8dp</item>
<item name="android:layout_marginBottom">8dp</item>
<item name="android:adjustViewBounds">true</item>
</style>
Updated on May 16, 2022

Was this article helpful?

Related Articles