1. Home
  2. Developer Guides
  3. [NEW!] Android SDK 6.0 – Native
  4. Android Interface Customization
Searching...

Android Interface Customization

Contents

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

Deprecated Styles

Since our UI was updated, not all styles were able to migrate over or they did not translate well into the new architecture with new customization options.

Most styles in 5.8.3 and prior have been deprecated and replaced with new styles in 6.0.0.

Some styles have been moved over, such as many text size, text color, and typeface styles, but the vast majority of styles have been changed.

The new styles have much better flexibility, many more options, better organization, and better naming patterns.

If you are starting fresh, the possibilities are huge. Check out the UI Cookbook for examples.

Styles used within the ApptentiveThemeOverride style will only affect Apptentive Interactions. You won’t need to worry about style items like colorPrimary affecting your app’s styles if it is placed within the ApptentiveThemeOverride style.

Good alternatives to the deprecated styles are to override the view’s style individually and set any style items you want to it.

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 Style Resources

Styling Information

Note about WCAG / ADA Accessibility Compliance

Apptentive’s Out-of-Box UI theme for Android SDK 6.0 is WCAG 2.0 AA and WCAG 2.1 compliant. Apptentive cannot guarantee compliance for customized UI themes. If you customize any UI elements in our Android SDK 6.0, please use https://webaim.org/resources/contrastchecker/ to confirm that your text colors, selector colors, and icon colors meet or exceed WCAG 2.0 AA and WCAG 2.1 minimum contrast levels.

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

Message Center colors

  • Toolbar background (MC, Profile, & Image Preview) usescolorPrimary
  • Toolbar text (MC, Profile, & Image Preview) usescolorOnPrimary
  • Activity main background usesandroid:colorBackground
  • All text (except toolbar and error text) usescolorOnBackground
  • Name and Email (MC & Profile) text box widgets borders usecolorOnBackground (Not focused) and colorSecondary (Focused)
  • Email (MC & Profile) text box widget error text and Message Compose text box widget error text usecolorError
  • Attachment and send buttons use a combination ofcolorSecondary and android:colorBackground
  • Message Compose text box widget border usescolorPrimary

Apptentive Theme Default Colors

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

Item nameLight mode hex colorDark mode hex color
colorPrimary#2A3355#40566B
colorOnPrimary#FFFFFF#E1E1E1
colorSecondary#2A3355#94A8B8
colorOnSecondary#FFFFFF#E1E1E1
android:colorBackground#FFFFFF#212121
colorOnBackground#2D2D2D#C4C4C4
colorSurface#FFFFFF#212121
colorOnSurface#2D2D2D#C4C4C4
colorError#B00020#DC9696
Out of Box Theme colors used on Apptentive Interactions

Message Center specific colors

Item nameLight mode hex colorDark mode hex color
apptentiveMessageCenterBubbleColorOutbound
(Incoming message bubble)		#EAEAEA#C4C4C4
apptentiveMessageCenterTextColorOutbound
(Incoming message text inside bubble)		#5D5D5D#4A4A4A
apptentiveMessageCenterColorDefaultAvatar
(Avatar at top of MC. Replaced by image from backend)		#5A95D4#40566B
apptentiveMessageCenterFillColorIconDocument
apptentiveMessageCenterFillColorIconDownload
(Icon colors for attachments that are not yet downloaded)		#000000#E1E1E1
apptentiveMessageCenterFillColorIconPreview
apptentiveMessageCenterFillColorIconRemove
(Icon colors for draft attachment options in bottom sheet)		#757575#E1E1E1
apptentiveMessageCenterColorBackgroundAttachment
(Background color that attachment previews are set on)		#F5F5F5#E1E1E1
Out of Box Theme colors used on Apptentive Interactions

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 

<!-- Love Dialog Styles -->
<attr name="apptentiveLoveDialogLayoutStyle" format="color|reference" />
<attr name="apptentiveLoveDialogHeaderImageStyle" format="reference" />
<attr name="apptentiveLoveDialogTitleStyle" format="reference" />
<attr name="apptentiveLoveDialogTitleImageStyle" format="reference" />

<!-- No -> Yes Ordering (default) -->
<attr name="apptentiveLoveDialogButtonLayoutStyle" format="reference" />
<attr name="apptentiveLoveDialogYesButtonStyle" format="reference" />
<attr name="apptentiveLoveDialogNoButtonStyle" format="reference" />

<!-- Yes -> No Ordering -->
<attr name="apptentiveLoveDialogButtonLayoutStyleAlternate" format="reference" />
<attr name="apptentiveLoveDialogYesButtonStyleAlternate" format="reference" />
<attr name="apptentiveLoveDialogNoButtonStyleAlternate" 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 Example 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>
Alternate Layout option for a Yes -> No orderingElement: apptentiveLoveDialogButtonLayoutStyleAlternate
_______________________________________________________________
<style name="Custom.LoveDialog.ButtonLayoutAlternate">
    <item name="android:background">?colorSurface</item>
</style>
Positive Button (YES) in alternate Yes -> No OrientationElement: 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>
Negative Button (NO) in alternate Yes -> No OrientationElement: 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"/>
<attr name="apptentiveNoteDismissButtonStyle" 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) 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>
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 Example 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

See the Apptentive Rating Dialog article for more info on how and when to use the Apptentive Rating Dialog

Available Styles

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

<attr name="apptentiveRatingDialogLayoutStyle" format="reference" />
<attr name="apptentiveRatingDialogTitleTextStyle" format="reference" />
<attr name="apptentiveRatingDialogTitleImageStyle" format="reference" />
<attr name="apptentiveRatingDialogHeaderImageStyle" format="reference" />
<attr name="apptentiveRatingDialogButtonRateStyle" format="reference"/>
<attr name="apptentiveRatingDialogButtonRemindStyle" format="reference"/>
<attr name="apptentiveRatingDialogButtonDeclineStyle" format="reference"/>
<attr name="apptentiveRatingDialogMessageTextStyle" 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>
ButtonsElement: apptentiveRatingDialogButtonStyle.
(apptentiveRatingDialogButtonRateStyle,
apptentiveRatingDialogButtonRemindStyle, and
apptentiveRatingDialogButtonDeclineStyle )
_______________________________________________________________
><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 Example 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" />

<!-- Generic Dialog Styles -->
<attr name="apptentiveGenericDialogLayoutStyle" format="reference" />
<attr name="apptentiveGenericDialogTitleTextStyle" format="reference" />
<attr name="apptentiveGenericDialogTitleImageStyle" format="reference" />
<attr name="apptentiveGenericDialogHeaderImageStyle" format="reference" />
<attr name="apptentiveGenericDialogMessageTextStyle" format="reference" />
<attr name="apptentiveGenericDialogButtonLayoutStyle" format="reference" />
<attr name="apptentiveGenericDialogPositiveButtonStyle" format="reference" />
<attr name="apptentiveGenericDialogNegativeButtonStyle" format="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 Example 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>
InstructionsElement: 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>

Extra Available Stylings

Visual ElementOverride Value and Example Styling
Survey Question LayoutElement: apptentiveSurveyQuestionLayoutStyle
_______________________________________________________________
<style name="Custom.Survey.Layout.Question">
    <item name="android:src">@drawable/card_background</item>
    <item name="android:paddingStart">24dp</item>
    <item name="android:paddingEnd">24dp</item>
</style>
Survey Question DividerElement: apptentiveSurveyQuestionDividerStyle
_______________________________________________________________
<style name="Custom.Survey.Layout.Question.Divider" parent="">
     <item name="android:layout_marginTop">32dp</item>
     <item name="android:minHeight">1dp</item>
     <item name="android:background">@drawable/custom_survey_question_divider</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.75" 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.75" 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.75" 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.75" 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.75" 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.75" 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 Example 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 (CANCEL)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 Example 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>

Message Center

Available Styles

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

<!-- Layouts -->
<attr name="apptentiveMessageCenterLayoutStyle" format="reference"/>
<attr name="apptentiveMessageCenterAttachmentPreviewLayoutStyle" format="reference"/>
<attr name="apptentiveMessageCenterProfileLayoutStyle" format="reference"/>

<!-- App Bars -->
<attr name="apptentiveMessageCenterToolbarStyle" format="reference"/>
<attr name="apptentiveMessageCenterToolbarTitleStyle" format="reference"/>
<attr name="apptentiveMessageCenterProfileToolbarStyle" format="reference"/>
<attr name="apptentiveMessageCenterProfileToolbarTitleStyle" format="reference"/>
<attr name="apptentiveActionButtonStyle" format="reference" />

<!-- Widgets -->
<attr name="apptentiveMessageCenterAttachmentImageStyle" format="reference"/>
<attr name="apptentiveMessageCenterComposerStyle" format="reference"/>
<attr name="apptentiveMessageCenterSendImageStyle" format="reference"/>
<attr name="apptentiveMessageCenterComposerViewStyle" format="reference"/>
<attr name="apptentiveMessageCenterViewSeparatorStyle" format="reference"/>
<attr name="apptentiveMessageCenterGreetingImageStyle" format="reference"/>
<attr name="apptentiveMessageCenterGreetingTitleTextStyle" format="reference" />
<attr name="apptentiveMessageCenterGreetingBodyTextStyle" format="reference"/>
<attr name="apptentiveMessageCenterSLAText" format="reference"/>
<attr name="apptentiveMessageCenterBubbleView" format="reference"/>
<attr name="apptentiveMessageCenterGroupTimeStamp" format="reference"/>
<attr name="apptentiveMessageCenterOutboundBubble" format="reference"/>
<attr name="apptentiveMessageCenterProfileSubmitButtonStyle" format="reference"/>
<attr name="apptentiveMessageCenterProfileViewStyle" format="reference"/>
<attr name="apptentiveMessageCenterInboundBubble" format="reference"/>
<attr name="apptentiveMessageCenterInboundBubbleText" format="reference"/>
<attr name="apptentiveMessageCenterInboundBubbleStatusText" format="reference"/>
<attr name="apptentiveMessageCenterInboundBubbleErrorText" format="reference"/>
<attr name="apptentiveMessageCenterOutboundBubbleText" format="reference"/>
<attr name="apptentiveMessageCenterOutboundBubbleStatusText" format="reference"/>
<attr name="apptentiveMessageCenterSingleLineLayoutStyle" format="reference"/>
<attr name="apptentiveMessageCenterSingleLineEditTextStyle" format="reference"/>
<attr name="apptentiveMessageCenterErrorStyle" format="reference"/>
<attr name="apptentiveMessageCenterComposerAttachmentsLayoutStyle" format="reference"/>
<attr name="apptentiveMessageCenterBubbleAttachmentsLayoutStyle" format="reference"/>
<attr name="apptentiveMessageCenterAttachmentItemLayoutStyle" format="reference"/>
<attr name="apptentiveMessageCenterAttachmentThumbnailStyle" format="reference"/>
<attr name="apptentiveMessageCenterAttachmentThumbnailTypeTextStyle" format="reference"/>
<attr name="apptentiveMessageCenterAttachmentThumbnailTypeIconStyle" format="reference"/>
<attr name="apptentiveMessageCenterPreviewAttachmentText" format="reference"/>
<attr name="apptentiveMessageCenterPreviewAttachmentImage" format="reference"/>
<attr name="apptentiveMessageCenterRemoveAttachmentText" format="reference"/>
<attr name="apptentiveMessageCenterRemoveAttachmentImage" format="reference"/>
<attr name="apptentiveMessageCenterAttachmentProgressIndicator" format="reference"/>
<attr name="apptentiveMessageCenterMessageListLayoutStyle" format="reference"/>

<!-- Text Color/Fill color -->
<attr name="apptentiveMessageCenterTextColorToolbarTitle" format="color|reference"/>
<attr name="apptentiveMessageCenterTextColorGreetingTitle" format="color|reference"/>
<attr name="apptentiveMessageCenterTextColorGreetingBody" format="color|reference"/>
<attr name="apptentiveMessageCenterTextColorEditBody1" format="color|reference"/>
<attr name="apptentiveMessageCenterTextColorInbound" format="color|reference"/>
<attr name="apptentiveMessageCenterTextColorOutbound" format="color|reference"/>
<attr name="apptentiveMessageCenterBubbleColorOutbound" format="color|reference"/>
<attr name="apptentiveMessageCenterBubbleColorInbound" format="color|reference"/>
<attr name="apptentiveMessageCenterTextColorSLA" format="color|reference"/>
<attr name="apptentiveMessageCenterColorError" format="color|reference"/>
<attr name="apptentiveMessageCenterTextColorGroupTimeStamp" format="color|reference"/>
<attr name="apptentiveMessageCenterColorDefaultAvatar" format="color|reference"/>
<attr name="apptentiveMessageCenterFillColorSendIconBackground" format="color|reference"/>
<attr name="apptentiveMessageCenterFillColorSendIcon" format="color|reference"/>
<attr name="apptentiveMessageCenterFillColorAttachmentIconBackground" format="color|reference"/>
<attr name="apptentiveMessageCenterFillColorAttachmentIcon" format="color|reference"/>
<attr name="apptentiveMessageCenterColorComposerOutline" format="color|reference"/>
<attr name="apptentiveMessageCenterColorSendIcon" format="color|reference"/>
<attr name="apptentiveMessageCenterFillColorBackIcon" format="color|reference"/>
<attr name="apptentiveMessageCenterFillColorIconDocument" format="color|reference"/>
<attr name="apptentiveMessageCenterStrokeColorIconDocument" format="color|reference"/>
<attr name="apptentiveMessageCenterFillColorIconDownload" format="color|reference"/>
<attr name="apptentiveMessageCenterStrokeColorIconDownload" format="color|reference"/>
<attr name="apptentiveMessageCenterFillColorIconPreview" format="color|reference"/>
<attr name="apptentiveMessageCenterFillColorIcon" format="color|reference"/>
<attr name="apptentiveMessageCenterFillColorIconRemove" format="color|reference"/>
<attr name="apptentiveMessageCenterColorBackgroundAttachment" format="color|reference"/>
<attr name="apptentiveMessageCenterInboundTextColorLink" format="color|reference"/>
<attr name="apptentiveMessageCenterGreetingTextColorLink" format="color|reference"/>
<attr name="apptentiveMessageCenterOutboundTextColorLink" format="color|reference"/>

<!-- Other -->
<attr name="apptentiveMessageCenterAttachmentThumbnailSpacing" format="dimension"/>
<attr name="apptentiveMessageCenterAttachmentThumbnailWidth" format="dimension"/>
<attr name="apptentiveMessageCenterAttachmentThumbnailHeight" format="dimension"/>
<attr name="apptentiveMessageCenterSenderNameText" format="dimension"/>

<!-- Typeface -->
<attr name="apptentiveMessageCenterTypefaceGreetingTitle" format="integer|reference"/>
<attr name="apptentiveMessageCenterTypefaceGreetingBody" format="integer|reference"/>
<attr name="apptentiveMessageCenterTypefaceBody1" format="integer|reference"/>
<attr name="apptentiveMessageCenterTypefaceButtonColored" format="integer|reference"/>

<!-- Font family -->
<attr name="apptentiveMessageCenterFontFamilyBody1" format="reference"/>

<!-- Text Size -->
<attr name="apptentiveMessageCenterTextSizeGreetingTitle" format="dimension|reference"/>
<attr name="apptentiveMessageCenterTextSizeGreetingBody" format="dimension|reference"/>
<attr name="apptentiveMessageCenterTextSizeBody1" format="dimension|reference"/>
<attr name="apptentiveMessageCenterTextSizeSLABody" format="dimension|reference"/>

Toolbar, Greeting, Name & Email

Elements & Default Styling

Visual ElementOverride Value and Apptentive Default Styling
ToolbarElement: apptentiveMessageCenterToolbarStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Toolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
    <item name="navigationIcon">@drawable/apptentive_ic_close</item>
    <item name="navigationContentDescription">@string/apptentive_close</item> <!-- Close -->
</style>
Toolbar title textElement: apptentiveMessageCenterToolbarTitleStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Text.ToolbarTitle" parent="Widget.MaterialComponents.TextView">
    <item name="android:textColor">?apptentiveMessageCenterTextColorToolbarTitle</item> <!-- ?colorOnPrimary -->
    <item name="android:textAppearance">?textAppearanceHeadline6</item>
    <item name="android:accessibilityHeading" tools:ignore="NewApi">true</item>
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceBody1</item> <!-- normal -->
</style>
Greeting Icon

This is taken from the avatar set in your dashboard.		Element: apptentiveMessageCenterGreetingImageStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Image.Greeting" parent="Widget.MaterialComponents.TextView">
    <item name="android:layout_margin">@dimen/apptentive_message_header_image_margin</item>  <!-- 16dp -->
    <item name="android:src">@drawable/apptentive_ic_placeholder_message_homescreen</item> <!-- Gets replaced -->
    <item name="layout_constraintHeight_max">@dimen/apptentive_message_header_image_max_height</item> <!-- 60dp -->
    <item name="layout_constraintWidth_max">@dimen/apptentive_message_header_image_max_width</item> <!-- 60dp -->
    <item name="layout_constraintHeight_min">@dimen/apptentive_message_header_image_min_height</item> <!-- 60dp -->
    <item name="layout_constraintWidth_min">@dimen/apptentive_message_header_image_min_width</item> <!-- 60dp -->
</style>
Greeting TitleElement: apptentiveMessageCenterGreetingTitleTextStyle
_______________________________________________________________
<style name ="Apptentive.Widget.MessageCenter.Text.Greeting.Title">
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <-- ?android:fontFamily -->
    <item name="android:textColor">?apptentiveMessageCenterTextColorGreetingTitle</item> <!-- ?colorOnBackground -->
    <item name="android:textSize">?apptentiveTextSizeMessageCenterGreetingTitle</item> <!-- 20sp -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceGreetingTitle</item> <!-- normal -->
    <item name="android:textAppearance">?textAppearanceHeadline6</item>
    <item name="android:alpha">?apptentiveHeaderAlpha</item> <!-- 0.9 -->
    <item name="android:textAlignment">center</item>
    <item name="android:accessibilityHeading" tools:ignore="NewApi">true</item>
    <item name="android:layout_margin">@dimen/apptentive_message_greeting_title</item> <!-- 16dp -->
    <item name="android:textIsSelectable">true</item>
    <item name="android:autoLink">all</item>
</style>
Greeting MessageElement: apptentiveMessageCenterGreetingBodyTextStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Text.Greeting.Body">
    <item name="android:textSize">?apptentiveTextSizeMessageCenterGreetingBody</item> <!-- 14sp -->
    <item name="android:textColor">?apptentiveMessageCenterTextColorGreetingBody</item> <!-- ?colorOnBackground -->
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceGreetingBody</item> <!-- normal -->
    <item name="android:textAppearance">?textAppearanceBodySmall</item>
    <item name="android:textColorLink">?apptentiveMessageCenterGreetingTextColorLink</item> <!-- ?colorOnBackground -->
    <item name="android:textAlignment">center</item>
    <item name="android:layout_margin">@dimen/apptentive_message_greeting_body</item> <!-- 16dp -->
    <item name="android:textIsSelectable">true</item>
    <item name="android:autoLink">all</item>
</style>
“Name” field and “Email” field

(share styles)		Elements: apptentiveMessageCenterSingleLineLayoutStyle &
apptentiveMessageCenterSingleLineEditTextStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.SingleLine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="errorEnabled">true</item>
    <item name="errorIconDrawable">@null</item>
    <item name="errorTextColor">?apptentiveMessageCenterColorError</item> <!-- ?colorError -->
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="boxStrokeColor">@color/apptentive_mtrl_outlined_stroke_color</item>
    <item name="boxStrokeErrorColor">?apptentiveMessageCenterColorError</item> <!-- ?colorError -->
    <item name="hintTextColor">@color/apptentive_mtrl_text_box_text_color</item>
    <item name="android:textColorHint">@color/apptentive_mtrl_text_box_text_color</item>
</style>

<style name="Apptentive.Widget.MessageCenter.SingleLine.EditText" parent="Widget.AppCompat.EditText">
    <item name="android:imeOptions">actionDone</item>
    <item name="android:textColor">?apptentiveMessageCenterTextColorEditBody1</item> <!-- ?colorOnBackground-->
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceBody1</item> <!-- normal -->
    <item name="android:textSize">?apptentiveTextSizeMessageCenterBody1</item> <!-- 14sp -->
    <item name="android:textCursorDrawable">@drawable/apptentive_mtrl_text_cursor</item>
    <item name="android:minHeight">@dimen/apptentive_survey_edit_text_min_height</item> <!-- 48dp -->
    <item name="android:singleLine">true</item>
    <item name="layout_goneMarginBottom">@dimen/apptentive_message_composer_gone_margin_bottom</item> <!-- 24dp -->
</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.75" android:color="?attr/colorOnBackground"/>
    <!-- Hovered -->
    <item android:alpha="0.90" android:color="?attr/colorOnBackground" android:state_hovered="true"/>
</selector>
hintTextColor & android:textColorHintfile: apptentive_mtrl_text_box_text_color.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Focused -->
    <item android:alpha="0.80" android:color="?attr/colorOnBackground" android:state_focused="true"/>
    <!-- Not Focused -->
    <item android:alpha="0.75" android:color="?attr/colorOnBackground"/>
    <!-- Disabled -->
    <item android:alpha="@dimen/material_emphasis_disabled" android:color="?attr/colorOnBackground" android:state_enabled="false"/>
</selector>

Extra Available Stylings

Visual ElementOverride Value and Example Styling
General LayoutElement: apptentiveMessageCenterLayoutStyle
_______________________________________________________________
<style name="Custom.MessageCenter.Layout">
    <item name="android:padding">30dp</item>
</style>

Elements & Default Styling

Visual ElementOverride Value and Apptentive Default Styling
Separator

(between messages and compose sections)		Element: apptentiveMessageCenterViewSeparatorStyle
_______________________________________________________________
<style name="Apptentive.Widget.Separator">
    <item name="android:background">@color/apptentive_color_outbound_text</item> <!-- #5D5D5D light & #4A4A4A dark -->
    <item name="android:alpha">@dimen/apptentive_message_separator_alpha</item> <!-- 0.5 -->
    <item name="android:layout_marginBottom">@dimen/apptentive_separator_margin_bottom</item> <!-- 24dp -->
</style>
Attachment buttonElement: apptentiveMessageCenterAttachmentImageStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Image.Button.Attachment">
    <item name="android:src">@drawable/apptentive_ic_attachment</item>
    <item name="android:layout_marginStart">@dimen/apptentive_message_composer_attachment_margin</item> <!-- 10dp -->
    <item name="android:contentDescription">@string/apptentive_add_attachment</item> <!-- Add attachment -->
    <item name="android:padding">@dimen/apptentive_message_composer_icon_padding</item> <!-- 8dp -->
    <item name="android:scaleType">center</item>
    <item name="android:background">?selectableItemBackgroundBorderless</item>
    <item name="android:clickable">true</item>
    <item name="android:focusable">true</item>
</style>
Composer EditTextElement: apptentiveMessageCenterComposerStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Composer.EditText" parent="Widget.AppCompat.EditText">
    <item name="android:imeOptions">actionGo</item>
    <item name="android:textColor">?apptentiveMessageCenterTextColorEditBody1</item> <!-- ?colorOnBackground -->
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceBody1</item> <!-- normal -->
    <item name="android:textSize">?apptentiveTextSizeMessageCenterBody1</item> <!-- 14sp -->
    <item name="android:textColorHint">@color/apptentive_mtrl_text_box_text_color</item> 
    <item name="hintTextColor">@color/apptentive_mtrl_text_box_text_color</item>
    <item name="android:paddingStart">@dimen/apptentive_message_composer_padding_start</item> <!-- 16dp -->
    <item name="android:textCursorDrawable">@drawable/apptentive_mtrl_text_cursor</item>
    <item name="android:inputType">textMultiLine|textCapSentences</item>
    <item name="android:background">@drawable/apptentive_ic_compose_edit_text_border</item>
    <item name="android:padding">@dimen/apptentive_message_composer_text_padding</item> <!-- 10dp -->
    <item name="android:layout_marginStart">@dimen/apptentive_message_composer_margin_start</item> <!-- 8dp -->
    <item name="android:layout_marginEnd">@dimen/apptentive_message_composer_margin_end</item> <!-- 8dp -->
    <item name="android:layout_marginBottom">@dimen/apptentive_message_composer_margin_bottom</item> <!-- 4dp -->
    <item name="layout_goneMarginStart">@dimen/apptentive_message_composer_padding_start</item> <!-- 16dp -->
    <item name="android:minLines">2</item>
    <item name="android:maxLines">4</item>
</style>
android:textColorHint & hintTextColor file: apptentive_mtrl_text_box_text_color.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Focused -->
    <item android:alpha="0.80" android:color="?attr/colorOnBackground" 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"/>
</selector>
android:textCursorDrawablefile: 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>
android:background file: apptentive_ic_compose_edit_text_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:color="?attr/apptentiveMessageCenterColorComposerOutline"
        android:width="1dp"/>
    <corners android:radius="20dp"/>
</shape>
Send buttonElement: apptentiveMessageCenterSendImageStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Image.Button.Send">
    <item name="android:src">@drawable/apptentive_ic_send</item>
    <item name="android:layout_marginEnd">@dimen/apptentive_message_composer_send_margin_end</item> <!-- 10dp -->
    <item name="android:contentDescription">@string/apptentive_send_message</item> <!-- Send message -->
    <item name="android:padding">@dimen/apptentive_message_composer_icon_padding</item> <!-- 8dp -->
    <item name="android:scaleType">center</item>
    <item name="android:background">?selectableItemBackgroundBorderless</item>
    <item name="android:clickable">true</item>
    <item name="android:focusable">true</item>
</style>
Composer error textElement: apptentiveMessageCenterErrorStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Composer.EditText.Error" parent="">
    <item name="android:textColor">?apptentiveMessageCenterColorError</item> <!-- ?colorError -->
    <item name="android:letterSpacing">@dimen/apptentive_message_error_text_spacing</item> <!-- 0.033 -->
    <item name="android:paddingStart">@dimen/apptentive_message_error_padding_start</item> <!-- 16dp -->
    <item name="android:textAlignment">textStart</item>
    <item name="android:accessibilityLiveRegion">polite</item>
    <item name="android:alpha">?apptentiveHeaderAlpha</item> <!-- 0.9 -->
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceBody1</item> <!-- normal -->
    <item name="android:textSize">?apptentiveTextSizeCaption</item> <!-- 12sp -->
    <item name="layout_goneMarginBottom">@dimen/apptentive_message_composer_gone_margin_bottom</item> <!-- 24dp -->
</style>

Messages (Inbound and Outbound)

Apptentive default light-theme Messages (Inbound and Outbound)
Apptentive default dark-theme Messages (Inbound and Outbound)

Elements & Default Styling

Incoming and Outgoing Message style names

* Messages sent from the dashboard to the device have “Outgoing” in their name.
This is the gray message bubble in the above screenshots.

* Messages sent from the device to the dashboard have “Incoming” in their name.
This is the blue message bubble in the above screenshots.

Visual ElementOverride Value and Apptentive Default Styling
Message layout (for both inbound & outbound)Element: apptentiveMessageCenterBubbleView
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Bubble.View">
    <item name="android:paddingBottom">@dimen/apptentive_message_bubble_view_padding_bottom</item> <!-- 16dp -->
</style>
Group timestampElement: apptentiveMessageCenterGroupTimeStamp
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Text.GroupTimestamp">
    <item name="android:alpha">@dimen/apptentive_message_group_timestamp</item> <!-- 0.8 -->
    <item name="android:textSize">?apptentiveTextSizeCaption</item> <!-- 12sp -->
    <item name="android:textColor">?apptentiveMessageCenterTextColorGroupTimeStamp</item> <!-- ?colorOnBackground -->
    <item name="android:paddingBottom">@dimen/apptentive_message_bubble_group_time_padding_bottom</item> <!-- 16dp -->
    <item name="android:paddingTop">@dimen/apptentive_message_bubble_group_time_padding_top</item> <!-- 16dp -->
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceBody1</item> <!-- normal -->
</style>
Incoming message bubble layout

(gray bubble)		Element: apptentiveMessageCenterOutboundBubble
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Bubble.Outbound">
    <item name="layout_constraintWidth_percent">@dimen/apptentive_message_bubble_width_percent</item> <!-- 0.75 -->
    <item name="android:background">@drawable/apptentive_ic_outbound_bubble</item>
    <item name="android:paddingStart">@dimen/apptentive_message_bubble_padding</item> <!-- 16dp -->
    <item name="android:paddingEnd">@dimen/apptentive_message_bubble_padding</item> <!-- 16dp -->
    <item name="android:paddingBottom">@dimen/apptentive_message_bubble_padding</item> <!-- 16dp -->
    <item name="android:paddingTop">@dimen/apptentive_message_bubble_padding_top</item> <!-- 8dp -->
    <item name="android:visibility">gone</item>
</style>

android:background file apptentive_ic_outbound_bubble.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="?attr/apptentiveMessageCenterBubbleColorOutbound" /> <!-- #EAEAEA light & #C4C4C4 dark -->
            <corners android:bottomLeftRadius="0dp" android:radius="20dp" />
        </shape>
    </item>
</layer-list>
Incoming sender name text

(gray bubble)		Element: apptentiveMessageCenterInboundBubbleText
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Text.Sender">
    <item name="android:textSize">?apptentiveTextSizeCaption</item> <!-- 12sp -->
    <item name="android:textColor">?apptentiveMessageCenterTextColorOutbound</item> <!-- #5D5D5D light & 4A4A4A dark -->
    <item name="android:paddingTop">@dimen/apptentive_message_bubble_sender_padding_top</item> <!-- 2dp -->
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceBody1</item> <!-- normal -->
</style>
Incoming message text

(gray bubble)		Element: apptentiveMessageCenterOutboundBubbleText
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Text.MessageBody.Outbound">
    <item name="android:textColor">?apptentiveMessageCenterTextColorOutbound</item> <!-- #5D5D5D light & #4A4A4A dark -->
    <item name="android:textColorLink">?apptentiveMessageCenterOutboundTextColorLink</item> <!-- #5D5D5D light & #4A4A4A dark -->
    <item name="android:textIsSelectable">true</item>
    <item name="android:autoLink">all</item>
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceBody1</item> <!-- normal -->
    <item name="android:textSize">?apptentiveTextSizeMessageCenterBody1</item> <!-- 14sp -->
    <item name="android:paddingTop">@dimen/apptentive_message_bubble_text_padding_top</item> <!-- 8dp -->
</style>
Incoming message status text

(gray bubble)		Element: apptentiveMessageCenterOutboundBubbleStatusText
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Text.Status.Outbound">
    <item name="android:textSize">?apptentiveTextSizeCaption</item> <!-- 12sp -->
    <item name="android:textColor">?apptentiveMessageCenterTextColorOutbound</item> <!-- #5D5D5D light & #4A4A4A dark -->
    <item name="android:paddingTop">@dimen/apptentive_message_bubble_status_padding_top</item> <!-- 4dp -->
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceBody1</item> <!-- normal -->
</style>
Outgoing message bubble layout

(blue bubble)		Element: apptentiveMessageCenterInboundBubble
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Bubble.Inbound">
    <item name="layout_constraintWidth_percent">@dimen/apptentive_message_bubble_width_percent</item> <!-- 0.75 -->
    <item name="android:background">@drawable/apptentive_ic_inbound_bubble</item>
    <item name="android:paddingStart">@dimen/apptentive_message_bubble_padding</item> <!-- 16dp -->
    <item name="android:paddingEnd">@dimen/apptentive_message_bubble_padding</item> <!-- 16dp -->
    <item name="android:paddingBottom">@dimen/apptentive_message_bubble_padding</item> <!-- 16dp -->
    <item name="android:paddingTop">@dimen/apptentive_message_bubble_padding_top</item> <!-- 8dp -->
</style>

android:background file apptentive_ic_inbound_bubble.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="?attr/apptentiveMessageCenterBubbleColorInbound" /> <!-- ?colorPrimary -->
            <corners android:bottomLeftRadius="0dp" android:radius="20dp" />
        </shape>
    </item>
</layer-list>
Outgoing message text

(blue bubble)		Element: apptentiveMessageCenterInboundBubbleText
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Text.MessageBody.Inbound">
    <item name="android:textColor">?apptentiveMessageCenterTextColorInbound</item> <!-- ?colorOnPrimary -->
    <item name="android:textColorLink">?apptentiveMessageCenterInboundTextColorLink</item> <!-- ?colorOnPrimary -->
    <item name="android:textColorHighlight">?apptentiveMessageCenterTextColorOutbound</item> <!-- #5D5D5D light & #4A4A4A dark (the opposite bubble's text color) -->
    <item name="android:textIsSelectable">true</item>
    <item name="android:autoLink">all</item>
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceBody1</item> <!-- normal -->
    <item name="android:textSize">?apptentiveTextSizeMessageCenterBody1</item> <!-- 14sp -->
    <item name="android:paddingTop">@dimen/apptentive_message_bubble_text_padding_top</item> <!-- 8dp -->
</style>
Outgoing message status text

(blue bubble)		Element: apptentiveMessageCenterInboundBubbleStatusText
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Text.Status">
    <item name="android:textSize">?apptentiveTextSizeCaption</item> <!-- 12sp -->
    <item name="android:textColor">?apptentiveMessageCenterTextColorInbound</item> <!-- ?colorOnPrimary -->
    <item name="android:paddingTop">@dimen/apptentive_message_bubble_status_padding_top</item> <!-- 4dp -->
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceBody1</item> <!-- normal -->
</style>
Outgoing message error text

(for blue bubble)		Element: apptentiveMessageCenterInboundBubbleErrorText
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Text.Inbound.Error">
    <item name="android:textSize">?apptentiveTextSizeSmall</item> <!-- 10sp -->
    <item name="android:textColor">?apptentiveTextColorError</item> <!-- ?colorError -->
    <item name="android:accessibilityLiveRegion">polite</item>
    <item name="android:paddingTop">@dimen/apptentive_message_bubble_error_padding_top</item> <!-- 4dp -->
    <item name="android:text">@string/apptentive_failed_to_send</item> <!-- Failed ot send. We will automatically retry later. -->
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceBody1</item> <!-- normal -->
</style>

Attachments (Composer, Inbound, and Outbound Messages)

Screenshots

See the attachments section of screenshots in the Composer & Messages (Inbound and Outbound) sections

Elements & Default Styling

Visual ElementOverride Value and Apptentive Default Styling
Compose attachments layoutElement: apptentiveMessageCenterComposerAttachmentsLayoutStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Composer.AttachmentsLayout" parent="">
    <item name="android:orientation">horizontal</item>
    <item name="android:layout_marginBottom">@dimen/apptentive_message_attachment_layout_margin_bottom</item> <!-- 24dp -->
    <item name="android:layout_marginEnd">@dimen/apptentive_message_composer_margin_end</item> <!-- 8dp -->
</style>
Message bubble attachments layoutElement: apptentiveMessageCenterBubbleAttachmentsLayoutStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Bubble.AttachmentsLayout">
    <item name="android:orientation">horizontal</item>
    <item name="android:layout_marginTop">@dimen/apptentive_message_bubble_attachment_margin_top</item> <!-- 4dp -->
</style>
Attachment itemElement: apptentiveMessageCenterAttachmentItemLayoutStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.AttachmentLayout">
    <item name="android:background">@drawable/apptentive_attachment_background</item>
</style>
android:background file: apptentive_attachment_background.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="?attr/apptentiveMessageCenterColorBackgroundAttachment" /> <!-- #F5F5F5 light & #E1E1E1 dark -->
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>
Attachment thumbnail imageElement: apptentiveMessageCenterAttachmentThumbnailStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.AttachmentThumbnail">
    <item name="android:src">@drawable/apptentive_ic_document</item>
    <item name="android:layout_margin">@dimen/apptentive_message_attachment_margin</item> <!-- 2dp -->
    <item name="android:contentDescription">@string/apptentive_attachment_thumbnail</item> <!-- Attachment thumbnail -->
</style>
Attachment download iconElement: apptentiveMessageCenterAttachmentThumbnailTypeIconStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Icon.AttachmentType" parent="">
    <item name="android:src">@drawable/apptentive_ic_download</item>
    <item name="android:visibility">gone</item>
</style>
Attachment thumbnail mime textElement: apptentiveMessageCenterAttachmentThumbnailTypeTextStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Text.AttachmentType">
    <item name="android:textColor">?apptentiveMessageCenterStrokeColorIconDownload</item> <!-- ?colorPrimary -->
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceBody1</item> <!-- normal -->
    <item name="android:textAllCaps">true</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textSize">@dimen/apptentive_message_attachment_type_text_size</item> <!-- 9dp -->
    <item name="android:layout_marginBottom">@dimen/apptentive_message_attachment_type_text_bottom_margin</item> <!-- 8dp -->
    <item name="android:paddingTop">@dimen/apptentive_message_bubble_attachment_text_padding_top</item> <!-- 0dp -->
</style>
Attachment thumbnail progress indicatorElement: apptentiveMessageCenterAttachmentProgressIndicator
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Icon.AttachmentProgress" parent="">
    <item name="android:layout_gravity">center</item>
    <item name="android:indeterminate">true</item>
    <item name="android:visibility">gone</item>
</style>
Attachment Bottom Sheet Preview Text

(displays after selecting a DRAFT attachment thumbnail)		Element: apptentiveMessageCenterPreviewAttachmentText
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Text.AttachmentBottomSheet.Preview" parent="Widget.MaterialComponents.TextView">
    <item name="android:fontFamily">?apptentiveFontFamilyMediumDefault</item> <!-- ?android:fontFamily -->
    <item name="android:background">?selectableItemBackground</item>
    <item name="android:gravity">center_vertical</item>
    <item name="android:minHeight">@dimen/apptentive_message_attachment_bottom_sheet_min_height</item> <!-- 64dp -->
    <item name="android:paddingStart">@dimen/apptentive_message_attachment_bottom_sheet_text_padding_start</item> <!-- 64dp -->
    <item name="android:paddingEnd">@dimen/apptentive_message_attachment_bottom_sheet_text_padding_end</item> <!-- 48dp -->
    <item name="android:textSize">@dimen/apptentive_message_attachment_bottom_sheet_text_size</item> <!-- 16sp -->
    <item name="android:text">@string/apptentive_preview_attachment</item> <!-- Preview Attachment -->
</style>
Attachment Bottom Sheet Preview Image

(displays after selecting a DRAFT attachment thumbnail)		Element: apptentiveMessageCenterPreviewAttachmentImage
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Image.AttachmentBottomSheet.Preview" parent="">
    <item name="android:importantForAccessibility">no</item>
    <item name="android:src">@drawable/apptentive_ic_preview</item>
</style>
Attachment Bottom Sheet Remove Text

(displays after selecting a DRAFT attachment thumbnail)		Element: apptentiveMessageCenterRemoveAttachmentText
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Text.AttachmentBottomSheet.Preview" parent="Widget.MaterialComponents.TextView">
    <item name="android:fontFamily">?apptentiveFontFamilyMediumDefault</item> <!-- ?android:fontFamily -->
    <item name="android:background">?selectableItemBackground</item>
    <item name="android:gravity">center_vertical</item>
    <item name="android:minHeight">@dimen/apptentive_message_attachment_bottom_sheet_min_height</item> <!-- 64dp -->
    <item name="android:paddingStart">@dimen/apptentive_message_attachment_bottom_sheet_text_padding_start</item> <!-- 64dp -->
    <item name="android:paddingEnd">@dimen/apptentive_message_attachment_bottom_sheet_text_padding_end</item> <!-- 48dp -->
    <item name="android:textSize">@dimen/apptentive_message_attachment_bottom_sheet_text_size</item> <!-- 16sp -->
    <item name="android:text">@string/apptentive_remove_attachment</item> <!-- Remove Attachment -->
</style>
Attachment Bottom Sheet Remove Image

(displays after selecting a DRAFT attachment thumbnail)		Element: apptentiveMessageCenterRemoveAttachmentImage
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Image.AttachmentBottomSheet.Remove" parent="">
    <item name="android:importantForAccessibility">no</item>
    <item name="android:src">@drawable/apptentive_ic_remove</item>
</style>

Profile Screen

Elements & Default Styling

Visual ElementOverride Value and Apptentive Default Styling
ToolbarElement: apptentiveMessageCenterProfileToolbarStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Profile.Toolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
    <item name="navigationIcon">@drawable/apptentive_ic_arrow_left</item>
    <item name="navigationContentDescription">@string/apptentive_back</item> <!-- Back -->
</style>
Toolbar title textElement: apptentiveMessageCenterProfileToolbarTitleStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Text.ToolbarTitle" parent="Widget.MaterialComponents.TextView">
    <item name="android:textColor">?apptentiveMessageCenterTextColorToolbarTitle</item> <!-- ?colorOnPrimary -->
    <item name="android:textAppearance">?textAppearanceHeadline6</item>
    <item name="android:accessibilityHeading" tools:ignore="NewApi">true</item>
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceBody1</item> <!-- normal -->
</style>
Name and Email layoutElement: apptentiveMessageCenterProfileViewStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.ProfileView" parent="">
    <item name="android:layout_marginStart">@dimen/apptentive_profile_view_margin</item> <!-- 16dp -->
    <item name="android:layout_marginEnd">@dimen/apptentive_profile_view_margin</item> <!-- 16dp -->
</style>
“Name” field and “Email” field

(share styles)		Elements: apptentiveMessageCenterSingleLineLayoutStyle &
apptentiveMessageCenterSingleLineEditTextStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.SingleLine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="errorEnabled">true</item>
    <item name="errorIconDrawable">@null</item>
    <item name="errorTextColor">?apptentiveMessageCenterColorError</item> <!-- ?colorError -->
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="boxStrokeColor">@color/apptentive_mtrl_outlined_stroke_color</item>
    <item name="boxStrokeErrorColor">?apptentiveMessageCenterColorError</item> <!-- ?colorError -->
    <item name="hintTextColor">@color/apptentive_mtrl_text_box_text_color</item>
    <item name="android:textColorHint">@color/apptentive_mtrl_text_box_text_color</item>
</style>

<style name="Apptentive.Widget.MessageCenter.SingleLine.EditText" parent="Widget.AppCompat.EditText">
    <item name="android:imeOptions">actionDone</item>
    <item name="android:textColor">?apptentiveMessageCenterTextColorEditBody1</item> <!-- ?colorOnBackground-->
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceBody1</item> <!-- normal -->
    <item name="android:textSize">?apptentiveTextSizeMessageCenterBody1</item> <!-- 14sp -->
    <item name="android:textCursorDrawable">@drawable/apptentive_mtrl_text_cursor</item>
    <item name="android:minHeight">@dimen/apptentive_survey_edit_text_min_height</item> <!-- 48dp -->
    <item name="android:singleLine">true</item>
    <item name="layout_goneMarginBottom">@dimen/apptentive_message_composer_gone_margin_bottom</item> <!-- 24dp -->
</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.75" android:color="?attr/colorOnBackground"/>
    <!-- Hovered -->
    <item android:alpha="0.90" android:color="?attr/colorOnBackground" android:state_hovered="true"/>
</selector>
hintTextColor & android:textColorHintfile: apptentive_mtrl_text_box_text_color.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Focused -->
    <item android:alpha="0.80" android:color="?attr/colorOnBackground" android:state_focused="true"/>
    <!-- Not Focused -->
    <item android:alpha="0.75" android:color="?attr/colorOnBackground"/>
    <!-- Disabled -->
    <item android:alpha="@dimen/material_emphasis_disabled" android:color="?attr/colorOnBackground" android:state_enabled="false"/>
</selector>
Submit buttonElement: apptentiveMessageCenterProfileSubmitButtonStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Button.Submit" parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">?apptentiveMessageCenterColorSendIcon</item> <!-- ?colorPrimary -->
    <item name="android:textColor">?apptentiveTextColorButtonColored</item> <!-- ?colorOnPrimary -->
    <item name="android:fontFamily">?apptentiveFontFamilyButtonColored</item> <!-- ?android:fontFamily -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceButtonColored</item> <!-- normal -->
    <item name="android:textSize">?apptentiveTextSizeButtonColored</item> <!-- 14sp -->
    <item name="android:layout_marginTop">@dimen/apptentive_survey_footers_vertical_padding_margin</item> <!-- 16dp -->
    <item name="android:layout_marginBottom">@dimen/apptentive_survey_footers_vertical_padding_margin</item> <!-- 16dp -->
</style>

Extra Available Stylings

Visual ElementOverride Value and Example Styling
Profile screen layoutElement: apptentiveMessageCenterProfileLayoutStyle
_______________________________________________________________
<style name="Custom.ProfileScreen.Layout">
    <item name="android:padding">30dp</item>
</style>

Attachment Image Preview Screen

Apptentive default light-theme Image Preview Screen
Apptentive default dark-theme Image Preview Screen

Elements & Default Styling

Visual ElementOverride Value and Apptentive Default Styling
ToolbarElement: apptentiveMessageCenterToolbarStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Toolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
    <item name="navigationIcon">@drawable/apptentive_ic_close</item>
    <item name="navigationContentDescription">@string/apptentive_close</item> <!-- Close -->
</style>
Toolbar title textElement: apptentiveMessageCenterToolbarTitleStyle
_______________________________________________________________
<style name="Apptentive.Widget.MessageCenter.Text.ToolbarTitle" parent="Widget.MaterialComponents.TextView">
    <item name="android:textColor">?apptentiveMessageCenterTextColorToolbarTitle</item> <!-- ?colorOnPrimary -->
    <item name="android:textAppearance">?textAppearanceHeadline6</item>
    <item name="android:accessibilityHeading" tools:ignore="NewApi">true</item>
    <item name="android:fontFamily">?apptentiveMessageCenterFontFamilyBody1</item> <!-- ?android:fontFamily -->
    <item name="android:typeface">?apptentiveMessageCenterTypefaceBody1</item> <!-- normal -->
</style>

Extra Available Stylings

Visual ElementOverride Value and Example Styling
Screen layoutElement: apptentiveMessageCenterAttachmentPreviewLayoutStyle
_______________________________________________________________
<style name="Custom.ImagePreview.Layout">
    <item name="android:padding">30dp</item>
</style>
Updated on March 15, 2023

Was this article helpful?

Yes No

Related Articles