This design is created in a generic “streaming app” style.

Overview

Helpful Links

Check out our Android UI Cookbook Overview page for more designs

Check the setting all the styles section at the bottom for all the code together for this design!

The code for all 3 cookbook designs can also be found within the example app styles file.

Note about WCAG / ADA Accessibility Compliance

Alchemer Mobile's Out-of-Box UI theme for Android SDK 6.0 is WCAG 2.0 AA and WCAG 2.1 compliant. Alchemer Mobile 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.

Notice

All interaction designs are possible starting from 6.0.0

We do not cover both Light and Dark themes within this article.

Design 1

This design is created in a generic “streaming app” style.

Alchemer Mobile Rating Dialog Alchemer Mobile Message Center

Alchemer Mobile Love Dialog Alchemer Mobile Prompt

Alchemer Mobile Survey Home Screen ( No interaction)

This design highlights custom UI configurations like:

All Interactions
- Gradient button backgrounds
- Rounded buttons
Survey
- Gradient header and footer survey background
- Alternate style text boxes with outlines
- Gradient divider between questions
Alchemer Mobile Message Center
- Message bubble color
- Gradient header
- Gradient buttons
- Attachment icon color
- Compose box border color
- Compose section separator color

Implementation

Files

This section will provide the files used within interactions as well as the styles that are shared between multiple interactions.

Button background

Used in: Love Dialog, Prompt, Survey

To give the buttons a gradient background we can use a drawable like this. Keep in mind that the radius of the button corners needs to be defined here as well. We named this one cookbook_1_button_background.xml and you’ll see it referenced within the code blocks for the shared button style.

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#201E87"
        android:endColor="#1F9DC5" />
    <corners android:radius="26dp" />
</shape>

Button Spacing

Used in: Prompts (formerly Notes), Survey (close dialog)

We can add spacing between stacked buttons by adding a drawable like this into the button layout (Linear Layout). We named this one cookbook_1_button_spacing.xml and you’ll see it referenced within the code blocks for the stacked buttons.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size
        android:width="0dp"
        android:height="10dp" />
</shape>

Survey toolbar & bottom app bar background

Used in: Survey toolbar and bottom app bar

This one is the same as the button file but has no corner radius. We named this one cookbook_1_survey_toolbar_bottom_app_bar_background.xml and you’ll see it referenced within the code blocks for the survey toolbar and bottom app bar.

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#201E87"
        android:endColor="#1F9DC5" />
</shape>

Survey question divider

Adds a 1dp gradient line between each question and the submit button. We named this one cookbook_1_survey_question_divider.xml and you’ll see it referenced within the code block for the question divider.

Used in: Survey

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="16dp"
        android:right="16dp">
        <shape android:shape="rectangle">
            <size android:height="1dp" />
            <gradient
                android:endColor="#1F9DC5"
                android:startColor="#201E87" />
        </shape>
    </item>
</layer-list>

Survey text box background

To give the text boxes an outline we can create a drawable with a stroke attribute to achieve that effect. We named this one cookbook_1_survey_text_box_background.xml and you’ll see it referenced within the code blocks for the survey’s EditText widgets.

Used in: Survey free form questions and multi and single select questions for “other” answers.

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#F2F2F2" />
    <stroke android:color="#2294D4" android:width="2dp" />
    <corners android:radius="2dp" />
</shape>

Shared Styles

Important styles

The most important thing to do is to define the main style colors and font. You can define these within your app’s theme for app-wide usage of them, or within ApptentiveThemeOverride for just Alchemer Mobile interactions usage.

We are following Material Theme guidelines for color styling

Read more about what items are used and where within the Alchemer Mobile Interface Customization article.

The mulish font is from Google Fonts

<style name="ApptentiveThemeOverride">
    <!-- All interactions -->
    <item name="apptentiveFontFamilyDefault">@font/mulish</item>
    <item name="colorSecondary">#2294D5</item>
    <item name="apptentiveHeaderAlpha">1</item>
    <item name="apptentiveSubheaderAlpha">.8</item>
    <item name="apptentiveTextSizeDefault">15sp</item>

    <!-- Dialogs -->
    <item name="colorSurface">#081728</item>
    <item name="colorOnSurface">#FFFFFF</item>

    <!-- Survey -->
    <item name="colorOnPrimary">#FFFFFF</item>
    <item name="android:colorBackground">#081728</item>
    <item name="colorOnBackground">#FFFFFF</item>
    <item name="colorError">#FF8A9F</item>

    <item name="android:statusBarColor">#081728</item>
    <item name="android:windowLightStatusBar" tools:ignore="NewApi">false</item>
</style>

Buttons

Used in: Love Dialog, Prompt, and Survey

The buttons look mostly similar between the 3 interactions, so let’s leverage that by having a common style they can all inherit.

<style name="Cookbook1.Button" parent="Widget.MaterialComponents.Button">
    <item name="android:fontFamily">@font/mulish</item>
    <item name="android:textSize">15sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">?colorOnSurface</item>
    <item name="android:layout_weight">1</item>
    <item name="backgroundTint">@null</item>
    <item name="android:background">@drawable/cookbook_1_button_background</item>
</style>

Dialog title or message only text style

Used in: Love Dialog & Prompt

The text for both Love Dialog and Prompts with a Title or Message Only (Note version not displayed) should look generally similar, so let’s share a style for both of those.

Inherit from Alchemer Mobile (Formerly Apptentive) styles to remove a lot of the boilerplate!

<style name="Cookbook1.Dialog.TitleOrMessageOnly" parent="Apptentive.TextAppearance.Title.Dialog.TitleOrMessageOnly">
    <item name="android:textSize">18sp</item>
    <item name="android:paddingTop">8dp</item>
    <item name="android:paddingBottom">20dp</item>
</style>

Dialog title and message (together)

Used in: Note, Survey (close dialog), and Alchemer Mobile Rating Dialog

We can avoid a lot of boilerplate by having the Alchemer Mobile Title.Dialog.WithMessage and the Alchemer Mobile Message style as the parents.

<style name="Cookbook1.Dialog.TitleWithMessage" parent="Apptentive.TextAppearance.Title.Dialog.WithMessage">
    <item name="android:textSize">18sp</item>
    <item name="android:textAlignment">center</item>
    <item name="android:paddingTop">8dp</item>
    <item name="android:paddingBottom">16dp</item>
</style>

<style name="Cookbook1.Dialog.Message" parent="Apptentive.TextAppearance.Message.Dialog">
    <item name="android:paddingBottom">24dp</item>
</style>

Dialog stacked button layout and borderless buttons

Used in: Prompts, Survey (close dialog), and Alchemer Mobile Rating Dialog

We’re able to reduce a lot of boilerplate for these styles by having Cookbook1.Button as their parent.

Action buttons and the dismiss button have different designs, so we’ll have two different styles, with different parents.

<style name="Cookbook1.Dialog.ButtonLayout.Stacked" parent="">
    <item name="android:gravity">center</item>
    <item name="android:paddingBottom">16dp</item>
    <item name="android:showDividers">middle</item>
    <item name="android:orientation">vertical</item>
    <item name="android:divider">@drawable/cookbook_1_button_spacing</item>
</style>

<style name="Cookbook1.Button.Stacked">
    <item name="android:minWidth">224dp</item>
</style>

<style name="Cookbook1.Dialog.Button.Stacked.Borderless" parent="Apptentive.Widget.Dialog.Button">
    <item name="android:textColor">?colorOnSurface</item>
    <item name="android:textStyle">bold</item>
    <item name="android:minWidth">224dp</item>
    <item name="android:gravity">center</item>
    <item name="cornerRadius">24dp</item>
</style>

1. The Love Dialog

Design 1 Love Dialog

The title

Uses apptentiveLoveDialogTitleStyle.

We can use the Cookbook1.Dialog.TitleOrMessageOnly that we created earlier for this.

The buttons

Uses apptentiveLoveDialogYesButtonStyle and apptentiveLoveDialogNoButtonStyle

We can leverage the Cookbook1.Button style we made and adjust it to fit our design.

When a style doesn’t have a parent parameter, it will treat the style that has the same name before the last period as its parent.

For example, Cookbook1.Button.LoveDialog will have Cookbook1.Button as its parent and will inherit its styles into its own.

<style name="Cookbook1.Button.LoveDialog">
    <item name="android:minWidth">120dp</item>
    <item name="android:layout_marginTop">16dp</item>
    <item name="android:layout_marginEnd">16dp</item>
    <item name="android:layout_marginBottom">24dp</item>
</style>

The styles

<item name="apptentiveFontFamilyDefault">@font/mulish</item>
<item name="colorSecondary">#2294D5</item>
<item name="apptentiveHeaderAlpha">1</item>
<item name="apptentiveSubheaderAlpha">.8</item>
<item name="apptentiveTextSizeDefault">15sp</item>
<item name="colorSurface">#081728</item>
<item name="colorOnSurface">#FFFFFF</item>

<item name="apptentiveLoveDialogTitleStyle">@style/Cookbook1.Dialog.TitleOrMessageOnly</item>
<item name="apptentiveLoveDialogYesButtonStyle">@style/Cookbook1.Button.LoveDialog</item>
<item name="apptentiveLoveDialogNoButtonStyle">@style/Cookbook1.Button.LoveDialog</item>

2. The Prompt (formerly Note)

Design 1 Prompt

All the styles used here will be shared with other interactions, so no additional style creations needed!

The title and message

Uses apptentiveNoteTitleWithMessageTextStyle, apptentiveNoteTitleOrMessageOnlyTextStyle, and
apptentiveNoteMessageTextStyle

We can use the Cookbook1.Dialog.TitleWithMessage,Cookbook1.Dialog.Message, and Cookbook1.Dialog.TitleOrMessageOnly styles we created earlier.

The button layout and buttons

Uses apptentiveNoteButtonLayoutStyle, apptentiveNoteButtonStyle, and
apptentiveNoteDismissButtonStyle

We can use the Cookbook1.Dialog.ButtonLayout.Stacked,Cookbook1.Button.Stacked, and Cookbook1.Button.Stacked.Borderless styles we created earlier.

The styles

<item name="apptentiveFontFamilyDefault">@font/mulish</item>
<item name="colorSecondary">#2294D5</item>
<item name="apptentiveHeaderAlpha">1</item>
<item name="apptentiveSubheaderAlpha">.8</item>
<item name="apptentiveTextSizeDefault">15sp</item>
<item name="colorSurface">#081728</item>
<item name="colorOnSurface">#FFFFFF</item>

<item name="apptentiveNoteTitleWithMessageTextStyle">@style/Cookbook1.Dialog.TitleWithMessage</item>
<item name="apptentiveNoteTitleOrMessageOnlyTextStyle">@style/Cookbook1.Dialog.TitleOrMessageOnly</item>
<item name="apptentiveNoteMessageTextStyle">@style/Cookbook1.Dialog.Message</item>
<item name="apptentiveNoteButtonLayoutStyle">@style/Cookbook1.Dialog.ButtonLayout.Stacked</item>
<item name="apptentiveNoteButtonStyle">@style/Cookbook1.Button.Stacked</item>
<item name="apptentiveNoteDismissButtonStyle">@style/Cookbook1.Button.Stacked.Borderless</item>

3. The Survey

Design 1 Survey

The toolbar and bottom app bar

Uses: apptentiveSurveyToolbarStyle and apptentiveSurveyBottomAppBarStyle.

These have similar styles and share one of the shared files we created above.

<style name="Cookbook1.Survey.Toolbar" parent="Apptentive.Widget.Survey.Toolbar">
    <item name="android:background">@drawable/cookbook_1_survey_toolbar_bottom_app_bar_background</item>
</style>

<style name="Cookbook1.Survey.BottomAppBar" parent="">
    <item name="android:background">@drawable/cookbook_1_survey_toolbar_bottom_app_bar_background</item>
    <item name="android:minHeight">44dp</item>
</style>

The question divider

Uses apptentiveSurveyQuestionDividerStyle.

<style name="Cookbook1.Survey.Layout.Question.Divider" parent="">
    <item name="android:layout_marginTop">32dp</item>
    <item name="android:minHeight">1dp</item>
    <item name="android:background">@drawable/cookbook_1_survey_question_divider</item>
</style>

The title and introduction

Uses apptentiveSurveyTitleStyle and apptentiveSurveyIntroductionStyle.

Both of these styles can leverage Apptentive.TextAppearance styles to reduce the boilerplate within them.

<style name="Cookbook1.Survey.Title" parent="Apptentive.TextAppearance.Title.Survey">
    <item name="android:textSize">19sp</item>
    <item name="android:layout_gravity">center</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="Cookbook1.Survey.Introduction" parent="Apptentive.TextAppearance.Introduction.Survey">
    <item name="android:layout_marginTop">8dp</item>
    <item name="android:textSize">19sp</item>
    <item name="android:textStyle">bold</item>
</style>

The free form question types

Uses apptentiveSurveySingleLineLayoutStyle, apptentiveSurveySingleLineEditTextStyle, apptentiveSurveyOtherTextFieldLayoutStyle, and apptentiveSurveyOtherTextFieldEditTextStyle

We’re using a different style for TextInputLayout then the default, but a similar EditText style. We’ll create the TextInputLayout with FilledBox as the parent, and then the EditText with Alchemer Mobile's SingleLine.EditText style as its parent.

We’re using a lighter hint text color than the standard text color to better distinguish between what the user enters and the hint.

<style name="Cookbook1.Survey.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="android:fontFamily">@font/mulish</item>
    <item name="android:textColorHint">#3B4A5B</item>
    <item name="hintTextColor">#3B4A5B</item>
    <item name="android:paddingStart">16dp</item>
    <item name="android:paddingEnd">16dp</item>
</style>

<style name="Cookbook1.Survey.TextInputLayout.Other">
    <item name="android:layout_marginStart">40dp</item>
</style>

<style name="Cookbook1.Survey.EditText" parent="Apptentive.Widget.Survey.SingleLine.EditText">
    <item name="android:background">@drawable/cookbook_1_survey_text_box_background</item>
    <item name="android:textColor">?android:colorBackground</item>
</style>

The submit button

Uses apptentiveSurveySubmitButtonStyle

The submit button can leverage most of Cookbook1.Button style that we created earlier. Just a few tweaks.

<style name="Cookbook1.Button.Survey">
    <item name="android:minWidth">160dp</item>
    <item name="android:layout_marginTop">8dp</item>
    <item name="android:layout_marginBottom">16dp</item>
</style>

The close dialog

Uses: apptentiveGenericDialogTitleTextStyle, apptentiveGenericDialogMessageTextStyle, apptentiveGenericDialogButtonLayoutStyle, apptentiveGenericDialogPositiveButtonStyle, and apptentiveGenericDialogNegativeButtonStyle

This dialog appears when you have answered a question or hit the submit button with errors then try to exit the survey.

We can use the Cookbook1.Dialog.TitleWithMessage, Cookbook1.Dialog.Message, Cookbook1.Dialog.ButtonLayout.Stacked, Cookbook1.Button.Stacked.Borderless, and Cookbook1.Button.Stacked styles we created earlier.

The styles

<item name="apptentiveFontFamilyDefault">@font/mulish</item>
<item name="colorSecondary">#2294D5</item>
<item name="apptentiveHeaderAlpha">1</item>
<item name="apptentiveSubheaderAlpha">.8</item>
<item name="apptentiveTextSizeDefault">15sp</item>
<item name="colorOnPrimary">#FFFFFF</item>
<item name="android:colorBackground">#081728</item>
<item name="colorOnBackground">#FFFFFF</item>
<item name="android:statusBarColor">#081728</item>
<item name="android:windowLightStatusBar" tools:ignore="NewApi">false</item>

<item name="apptentiveSurveyToolbarStyle">@style/Cookbook1.Survey.Toolbar</item>
<item name="apptentiveSurveyBottomAppBarStyle">@style/Cookbook1.Survey.BottomAppBar</item>
<item name="apptentiveSurveyQuestionDividerStyle">@style/Cookbook1.Survey.Layout.Question.Divider</item>

<item name="apptentiveSurveyTitleStyle">@style/Cookbook1.Survey.Title</item>
<item name="apptentiveSurveyIntroductionStyle">@style/Cookbook1.Survey.Introduction</item>

<item name="apptentiveSurveySingleLineLayoutStyle">@style/Cookbook1.Survey.TextInputLayout</item>
<item name="apptentiveSurveySingleLineEditTextStyle">@style/Cookbook1.Survey.EditText</item>
<item name="apptentiveSurveyOtherTextFieldLayoutStyle">@style/Cookbook1.Survey.TextInputLayout.Other</item>
<item name="apptentiveSurveyOtherTextFieldEditTextStyle">@style/Cookbook1.Survey.EditText</item>
<item name="apptentiveSurveySubmitButtonStyle">@style/Cookbook1.Button.Survey</item>

<item name="apptentiveGenericDialogTitleTextStyle">@style/Cookbook1.Dialog.TitleWithMessage</item>
<item name="apptentiveGenericDialogMessageTextStyle">@style/Cookbook1.Dialog.Message</item>
<item name="apptentiveGenericDialogButtonLayoutStyle">@style/Cookbook1.Dialog.ButtonLayout.Stacked</item>
<item name="apptentiveGenericDialogPositiveButtonStyle">@style/Cookbook1.Button.Stacked.Borderless</item>
<item name="apptentiveGenericDialogNegativeButtonStyle">@style/Cookbook1.Button.Stacked</item>

4. The Alchemer Mobile Rating Dialog

The Alchemer Mobile Rating Dialog is an interaction by Alchemer Mobile that is primarily used as a solution for alternate app stores but also can serve as an optional alternative to the Google In-App Review prompt.

The Google In-App Review is the preferred way to ask for reviews for apps in the Play Store and is enabled by default.

This is enabled by providing a store URL into customAppStoreURL within ApptentiveConfiguration.

Design 1 Alchemer Mobile Rating Dialog

The dialog layout

Uses apptentiveRatingDialogLayoutStyle.

The Alchemer Mobile Rating Dialog always has 3 buttons and doesn’t need a button layout. They will always be vertical. We just need to add some additional padding to the bottom for this design.

<style name="Cookbook1.Dialog.Layout.RatingDialog" parent="Apptentive.Dialog.Layout">
    <item name="android:paddingBottom">16dp</item>
</style>

The title and message

Uses apptentiveRatingDialogTitleTextStyle and apptentiveRatingDialogMessageTextStyle.

We can use the Cookbook1.Dialog.TitleWithMessage and Cookbook1.Dialog.Message styles we created earlier.

The buttons

Uses apptentiveRatingDialogButtonRateStyle, apptentiveRatingDialogButtonRemindStyle, and apptentiveRatingDialogButtonDeclineStyle.

We can utilize most of the Cookbook1.Button.Stacked and Cookbook1.Button.Stacked.Borderless styles.

<style name="Cookbook1.Button.Stacked.RatingDialog">
    <item name="android:layout_gravity">center</item>
    <item name="android:layout_marginBottom">8dp</item>
</style>

<style name="Cookbook1.Button.Stacked.Borderless.RatingDialog">
    <item name="android:layout_gravity">center</item>
    <item name="android:layout_marginTop">4dp</item>
</style>

The styles

<item name="apptentiveFontFamilyDefault">@font/mulish</item>
<item name="colorSecondary">#2294D5</item>
<item name="apptentiveHeaderAlpha">1</item>
<item name="apptentiveSubheaderAlpha">.8</item>
<item name="apptentiveTextSizeDefault">15sp</item>
<item name="colorSurface">#081728</item>
<item name="colorOnSurface">#FFFFFF</item>

<item name="apptentiveRatingDialogLayoutStyle">@style/Cookbook1.Dialog.Layout.RatingDialog</item>
<item name="apptentiveRatingDialogTitleTextStyle">@style/Cookbook1.Dialog.TitleWithMessage</item>
<item name="apptentiveRatingDialogMessageTextStyle">@style/Cookbook1.Dialog.Message</item>
<item name="apptentiveRatingDialogButtonRateStyle">@style/Cookbook1.Button.Stacked.RatingDialog</item>
<item name="apptentiveRatingDialogButtonRemindStyle">@style/Cookbook1.Button.Stacked.Borderless.RatingDialog</item>
<item name="apptentiveRatingDialogButtonDeclineStyle">@style/Cookbook1.Button.Stacked.Borderless.RatingDialog</item>

5. Message Center

The toolbar

Design 1 Message Center Toolbar

In order to set the background of the toolbar with the gradient color we need to create the style which uses a gradient drawable.

The toolbar:

<style name="Cookbook1.MessageCenter.Toolbar" parent="Apptentive.Widget.MessageCenter.Toolbar">
    <item name="android:background">@drawable/cookbook_1_message_center_toolbar_top_background</item>
</style>

With this style override the apptentiveMessageCenterToolbarStyle property like so:

<item name="apptentiveMessageCenterToolbarStyle">@style/Cookbook1.MessageCenter.Toolbar</item>

Message bubbles and text color

Design 1 Message Center Message Bubbles

For this simply override the color properties with the following values:

<item name="apptentiveMessageCenterBubbleColorInbound">#203683</item>
<item name="apptentiveMessageCenterBubbleColorOutbound">#FFFF</item>
<item name="apptentiveMessageCenterTextColorOutbound">#081728</item>

Attachment Icon

Design 1 Message Center Attachment Icon

The attachment icon refers to the icon which appears in the message bubble when attachments are added.

<item name="apptentiveMessageCenterColorBackgroundAttachment">#2294D4</item>
<item name="apptentiveMessageCenterAttachmentThumbnailTypeTextStyle">@style/Cookbook1.MessageCenter.Attachment.Thumbnail.Type.Text.Style</item>
<item name="apptentiveMessageCenterStrokeColorIconDocument">#FFFF</item>
<item name="apptentiveMessageCenterStrokeColorIconDownload">#FFFF</item>

Here is the Cookbook1.MessageCenter.Attachment.Thumbnail.Type.Text.Style referenced above:

<style name="Cookbook1.MessageCenter.Attachment.Thumbnail.Type.Text.Style" parent="Apptentive.Widget.MessageCenter.Text.AttachmentType">
    <item name="android:textColor">#FFFF</item>
</style>

Compose section separator

Design 1 Message Center Separator

<item name="apptentiveMessageCenterViewSeparatorStyle">@style/Cookbook1.MessageCenter.View.Separator.Style</item>

<style name="Cookbook1.MessageCenter.View.Separator.Style" parent="Apptentive.Widget.Separator">
    <item name="android:background">#2294D4</item>
</style>

Attachment and send button icons

Design 1 Message Center Attachment Button

<item name="apptentiveMessageCenterFillColorSendIcon">#FFFF</item>
<item name="apptentiveMessageCenterFillColorAttachmentIcon">#FFFF</item>
<item name="apptentiveMessageCenterFillColorAttachmentIconBackground">@drawable/cookbook_1_message_center_button_background</item>
<item name="apptentiveMessageCenterFillColorSendIconBackground">@drawable/cookbook_1_message_center_button_background</item>

The drawable for the button background:

<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:endX="28"
    android:endY="12"
    android:startX="0"
    android:startY="12"
    android:type="linear">
    <item
        android:color="#201E87"
        android:offset="0" />
    <item
        android:color="#1F9DC5"
        android:offset="1" />
</gradient>

Compose box

Design 1 Message Center Compose Box

<item name="apptentiveMessageCenterComposerStyle">@style/Cookbook1.MessageCenter.Composer.Style</item>

The style <item name=”apptentiveMessageCenterToolbarStyle”>@style/Cookbook1.MessageCenter.Toolbar</item> <item name=”apptentiveMessageCenterBubbleColorInbound”>#203683</item> <item name=”apptentiveMessageCenterBubbleColorOutbound”>#FFFF</item> <item name=”apptentiveMessageCenterTextColorOutbound”>#081728</item> <item name=”apptentiveMessageCenterColorBackgroundAttachment”>#2294D4</item> <item name=”apptentiveMessageCenterAttachmentThumbnailTypeTextStyle”>@style/Cookbook1.MessageCenter.Attachment.Thumbnail.Type.Text.Style</item> <item name=”apptentiveMessageCenterStrokeColorIconDocument”>#FFFF</item> <item name=”apptentiveMessageCenterStrokeColorIconDownload”>#FFFF</item> <item name=”apptentiveMessageCenterViewSeparatorStyle”>@style/Cookbook1.MessageCenter.View.Separator.Style</item> <item name=”apptentiveMessageCenterFillColorSendIcon”>#FFFF</item> <item name=”apptentiveMessageCenterFillColorAttachmentIcon”>#FFFF</item> <item name=”apptentiveMessageCenterFillColorAttachmentIconBackground”>@drawable/cookbook_1_message_center_button_background</item> <item name=”apptentiveMessageCenterFillColorSendIconBackground”>@drawable/cookbook_1_message_center_button_background</item> <item name=”apptentiveMessageCenterComposerStyle”>@style/Cookbook1.MessageCenter.Composer.Style</item>

6. Setting all the styles

The last thing is defining what styles will apply to what interaction. The best place to do this is within the ApptentiveThemeOverride style within your styles.xml file.

All the styles

<!-- General -->
<style name="Cookbook1.Button" parent="Widget.MaterialComponents.Button">
    <item name="android:fontFamily">@font/mulish</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">?colorOnSurface</item>
    <item name="android:layout_weight">1</item>
    <item name="backgroundTint">@null</item>
    <item name="android:background">@drawable/cookbook_1_button_background</item>
</style>

<!-- Dialogs -->
<style name="Cookbook1.Dialog.TitleOrMessageOnly" parent="Apptentive.TextAppearance.Title.Dialog.TitleOrMessageOnly">
    <item name="android:textSize">18sp</item>
    <item name="android:paddingTop">8dp</item>
    <item name="android:paddingBottom">20dp</item>
</style>

<style name="Cookbook1.Dialog.TitleWithMessage" parent="Apptentive.TextAppearance.Title.Dialog.WithMessage">
    <item name="android:textSize">18sp</item>
    <item name="android:textAlignment">center</item>
    <item name="android:paddingTop">8dp</item>
    <item name="android:paddingBottom">16dp</item>
</style>

<style name="Cookbook1.Dialog.Message" parent="Apptentive.TextAppearance.Message.Dialog">
    <item name="android:paddingBottom">24dp</item>
</style>

<style name="Cookbook1.Dialog.ButtonLayout.Stacked" parent="">
    <item name="android:gravity">center</item>
    <item name="android:paddingBottom">16dp</item>
    <item name="android:showDividers">middle</item>
    <item name="android:orientation">vertical</item>
    <item name="android:divider">@drawable/cookbook_1_button_spacing</item>
</style>

<style name="Cookbook1.Button.Stacked">
    <item name="android:minWidth">224dp</item>
</style>

<style name="Cookbook1.Button.Stacked.Borderless" parent="Apptentive.Widget.Dialog.Button">
    <item name="android:textColor">?colorOnSurface</item>
    <item name="android:textStyle">bold</item>
    <item name="android:minWidth">224dp</item>
    <item name="android:gravity">center</item>
    <item name="cornerRadius">24dp</item>
</style>

<!-- Love Dialog -->
<style name="Cookbook1.Button.LoveDialog">
    <item name="android:minWidth">120dp</item>
    <item name="android:layout_marginStart">16dp</item>
    <item name="android:layout_marginEnd">16dp</item>
    <item name="android:layout_marginBottom">24dp</item>
</style>

<!-- Survey -->
<style name="Cookbook1.Survey.Toolbar" parent="Apptentive.Widget.Survey.Toolbar">
    <item name="android:background">@drawable/cookbook_1_survey_toolbar_bottom_app_bar_background</item>
</style>

<style name="Cookbook1.Survey.BottomAppBar" parent="">
    <item name="android:background">@drawable/cookbook_1_survey_toolbar_bottom_app_bar_background</item>
    <item name="android:minHeight">44dp</item>
</style>

<style name="Cookbook1.Survey.Layout.Question.Divider" parent="">
    <item name="android:layout_marginTop">32dp</item>
    <item name="android:minHeight">1dp</item>
    <item name="android:background">@drawable/cookbook_1_survey_question_divider</item>
</style>

<style name="Cookbook1.Survey.Title" parent="Apptentive.TextAppearance.Title.Survey">
    <item name="android:textSize">19sp</item>
    <item name="android:layout_gravity">center</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="Cookbook1.Survey.Introduction" parent="Apptentive.TextAppearance.Introduction.Survey">
    <item name="android:layout_marginTop">8dp</item>
    <item name="android:textSize">19sp</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="Cookbook1.Survey.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="android:fontFamily">@font/mulish</item>
    <item name="android:textColorHint">#3B4A5B</item>
    <item name="hintTextColor">#3B4A5B</item>
    <item name="android:paddingStart">16dp</item>
    <item name="android:paddingEnd">16dp</item>
</style>

<style name="Cookbook1.Survey.TextInputLayout.Other">
    <item name="android:layout_marginStart">40dp</item>
</style>

<style name="Cookbook1.Survey.EditText" parent="Apptentive.Widget.Survey.SingleLine.EditText">
    <item name="android:background">@drawable/cookbook_1_survey_text_box_background</item>
    <item name="android:textColor">?android:colorBackground</item>
</style>

<style name="Cookbook1.Button.Survey">
    <item name="android:minWidth">160dp</item>
    <item name="android:layout_marginTop">24dp</item>
    <item name="android:layout_marginBottom">16dp</item>
</style>

<!-- Rating Dialog -->
<style name="Cookbook1.Dialog.Layout.RatingDialog" parent="Apptentive.Dialog.Layout">
    <item name="android:paddingBottom">16dp</item>
</style>

<style name="Cookbook1.Button.Stacked.RatingDialog">
    <item name="android:layout_gravity">center</item>
    <item name="android:layout_marginBottom">8dp</item>
</style>

<style name="Cookbook1.Button.Stacked.Borderless.RatingDialog">
    <item name="android:layout_gravity">center</item>
    <item name="android:layout_marginTop">4dp</item>
</style>

<!-- Message Center -->

<style name="Cookbook1.MessageCenter.Toolbar" parent="Apptentive.Widget.MessageCenter.Toolbar">
    <item name="android:background">@drawable/cookbook_1_message_center_toolbar_top_background</item>
</style>

<style name="Cookbook1.MessageCenter.Attachment.Thumbnail.Type.Text.Style" parent="Apptentive.Widget.MessageCenter.Text.AttachmentType">
    <item name="android:textColor">#FFFF</item>
</style>

<style name="Cookbook1.MessageCenter.View.Separator.Style" parent="Apptentive.Widget.Separator">
    <item name="android:background">#2294D4</item>
</style>

<style name="Cookbook1.MessageCenter.Composer.Style" parent="Apptentive.Widget.MessageCenter.Composer.EditText">
    <item name="android:background">@drawable/cookbook_1_message_center_compose_background</item>
    <item name="android:textColorHint">#767676</item>
    <item name="android:textColor">#081728</item>
</style>

Setting the styles

<!-- Cookbook 1 -->
<style name="ApptentiveThemeOverride">
    <!-- All Interactions -->
    <item name="apptentiveFontFamilyDefault">@font/mulish</item>
    <item name="colorSecondary">#2294D5</item>
    <item name="apptentiveHeaderAlpha">1</item>
    <item name="apptentiveSubheaderAlpha">.8</item>
    <item name="apptentiveTextSizeDefault">15sp</item>

    <!-- Dialogs -->
    <item name="colorSurface">#081728</item>
    <item name="colorOnSurface">#FFFFFF</item>

    <!-- Love Dialog -->
    <item name="apptentiveLoveDialogTitleStyle">@style/Cookbook1.Dialog.TitleOrMessageOnly</item>
    <item name="apptentiveLoveDialogYesButtonStyle">@style/Cookbook1.Button.LoveDialog</item>
    <item name="apptentiveLoveDialogNoButtonStyle">@style/Cookbook1.Button.LoveDialog</item>

    <!-- Note Dialog -->
    <item name="apptentiveNoteTitleWithMessageTextStyle">@style/Cookbook1.Dialog.TitleWithMessage</item>
    <item name="apptentiveNoteTitleOrMessageOnlyTextStyle">@style/Cookbook1.Dialog.TitleOrMessageOnly</item>
    <item name="apptentiveNoteMessageTextStyle">@style/Cookbook1.Dialog.Message</item>
    <item name="apptentiveNoteButtonLayoutStyle">@style/Cookbook1.Dialog.ButtonLayout.Stacked</item>
    <item name="apptentiveNoteButtonStyle">@style/Cookbook1.Button.Stacked</item>
    <item name="apptentiveNoteDismissButtonStyle">@style/Cookbook1.Button.Stacked.Borderless</item>

    <!-- Survey -->
    <item name="colorOnPrimary">#FFFFFF</item>
    <item name="android:colorBackground">#081728</item>
    <item name="colorOnBackground">#FFFFFF</item>
    <item name="colorError">#FF8A9F</item>

    <item name="android:statusBarColor">#081728</item>
    <item name="android:windowLightStatusBar" tools:ignore="NewApi">false</item>

    <item name="apptentiveSurveyToolbarStyle">@style/Cookbook1.Survey.Toolbar</item>
    <item name="apptentiveSurveyBottomAppBarStyle">@style/Cookbook1.Survey.BottomAppBar</item>
    <item name="apptentiveSurveyQuestionDividerStyle">@style/Cookbook1.Survey.Layout.Question.Divider</item>

    <item name="apptentiveSurveyTitleStyle">@style/Cookbook1.Survey.Title</item>
    <item name="apptentiveSurveyIntroductionStyle">@style/Cookbook1.Survey.Introduction</item>

    <item name="apptentiveSurveySingleLineLayoutStyle">@style/Cookbook1.Survey.TextInputLayout</item>
    <item name="apptentiveSurveySingleLineEditTextStyle">@style/Cookbook1.Survey.EditText</item>
    <item name="apptentiveSurveyOtherTextFieldLayoutStyle">@style/Cookbook1.Survey.TextInputLayout.Other</item>
    <item name="apptentiveSurveyOtherTextFieldEditTextStyle">@style/Cookbook1.Survey.EditText</item>
    <item name="apptentiveSurveySubmitButtonStyle">@style/Cookbook1.Button.Survey</item>

    <item name="apptentiveGenericDialogTitleTextStyle">@style/Cookbook1.Dialog.TitleWithMessage</item>
    <item name="apptentiveGenericDialogMessageTextStyle">@style/Cookbook1.Dialog.Message</item>
    <item name="apptentiveGenericDialogButtonLayoutStyle">@style/Cookbook1.Dialog.ButtonLayout.Stacked</item>
    <item name="apptentiveGenericDialogPositiveButtonStyle">@style/Cookbook1.Button.Stacked.Borderless</item>
    <item name="apptentiveGenericDialogNegativeButtonStyle">@style/Cookbook1.Button.Stacked</item>

    <!-- Apptentive Rating Dialog -->
    <item name="apptentiveRatingDialogLayoutStyle">@style/Cookbook1.Dialog.Layout.RatingDialog</item>
    <item name="apptentiveRatingDialogTitleTextStyle">@style/Cookbook1.Dialog.TitleWithMessage</item>
    <item name="apptentiveRatingDialogMessageTextStyle">@style/Cookbook1.Dialog.Message</item>
    <item name="apptentiveRatingDialogButtonRateStyle">@style/Cookbook1.Button.Stacked.RatingDialog</item>
    <item name="apptentiveRatingDialogButtonRemindStyle">@style/Cookbook1.Button.Stacked.Borderless.RatingDialog</item>
    <item name="apptentiveRatingDialogButtonDeclineStyle">@style/Cookbook1.Button.Stacked.Borderless.RatingDialog</item>

   <!-- MessageCenter -->
   <item name="apptentiveMessageCenterToolbarStyle">@style/Cookbook1.MessageCenter.Toolbar</item>
   <item name="apptentiveMessageCenterBubbleColorInbound">#203683</item>
   <item name="apptentiveMessageCenterBubbleColorOutbound">#FFFF</item>
   <item name="apptentiveMessageCenterTextColorOutbound">#081728</item>
   <item name="apptentiveMessageCenterColorBackgroundAttachment">#2294D4</item>
   <item name="apptentiveMessageCenterAttachmentThumbnailTypeTextStyle">@style/Cookbook1.MessageCenter.Attachment.Thumbnail.Type.Text.Style</item>
   <item name="apptentiveMessageCenterStrokeColorIconDocument">#FFFF</item>
   <item name="apptentiveMessageCenterStrokeColorIconDownload">#FFFF</item>
   <item name="apptentiveMessageCenterViewSeparatorStyle">@style/Cookbook1.MessageCenter.View.Separator.Style</item>
   <item name="apptentiveMessageCenterFillColorSendIcon">#FFFF</item>
   <item name="apptentiveMessageCenterFillColorAttachmentIcon">#FFFF</item>
   <item name="apptentiveMessageCenterFillColorAttachmentIconBackground">@drawable/cookbook_1_message_center_button_background</item>
   <item name="apptentiveMessageCenterFillColorSendIconBackground">@drawable/cookbook_1_message_center_button_background</item>
   <item name="apptentiveMessageCenterComposerStyle">@style/Cookbook1.MessageCenter.Composer.Style</item>
  </style>

Filter: Basic Standard Market Research HR Professional Full Access Reporting
Free Individual Team & Enterprise


Feature	Included In

Android UI Cookbook Design 1

The title

The buttons

The styles

2. The Prompt (formerly Note)

The title and message

The button layout and buttons

The styles

3. The Survey

The toolbar and bottom app bar

The question divider

The title and introduction

The free form question types

The submit button

The close dialog

The styles

4. The Alchemer Mobile Rating Dialog

The dialog layout

The title and message

The buttons

The styles

5. Message Center

The toolbar

The toolbar:

Message bubbles and text color

Attachment Icon

Compose section separator

Attachment and send button icons

Compose box

6. Setting all the styles

All the styles

Setting the styles