Android UI Cookbook Design 1

Contents

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

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.

Notice

All interaction designs are possible starting from 6.0.0

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

The images below show:

Home screen (no Apptentive interactions)
Apptentive Love Dialog
Apptentive Note
Apptentive Survey
Apptentive Rating Dialog

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

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, Note, 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: 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>

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

Used in: Survey

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.

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

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

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.

<?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 Apptentive interactions usage.

We are following Material Theme guidelines for color styling

Read more about what items are used and where within the Apptentive 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, Note, 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 & Note

The text for both Love Dialog and Notes 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 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 Apptentive Rating Dialog

We can avoid a lot of boilerplate by having the Apptentive Title.Dialog.WithMessage and the Apptentive 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: Notes, Survey (close dialog), and Apptentive Rating Dialog

We’re able to reduce a lot of boilerpalte 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

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 Note

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

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>

Widgets

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 Apptentive’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 Apptentive Rating Dialog

The Apptentive Rating Dialog is an interaction by Apptentive 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.

The dialog layout

Uses apptentiveRatingDialogLayoutStyle.

The Apptentive 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

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 style:

<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

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

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

<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

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

Here is 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

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

Here is the 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>

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>

Updated on June 5, 2023

Was this article helpful?

Yes No

Overview

Implementation

Files

Button background

Button spacing

Survey toolbar & bottom app bar background

Survey question divider

Survey text box background

Shared Styles

Important styles

Buttons

Dialog title or message only text style

Dialog title and message (together)

Dialog stacked button layout and borderless buttons

1. The Love Dialog

The title

The buttons

The styles

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

Widgets

The free form question types

The submit button

The close dialog

The styles

4. The Apptentive Rating Dialog

The dialog layout

The title and message

The buttons

The styles

5. Message Center

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

Was this article helpful?

Related Articles