Android UI Cookbook Design 3

This design is created in a generic “food service 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.

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

Alchemer Mobile Rating DialogAlchemer Mobile Message CenterAlchemer Mobile Love DialogAlchemer Mobile PromptAlchemer Mobile SurveysHomepage (No interaction)

This design highlights custom UI configurations like:

  • All Interactions
    • Outline buttons with square corners
  • Love Dialog
    • Large header image
    • Image buttons
  • Prompt (formerly Notes)
    • Title text icon
    • Large header image
  • Survey
    • Large header image
  • Alchemer Mobile Rating Dialog
    • Large header image
  • Alchemer Mobile Message Center
    • Gradient header

Implementation

Files

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



Header images

Used in: Love Dialog, Prompts, Survey, and Alchemer Mobile Rating Dialog.

We named these cookbook_3_love_dialog_header, cookbook_3_note_header, cookbook_3_survey_header, and cookbook_3_rating_dialog_header. You’ll see them referenced within the code blocks for the Love Dialog, Prompts, Survey, and Rating Dialog.

Design 3 Alchemer Mobile Rating Dialog header image


Design 3 survey header image

Design 3 Prompt header image



Design 3 Love Dialog header image



Love Dialog buttons

Used in: Love Dialog

Pictures are worth a thousand words. Using images on buttons for Love Dialogs is a great way to add a touch more of personality to your feedback.

We can use a PNG, but vectors (SVG) are more versatile, customizable, and scalable, so they’re recommended.

We named these cookbook_3_love_dialog_yes.xml and cookbook_3_love_dialog_no.xml. You’ll see them referenced within the code blocks for the Love Dialog Yes and No (alternate) buttons.

You can add an SVG / PNG to your app by:

* Navigate to res -> drawable
* Right-click the drawable folder
* Hover over New
* Select Vector Asset
* Find your SVG or PSD file and upload


PNG version for visual

PNG version for visual


<!--Love Dialog Yes Button-->

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="48"
    android:viewportHeight="48">
  <path
      android:pathData="M24,46C19.649,46 15.395,44.71 11.778,42.292C8.16,39.875 5.34,36.439 3.675,32.419C2.01,28.399 1.574,23.976 2.423,19.708C3.272,15.44 5.367,11.52 8.444,8.444C11.52,5.367 15.44,3.272 19.708,2.423C23.976,1.574 28.399,2.01 32.419,3.675C36.439,5.34 39.875,8.16 42.292,11.778C44.71,15.395 46,19.649 46,24C45.993,29.833 43.673,35.425 39.549,39.549C35.425,43.673 29.833,45.993 24,46Z"
      android:fillColor="#FFDE80"/>
  <path
      android:pathData="M35.6,32C35.86,31.021 35.994,30.013 36,29C36,28.735 35.895,28.48 35.707,28.293C35.52,28.105 35.265,28 35,28H13C12.735,28 12.48,28.105 12.293,28.293C12.105,28.48 12,28.735 12,29C12.004,30.013 12.137,31.021 12.395,32H35.6Z"
      android:fillColor="#ffffff"/>
  <path
      android:pathData="M12.4,32C13.065,34.571 14.565,36.848 16.665,38.473C18.765,40.099 21.345,40.981 24,40.981C26.655,40.981 29.235,40.099 31.335,38.473C33.435,36.848 34.935,34.571 35.6,32H12.4Z"
      android:fillColor="#AE453E"/>
  <path
      android:pathData="M18.014,39.385C19.832,40.443 21.897,41 24,41C26.103,41 28.169,40.443 29.986,39.385C29.365,38.352 28.487,37.498 27.438,36.905C26.39,36.312 25.205,36 24,36C22.795,36 21.611,36.312 20.562,36.905C19.513,37.498 18.635,38.352 18.014,39.385Z"
      android:fillColor="#E86C60"/>
  <path
      android:pathData="M16.261,12.113C15.703,12.263 15.19,12.547 14.767,12.941C14.345,13.335 14.025,13.827 13.836,14.373C13.276,13.872 12.57,13.565 11.822,13.496C11.074,13.427 10.324,13.601 9.682,13.991C9.041,14.382 8.542,14.968 8.259,15.664C7.976,16.36 7.925,17.129 8.113,17.856C9,21.242 16.531,24.7 16.531,24.7C16.531,24.7 21.414,18 20.531,14.613C20.293,13.717 19.711,12.951 18.911,12.483C18.111,12.015 17.159,11.882 16.261,12.113Z"
      android:fillColor="#FA645A"/>
  <path
      android:pathData="M27.469,14.616C26.586,18.003 31.469,24.703 31.469,24.703C31.469,24.703 39,21.242 39.887,17.856C40.075,17.129 40.024,16.36 39.741,15.664C39.458,14.968 38.959,14.382 38.318,13.991C37.676,13.601 36.926,13.427 36.178,13.496C35.43,13.565 34.724,13.872 34.164,14.373C33.92,13.663 33.454,13.049 32.835,12.624C32.216,12.199 31.477,11.984 30.726,12.011C29.976,12.038 29.254,12.306 28.667,12.775C28.081,13.244 27.66,13.89 27.469,14.616Z"
      android:fillColor="#FA645A"/>
</vector>
<!--Love Dialog No Button-->

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="48"
    android:viewportHeight="48">
  <path
      android:pathData="M24,46C19.649,46 15.395,44.71 11.778,42.292C8.16,39.875 5.34,36.439 3.675,32.419C2.01,28.399 1.574,23.976 2.423,19.708C3.272,15.44 5.367,11.52 8.444,8.444C11.52,5.367 15.44,3.272 19.708,2.423C23.976,1.574 28.399,2.01 32.419,3.675C36.439,5.34 39.875,8.16 42.292,11.778C44.71,15.395 46,19.649 46,24C45.993,29.833 43.673,35.425 39.549,39.549C35.425,43.673 29.833,45.993 24,46Z"
      android:fillColor="#FFDE80"/>
  <path
      android:pathData="M37,23H31C30.735,23 30.48,22.895 30.293,22.707C30.105,22.52 30,22.265 30,22C30,21.735 30.105,21.48 30.293,21.293C30.48,21.105 30.735,21 31,21H37C37.265,21 37.52,21.105 37.707,21.293C37.895,21.48 38,21.735 38,22C38,22.265 37.895,22.52 37.707,22.707C37.52,22.895 37.265,23 37,23Z"
      android:fillColor="#444444"/>
  <path
      android:pathData="M17,23H11C10.735,23 10.48,22.895 10.293,22.707C10.105,22.52 10,22.265 10,22C10,21.735 10.105,21.48 10.293,21.293C10.48,21.105 10.735,21 11,21H17C17.265,21 17.52,21.105 17.707,21.293C17.895,21.48 18,21.735 18,22C18,22.265 17.895,22.52 17.707,22.707C17.52,22.895 17.265,23 17,23Z"
      android:fillColor="#444444"/>
  <path
      android:pathData="M24,39C23.011,39 22.044,38.707 21.222,38.157C20.4,37.608 19.759,36.827 19.381,35.913C19.002,35 18.903,33.994 19.096,33.025C19.289,32.055 19.765,31.164 20.465,30.465C21.164,29.765 22.055,29.289 23.025,29.096C23.994,28.903 25,29.002 25.913,29.381C26.827,29.759 27.608,30.4 28.157,31.222C28.707,32.044 29,33.011 29,34C28.998,35.326 28.471,36.596 27.534,37.534C26.596,38.471 25.326,38.998 24,39Z"
      android:fillColor="#AE453E"/>
  <path
      android:pathData="M11,23V43.375C11.053,44.12 11.398,44.813 11.96,45.305C12.521,45.797 13.255,46.046 14,46C14.745,46.046 15.479,45.797 16.04,45.305C16.602,44.813 16.947,44.12 17,43.375V23H11Z"
      android:fillColor="#43A6DD"/>
  <path
      android:pathData="M31,23V43.375C31.053,44.12 31.398,44.813 31.96,45.305C32.521,45.797 33.255,46.046 34,46C34.745,46.046 35.479,45.797 36.04,45.305C36.602,44.813 36.947,44.12 37,43.375V23H31Z"
      android:fillColor="#43A6DD"/>
  <path
      android:pathData="M24,39C23.011,39 22.044,38.707 21.222,38.157C20.4,37.608 19.759,36.827 19.381,35.913C19.002,35 18.903,33.994 19.096,33.025C19.289,32.055 19.765,31.164 20.465,30.465C21.164,29.765 22.055,29.289 23.025,29.096C23.994,28.903 25,29.002 25.913,29.381C26.827,29.759 27.608,30.4 28.157,31.222C28.707,32.044 29,33.011 29,34C28.998,35.326 28.471,36.596 27.534,37.534C26.596,38.471 25.326,38.998 24,39Z"
      android:fillColor="#AE453E"/>
  <path
      android:pathData="M24,39C26.195,39 27.974,38.105 27.974,37C27.974,35.895 26.195,35 24,35C21.805,35 20.026,35.895 20.026,37C20.026,38.105 21.805,39 24,39Z"
      android:fillColor="#FA645A"/>
</vector>



Prompt title icon

Used in: Prompt

We can use a PNG, but vectors (SVG) are more versatile, customizable, and scalable, so they’re recommended.

We named this one cookbook_3_note_title_icon.xml and you’ll see it referenced within the code block for the Prompt title icon.

PNG version for visual


<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="28dp"
    android:height="28dp"
    android:viewportWidth="28"
    android:viewportHeight="28">
  <path
      android:strokeWidth="1"
      android:pathData="M20.621,9.577C20.827,9.784 21.107,9.9 21.399,9.9C21.691,9.9 21.971,9.784 22.177,9.577C22.383,9.371 22.499,9.091 22.499,8.8V5.2C22.499,3.953 22.004,2.758 21.122,1.877C20.241,0.995 19.046,0.5 17.799,0.5C16.553,0.5 15.357,0.995 14.476,1.877C13.594,2.758 13.099,3.953 13.099,5.2V8.8C13.099,9.091 13.215,9.371 13.422,9.577C13.628,9.784 13.908,9.9 14.199,9.9C14.491,9.9 14.771,9.784 14.977,9.577C15.183,9.371 15.299,9.091 15.299,8.8V5.2C15.299,4.537 15.563,3.901 16.031,3.432C16.5,2.963 17.136,2.7 17.799,2.7C18.462,2.7 19.098,2.963 19.567,3.432C20.036,3.901 20.299,4.537 20.299,5.2V8.8C20.299,9.091 20.415,9.371 20.621,9.577Z"
      android:fillColor="#E9F9FD"
      android:strokeColor="#E9F9FD"/>
  <path
      android:pathData="M23.954,27.399H11.645C10.884,27.397 10.153,27.107 9.597,26.587C9.042,26.067 8.704,25.357 8.651,24.598L7.6,8.839C7.594,8.757 7.606,8.675 7.633,8.597C7.661,8.52 7.705,8.449 7.761,8.389C7.817,8.329 7.885,8.281 7.961,8.249C8.036,8.216 8.117,8.2 8.2,8.2H27.399C27.481,8.2 27.562,8.216 27.638,8.249C27.713,8.281 27.781,8.329 27.838,8.389C27.894,8.449 27.937,8.52 27.965,8.597C27.993,8.675 28.004,8.757 27.999,8.839L26.947,24.598C26.894,25.357 26.556,26.067 26.001,26.587C25.446,27.107 24.714,27.397 23.954,27.399Z">
    <aapt:attr name="android:fillColor">
      <gradient 
          android:startX="5"
          android:startY="4.5"
          android:endX="28"
          android:endY="31.5"
          android:type="linear">
        <item android:offset="0" android:color="#FF17AFD0"/>
        <item android:offset="1" android:color="#FFFFFFFF"/>
      </gradient>
    </aapt:attr>
  </path>
  <path
      android:strokeWidth="1"
      android:pathData="M12.399,14.799H5.8C5.641,14.799 5.488,14.736 5.376,14.624C5.263,14.511 5.2,14.358 5.2,14.199C5.2,14.04 5.263,13.888 5.376,13.775C5.488,13.663 5.641,13.599 5.8,13.599H12.399C12.559,13.599 12.711,13.663 12.824,13.775C12.936,13.888 12.999,14.04 12.999,14.199C12.999,14.358 12.936,14.511 12.824,14.624C12.711,14.736 12.559,14.799 12.399,14.799Z"
      android:fillColor="#E9F9FD"
      android:strokeColor="#E9F9FD"/>
  <path
      android:strokeWidth="1"
      android:pathData="M12.399,21.999H5.8C5.641,21.999 5.488,21.936 5.376,21.823C5.263,21.711 5.2,21.558 5.2,21.399C5.2,21.24 5.263,21.087 5.376,20.975C5.488,20.862 5.641,20.799 5.8,20.799H12.399C12.559,20.799 12.711,20.862 12.824,20.975C12.936,21.087 12.999,21.24 12.999,21.399C12.999,21.558 12.936,21.711 12.824,21.823C12.711,21.936 12.559,21.999 12.399,21.999Z"
      android:fillColor="#E9F9FD"
      android:strokeColor="#E9F9FD"/>
  <path
      android:strokeWidth="1"
      android:pathData="M10,18.399H1.6C1.441,18.399 1.288,18.336 1.176,18.223C1.063,18.111 1,17.958 1,17.799C1,17.64 1.063,17.487 1.176,17.375C1.288,17.262 1.441,17.199 1.6,17.199H10C10.159,17.199 10.311,17.262 10.424,17.375C10.536,17.487 10.599,17.64 10.599,17.799C10.599,17.958 10.536,18.111 10.424,18.223C10.311,18.336 10.159,18.399 10,18.399Z"
      android:fillColor="#E9F9FD"
      android:strokeColor="#E9F9FD"/>
</vector>



Dialog background & survey bottom app bar background

Used in: Love Dialog, Prompt, Survey, Survey (close dialog), Alchemer Mobile Rating Dialog

We named this one cookbook_3_survey_dialog_background_bottom_app_bar.xml and you’ll see it referenced within the code blocks for the dialogs and the survey bottom app bar.

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

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#9C1129"
        android:endColor="#DF526B" />
</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 where within the Alchemer Mobile Interface Customization article.

The comfortaa font is from Google Fonts

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

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

    <!-- Survey -->
    <item name="colorOnPrimary">#FFFFFF</item>
    <item name="android:colorBackground">#FFFFFF</item>
    <item name="colorOnBackground">#414D59</item>

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



Button style

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

Inherit from Alchemer Mobile styles to remove a lot of the boilerplate!

Here we can leverage having a common style all buttons can inherit from.

<style name="Cookbook3.Button" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="android:fontFamily">@font/comfortaa</item>
    <item name="strokeWidth">2dp</item>
    <item name="cornerRadius">0dp</item>
    <item name="android:textSize">15sp</item>
    <item name="android:minWidth">208dp</item>
    <item name="android:paddingTop">6dp</item>
    <item name="android:paddingBottom">10dp</item>
    <item name="android:backgroundTint">?android:colorBackground</item>
    <item name="strokeColor">?colorOnBackground</item>
    <item name="android:textColor">?colorOnBackground</item>
</style>



Dialog layouts

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

The Alchemer Mobile dialog layout style has a lot of padding that doesn’t work well with a header image, so we’ll have to override it with our own style.

<style name="Cookbook3.Dialog.HeaderImage" parent="">
    <item name="android:adjustViewBounds">true</item>
    <item name="android:layout_marginBottom">4dp</item>
</style>



Dialog header images

Used in: Love Dialog, Prompt, and Alchemer Mobile Rating Dialog

<style name="Cookbook3.Dialog.HeaderImage" parent="">
    <item name="android:adjustViewBounds">true</item>
    <item name="android:layout_marginBottom">4dp</item>
</style>



Dialog title or message only text style

Used in: Love Dialog and Prompt

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

<style name="Cookbook3.Dialog.TitleOrMessageOnly" parent="Apptentive.TextAppearance.Title.Dialog.TitleOrMessageOnly">
    <item name="android:textSize">18sp</item>
    <item name="android:paddingEnd">30dp</item>
    <item name="android:paddingTop">8dp</item>
    <item name="android:paddingBottom">16dp</item>
    <item name="android:lineSpacingExtra">6sp</item>
    <item name="android:letterSpacing">.02</item>
</style>



Dialog title and message (together)

Used in: Prompt, 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="Cookbook3.Dialog.TitleWithMessage" parent="Apptentive.TextAppearance.Title.Dialog.WithMessage">
    <item name="android:textSize">18sp</item>
    <item name="android:paddingTop">12dp</item>
    <item name="android:paddingEnd">24dp</item>
    <item name="android:paddingBottom">16dp</item>
    <item name="android:lineSpacingExtra">5sp</item>
    <item name="android:letterSpacing">.02</item>
</style>

<style name="Cookbook3.Dialog.TitleWithMessage.Centered">
    <item name="android:paddingStart">24dp</item>
    <item name="android:textAlignment">center</item>
</style>

<style name="Cookbook3.Dialog.Message" parent="Apptentive.TextAppearance.Message.Dialog">
    <item name="android:paddingBottom">24dp</item>
    <item name="android:paddingStart">24dp</item>
    <item name="android:paddingEnd">24dp</item>
    <item name="android:lineSpacingExtra">6sp</item>
    <item name="android:letterSpacing">.04</item>
</style>



Dialog button layout and borderless buttons

Used in: Love Dialog, Prompt, Survey (close dialog), and Rating Dialog

Borderless buttons have a different design, so we’ll have a text button style for them.

<style name="Cookbook3.Dialog.ButtonLayout.Stacked" parent="">
    <item name="android:gravity">center</item>
    <item name="android:orientation">vertical</item>
</style>

<style name="Cookbook3.Button.Borderless" parent="Apptentive.Widget.Dialog.Button">
    <item name="android:textColor">?colorOnSurface</item>
    <item name="android:minWidth">200dp</item>
    <item name="android:gravity">center</item>
    <item name="cornerRadius">0dp</item>
</style>

1. The Love Dialog

Design 3 Love Dialog

The layout

Uses apptentiveLoveDialogLayoutStyle.

We can use the Cookbook3.Dialog.Layout style that we created earlier.


The header image

Uses apptentiveLoveDialogHeaderImageStyle.

There is a placeholder within the Alchemer Mobile designs for each interaction to include a header image.

We’ll create a style for the one in Love Dialog while leveraging the shared style we have

<style name="Cookbook3.Dialog.HeaderImage.LoveDialog">
    <item name="android:src">@drawable/cookbook_3_love_dialog_header</item>
</style>



The title

Uses apptentiveLoveDialogTitleStyle.

We can leverage the Cookbook3.Dialog.TitleOrMessageOnly style that we created earlier.

<style name="Cookbook3.Dialog.TitleOrMessageOnly.LoveDialog">
    <item name="android:paddingStart">30dp</item>
    <item name="android:textAlignment">center</item>
</style>



The button layout

Uses apptentiveLoveDialogButtonLayoutStyle and apptentiveLoveDialogButtonLayoutStyleAlternate

Here we are utilizing the alternate layout for the Love Dialog buttons. This allows a Yes -> No ordering of the buttons instead of the default No -> Yes button ordering.

We can use the Cookbook3.Dialog.ButtonLayout style we created earlier for the alternate button layout.

The alternate layout will just be set with no style attached in order to override the default one in our SDK that makes the visibility for it gone.

<style name="Cookbook3.Dialog.ButtonLayout.LoveDialog" parent="">
    <item name="android:visibility">gone</item>
</style>



The buttons

Uses apptentiveLoveDialogYesButtonStyleAlternate and apptentiveLoveDialogNoButtonStyleAlternate.

Using some specific style items, we can modify the MaterialButton widgets we have to instead look like an image button.

<style name="Cookbook3.Button.LoveDialog" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="android:textSize">0sp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:ambientShadowAlpha">0</item>
    <item name="android:background">?selectableItemBackgroundBorderless</item>
    <item name="iconSize">64dp</item>
    <item name="iconGravity">textTop</item>
    <item name="iconPadding">0dp</item>
    <item name="iconTint">@null</item>
    <item name="rippleColor">@null</item>
</style>

<style name="Cookbook3.Button.LoveDialog.Yes">
    <item name="android:layout_marginStart">48dp</item>
    <item name="android:layout_marginEnd">24dp</item>
    <item name="icon">@drawable/cookbook_3_love_dialog_yes</item>
</style>

<style name="Cookbook3.Button.LoveDialog.No">
    <item name="android:layout_marginStart">24dp</item>
    <item name="android:layout_marginEnd">48dp</item>
    <item name="icon">@drawable/cookbook_3_love_dialog_no</item>
</style>



The styles

<item name="apptentiveFontFamilyDefault">@font/comfortaa</item>
<item name="colorSecondary">#AB112C</item>
<item name="apptentiveHeaderAlpha">1</item>
<item name="apptentiveSubheaderAlpha">.8</item>
<item name="colorOnSurface">#FFFFFF</item>

<item name="apptentiveLoveDialogLayoutStyle">@style/Cookbook3.Dialog.Layout</item>
<item name="apptentiveLoveDialogHeaderImageStyle">@style/Cookbook3.Dialog.HeaderImage.LoveDialog</item>
<item name="apptentiveLoveDialogTitleStyle">@style/Cookbook3.Dialog.TitleOrMessageOnly.LoveDialog</item>
<item name="apptentiveLoveDialogButtonLayoutStyle">@style/Cookbook3.Dialog.ButtonLayout.LoveDialog</item>
<item name="apptentiveLoveDialogButtonLayoutStyleAlternate"/>
<item name="apptentiveLoveDialogYesButtonStyleAlternate">@style/Cookbook3.Button.LoveDialog.Yes</item>
<item name="apptentiveLoveDialogNoButtonStyleAlternate">@style/Cookbook3.Button.LoveDialog.No</item>

2. Prompt (formerly Notes)

Design 3 Prompt


The layout

Uses apptentiveNoteLayoutStyle.

We can use the Cookbook2.Dialog.Layout that we created earlier.


The header image

Uses apptentiveNoteHeaderImageStyle.

There is a placeholder within the Apptentive designs for each interaction to include a header image.

We’ll create a style for the one in Prompts while leveraging the shared style.

<style name="Cookbook3.Dialog.HeaderImage.Note">
    <item name="android:src">@drawable/cookbook_3_note_header</item>
</style>



The title icon

Uses apptentiveNoteTitleWithMessageImageStyle and apptentiveNoteTitleOrMessageOnlyImageStyle.

Just like we have for the header, we also have a hidden ImageView before title text in dialogs.

<style name="Cookbook3.Dialog.TitleImage.Note" parent="">
    <item name="android:src">@drawable/cookbook_3_note_title_icon</item>
    <item name="android:layout_marginStart">16dp</item>
    <item name="android:layout_marginTop">12dp</item>
</style>



The titles and message

Uses apptentiveNoteTitleWithMessageTextStyle, apptentiveNoteTitleOrMessageOnlyTextStyle, and apptentiveNoteMessageTextStyle.

We can use the Cookbook3.Dialog.TitleOrMessageOnly and the Cookbook2.Dialog.Message styles that we created earlier. We’ll leverage most of Cookbook3.Dialog.TitleWithMessage.Note and just add some padding.

<style name="Cookbook3.Dialog.TitleWithMessage.Note">
    <item name="android:paddingStart">8dp</item>
</style>



The buttons and button layout

Uses apptentiveNoteButtonLayoutStyle, apptentiveNoteButtonStyle, and apptentiveNoteDismissButtonStyle.

We can use the Cookbook3.Dialog.ButtonLayout.Stackedthat we created earlier for the button layout.

We can use the Cookbook3.Buttonand Cookbook3.Dialog.Borderless styles that we created earlier.


The styles

<item name="apptentiveFontFamilyDefault">@font/comfortaa</item>
<item name="colorSecondary">#AB112C</item>
<item name="apptentiveHeaderAlpha">1</item>
<item name="apptentiveSubheaderAlpha">.8</item>
<item name="apptentiveTextSizeDefault">15sp</item>
<item name="colorOnSurface">#FFFFFF</item>

<item name="apptentiveNoteLayoutStyle">@style/Cookbook3.Dialog.Layout</item>
<item name="apptentiveNoteHeaderImageStyle">@style/Cookbook3.Dialog.HeaderImage.Note</item>
<item name="apptentiveNoteTitleWithMessageImageStyle">@style/Cookbook3.Dialog.TitleImage.Note</item>
<item name="apptentiveNoteTitleWithMessageTextStyle">@style/Cookbook3.Dialog.TitleWithMessage.Note</item>
<item name="apptentiveNoteTitleOrMessageOnlyImageStyle">@style/Cookbook3.Dialog.TitleImage.Note</item>
<item name="apptentiveNoteTitleOrMessageOnlyTextStyle">@style/Cookbook3.Dialog.TitleOrMessageOnly</item>
<item name="apptentiveNoteMessageTextStyle">@style/Cookbook3.Dialog.Message</item>
<item name="apptentiveNoteButtonLayoutStyle">@style/Cookbook3.Dialog.ButtonLayout.Stacked</item>
<item name="apptentiveNoteButtonStyle">@style/Cookbook3.Button</item>
<item name="apptentiveNoteDismissButtonStyle">@style/Cookbook3.Button.Borderless</item>

3. The Survey

Design 3 Survey

The header image toolbar

Uses apptentiveSurveyTitleStyle and apptentiveSurveyHeaderImageStyle.

To include a header image as the toolbar, we’ll want to hide the title text that is present, then we can add the image as a background to the toolbar.

Use layout_constraintHeight_max and layout_constraintHeight_min to constrain your image and stop it from getting too large or too small for your survey. Otherwise, it tries to use the height of the image and can make it distorted.

This is literally the background for MaterialToolbar so we have to work with what it provides.

<style name="Cookbook3.Survey.Toolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
    <item name="android:background">@drawable/cookbook_3_survey_header</item>
    <item name="layout_constraintHeight_max">172dp</item>
    <item name="navigationIcon">@drawable/ic_baseline_close_24</item>
    <item name="navigationContentDescription">Close</item>
    <item name="navigationIconTint">@android:color/white</item>
</style>

<style name="Cookbook3.Survey.Title" parent="Apptentive.TextAppearance.Title.Survey">
    <item name="android:visibility">gone</item>
</style>



The toolbar and bottom app bar

Uses apptentiveSurveyBottomAppBarStyle.

The bottom app bar is slightly bigger than our Alchemer Mobile design and uses our custom background.

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



The introduction

Uses apptentiveSurveyIntroductionStyle.

Both the title and introduction can leverage Apptentive.TextAppearance style to reduce the boilerplate code.

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



The submit button

Uses apptentiveSurveySubmitButtonStyle.

We can use the Cookbook3.Button style we created earlier.



The close dialog

Uses apptentiveRatingDialogLayoutStyle, 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.

This is seen less often, but it’s good to have it tie in with the rest of your designs. Luckily, we can use the Cookbook3.Dialog.Layout, Cookbook3.Dialog.TitleWithMessage.Centered, Cookbook3.Dialog.Message, Cookbook3.Dialog.ButtonLayout.Stacked,Cookbook3.Button.Borderless, and Cookbook3.Button styles we created earlier.



The styles

<item name="apptentiveFontFamilyDefault">@font/comfortaa</item>
<item name="colorSecondary">#AB112C</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">#FFFFFF</item>
<item name="colorOnBackground">#414D59</item>
<item name="android:statusBarColor">#FFFFFF</item>
<item name="android:windowLightStatusBar" tools:ignore="NewApi">true</item>

<item name="apptentiveSurveyToolbarStyle">@style/Cookbook3.Survey.Toolbar</item>
<item name="apptentiveSurveyTitleStyle">@style/Cookbook3.Survey.Title</item>
<item name="apptentiveSurveyBottomAppBarStyle">@style/Cookbook3.Survey.BottomAppBar</item>
<item name="apptentiveSurveyIntroductionStyle">@style/Cookbook3.Survey.Introduction</item>
<item name="apptentiveSurveySubmitButtonStyle">@style/Cookbook3.Button</item>

<item name="apptentiveGenericDialogLayoutStyle">@style/Cookbook3.Dialog.Layout</item>
<item name="apptentiveGenericDialogTitleTextStyle">@style/Cookbook3.Dialog.TitleWithMessage.Centered</item>
<item name="apptentiveGenericDialogMessageTextStyle">@style/Cookbook3.Dialog.Message</item>
<item name="apptentiveGenericDialogButtonLayoutStyle">@style/Cookbook3.Dialog.ButtonLayout.Stacked</item>
<item name="apptentiveGenericDialogPositiveButtonStyle">@style/Cookbook3.Button.Borderless</item>
<item name="apptentiveGenericDialogNegativeButtonStyle">@style/Cookbook3.Button</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 3 Alchemer Mobile Rating Dialog


The dialog layout

Uses apptentiveRatingDialogLayoutStyle.

We can use the Cookbook3.Dialog.Layout style we created earlier.


The header image

Uses apptentiveRatingDialogHeaderImageStyle.

There is a placeholder within the Alchemer Mobile designs for each interaction to include a header image.

We’ll create a style for the one in the Alchemer Mobile Rating Dialog while leveraging the shared style.

<style name="Cookbook3.Dialog.HeaderImage.RatingDialog" parent="">
    <item name="android:src">@drawable/cookbook_3_rating_dialog_header</item>
</style>


The title and message

Uses apptentiveRatingDialogTitleTextStyleand apptentiveRatingDialogMessageTextStyle.

We can use the Cookbook3.Dialog.TitleWithMessage.Centered and Cookbook2.Dialog.Message styles we created earlier.


The buttons

Uses apptentiveRatingDialogButtonRateStyle, apptentiveRatingDialogButtonRemindStyle, and apptentiveRatingDialogButtonDeclineStyle.

We can utilize most code from the Cookbook3.Buttonand Cookbook3.Button.Borderless styles. We just need them centered

<style name="Cookbook3.Button.RatingDialog">
    <item name="android:layout_gravity">center</item>
</style>

<style name="Cookbook3.Button.Borderless.RatingDialog">
    <item name="android:layout_gravity">center</item>
</style>


The styles

<item name="apptentiveFontFamilyDefault">@font/comfortaa</item>
<item name="colorSecondary">#AB112C</item>
<item name="apptentiveHeaderAlpha">1</item>
<item name="apptentiveSubheaderAlpha">.8</item>
<item name="apptentiveTextSizeDefault">15sp</item>
<item name="colorOnSurface">#FFFFFF</item>

<item name="apptentiveRatingDialogLayoutStyle">@style/Cookbook3.Dialog.Layout</item>
<item name="apptentiveRatingDialogHeaderImageStyle">@style/Cookbook3.Dialog.HeaderImage.RatingDialog</item>
<item name="apptentiveRatingDialogTitleTextStyle">@style/Cookbook3.Dialog.TitleWithMessage.Centered</item>
<item name="apptentiveRatingDialogMessageTextStyle">@style/Cookbook3.Dialog.Message</item>
<item name="apptentiveRatingDialogButtonRateStyle">@style/Cookbook3.Button.RatingDialog</item>
<item name="apptentiveRatingDialogButtonRemindStyle">@style/Cookbook3.Button.RatingDialog</item>
<item name="apptentiveRatingDialogButtonDeclineStyle">@style/Cookbook3.Button.Borderless.RatingDialog</item>

5. Message Center

Design 3 Alchemer Mobile Message Center



Toolbar

Design 3 Message Center Toolbar


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

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

Here is the drawable that the above refers too:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#9C1129"
        android:centerColor="#9C1129"
        android:endColor="#DF526B" />
</shape>



Message bubble colors

Design 3 Message Center Message Bubbles



<item name="apptentiveMessageCenterBubbleColorInbound">#B0243C</item>
<item name="apptentiveMessageCenterBubbleColorOutbound">#F3F3F3</item>



Compose Section

Design 3 Message Center Compose Section


<item name="apptentiveMessageCenterColorComposerOutline">#056E0F</item>
<item name="apptentiveMessageCenterViewSeparatorStyle">@style/Cookbook3.MessageCenter.View.Separator.Style</item>
<item name="apptentiveMessageCenterComposerStyle">@style/Cookbook3.MessageCenter.Composer.Style</item>

<style name="Cookbook3.MessageCenter.View.Separator.Style" parent="Apptentive.Widget.Separator">
    <item name="android:background">#414D59</item>
</style>

<style name="Cookbook3.MessageCenter.Composer.Style" parent="Apptentive.Widget.MessageCenter.Composer.EditText">
    <item name="android:background">@drawable/cookbook_3_message_center_compose_background</item>
    <item name="android:textColorHint">#414D59</item>
    <item name="android:textColor">#081728</item>
</style>



The styles

<item name="apptentiveMessageCenterToolbarStyle">@style/Cookbook3.MessageCenter.Toolbar</item>
<item name="apptentiveMessageCenterBubbleColorInbound">#B0243C</item>
<item name="apptentiveMessageCenterBubbleColorOutbound">#F3F3F3</item>
<item name="apptentiveMessageCenterColorComposerOutline">#056E0F</item>
<item name="apptentiveMessageCenterViewSeparatorStyle">@style/Cookbook3.MessageCenter.View.Separator.Style</item>
<item name="apptentiveMessageCenterComposerStyle">@style/Cookbook3.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="Cookbook3.Button" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="android:fontFamily">@font/comfortaa</item>
    <item name="strokeWidth">2dp</item>
    <item name="cornerRadius">0dp</item>
    <item name="android:textSize">15sp</item>
    <item name="android:minWidth">208dp</item>
    <item name="android:paddingTop">6dp</item>
    <item name="android:paddingBottom">10dp</item>
    <item name="android:backgroundTint">?android:colorBackground</item>
    <item name="strokeColor">?colorOnBackground</item>
    <item name="android:textColor">?colorOnBackground</item>
</style>

<!-- Dialogs -->
<style name="Cookbook3.Dialog.Layout" parent="">
    <item name="android:background">@drawable/cookbook_3_survey_dialog_background_bottom_app_bar</item>
    <item name="android:paddingBottom">16dp</item>
</style>

<style name="Cookbook3.Dialog.HeaderImage" parent="">
    <item name="android:adjustViewBounds">true</item>
    <item name="android:layout_marginBottom">4dp</item>
</style>

<style name="Cookbook3.Dialog.TitleOrMessageOnly" parent="Apptentive.TextAppearance.Title.Dialog.TitleOrMessageOnly">
    <item name="android:textSize">18sp</item>
    <item name="android:paddingEnd">30dp</item>
    <item name="android:paddingTop">8dp</item>
    <item name="android:paddingBottom">16dp</item>
    <item name="android:lineSpacingExtra">6sp</item>
    <item name="android:letterSpacing">.02</item>
</style>

<style name="Cookbook3.Dialog.TitleWithMessage" parent="Apptentive.TextAppearance.Title.Dialog.WithMessage">
    <item name="android:textSize">18sp</item>
    <item name="android:paddingTop">12dp</item>
    <item name="android:paddingEnd">24dp</item>
    <item name="android:paddingBottom">16dp</item>
    <item name="android:lineSpacingExtra">5sp</item>
    <item name="android:letterSpacing">.02</item>
</style>

<style name="Cookbook3.Dialog.TitleWithMessage.Centered">
    <item name="android:paddingStart">24dp</item>
    <item name="android:textAlignment">center</item>
</style>

<style name="Cookbook3.Dialog.Message" parent="Apptentive.TextAppearance.Message.Dialog">
    <item name="android:paddingBottom">24dp</item>
    <item name="android:paddingStart">24dp</item>
    <item name="android:paddingEnd">24dp</item>
    <item name="android:lineSpacingExtra">6sp</item>
    <item name="android:letterSpacing">.04</item>
</style>

<style name="Cookbook3.Dialog.ButtonLayout.Stacked" parent="">
    <item name="android:gravity">center</item>
    <item name="android:orientation">vertical</item>
</style>

<style name="Cookbook3.Button.Borderless" parent="Apptentive.Widget.Dialog.Button">
    <item name="android:textColor">?colorOnSurface</item>
    <item name="android:minWidth">200dp</item>
    <item name="android:gravity">center</item>
    <item name="cornerRadius">0dp</item>
</style>

<!-- Love Dialog -->
<style name="Cookbook3.Dialog.HeaderImage.LoveDialog">
    <item name="android:src">@drawable/cookbook_3_love_dialog_header</item>
</style>

<style name="Cookbook3.Dialog.TitleOrMessageOnly.LoveDialog">
    <item name="android:paddingStart">30dp</item>
    <item name="android:textAlignment">center</item>
</style>

<style name="Cookbook3.Dialog.ButtonLayout.LoveDialog" parent="">
    <item name="android:visibility">gone</item>
</style>

<style name="Cookbook3.Button.LoveDialog" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="android:textSize">0sp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:ambientShadowAlpha">0</item>
    <item name="android:background">?selectableItemBackgroundBorderless</item>
    <item name="iconSize">64dp</item>
    <item name="iconGravity">textTop</item>
    <item name="iconPadding">0dp</item>
    <item name="iconTint">@null</item>
    <item name="rippleColor">@null</item>
</style>

<style name="Cookbook3.Button.LoveDialog.Yes">
    <item name="android:layout_marginStart">48dp</item>
    <item name="android:layout_marginEnd">24dp</item>
    <item name="icon">@drawable/cookbook_3_love_dialog_yes</item>
</style>

<style name="Cookbook3.Button.LoveDialog.No">
    <item name="android:layout_marginStart">24dp</item>
    <item name="android:layout_marginEnd">48dp</item>
    <item name="icon">@drawable/cookbook_3_love_dialog_no</item>
</style>

<!-- Note Dialog -->
<style name="Cookbook3.Dialog.HeaderImage.Note">
    <item name="android:src">@drawable/cookbook_3_note_header</item>
</style>

<style name="Cookbook3.Dialog.TitleImage.Note" parent="">
    <item name="android:src">@drawable/cookbook_3_note_title_icon</item>
    <item name="android:layout_marginStart">16dp</item>
    <item name="android:layout_marginTop">12dp</item>
</style>

<style name="Cookbook3.Dialog.TitleWithMessage.Note">
    <item name="android:paddingStart">8dp</item>
</style>

<!-- Survey -->
<style name="Cookbook3.Survey.Toolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
    <item name="android:background">@drawable/cookbook_3_survey_header</item>
    <item name="layout_constraintHeight_max">172dp</item>
    <item name="navigationIcon">@drawable/ic_baseline_close_24</item>
    <item name="navigationContentDescription">Close</item>
    <item name="navigationIconTint">@android:color/white</item>
</style>

<style name="Cookbook3.Survey.Title" parent="Apptentive.TextAppearance.Title.Survey">
    <item name="android:visibility">gone</item>
</style>

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

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

<!-- Rating Dialog -->
<style name="Cookbook3.Dialog.HeaderImage.RatingDialog">
    <item name="android:src">@drawable/cookbook_3_rating_dialog_header</item>
</style>

<style name="Cookbook3.Button.RatingDialog">
    <item name="android:layout_gravity">center</item>
</style>

<style name="Cookbook3.Button.Borderless.RatingDialog">
    <item name="android:layout_gravity">center</item>
</style>

<!-- Message Center -->
<style name="Cookbook3.MessageCenter.Toolbar" parent="Apptentive.Widget.MessageCenter.Toolbar">
    <item name="android:background">@drawable/cookbook_3_message_center_toolbar_top</item>
</style>

<style name="Cookbook3.MessageCenter.View.Separator.Style" parent="Apptentive.Widget.Separator">
    <item name="android:background">#414D59</item>
</style>

<style name="Cookbook3.MessageCenter.Composer.Style" parent="Apptentive.Widget.MessageCenter.Composer.EditText">
    <item name="android:background">@drawable/cookbook_3_message_center_compose_background</item>
    <item name="android:textColorHint">#414D59</item>
    <item name="android:textColor">#081728</item>
</style>



Setting the styles

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

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

    <!-- Love Dialog -->
    <item name="apptentiveLoveDialogLayoutStyle">@style/Cookbook3.Dialog.Layout</item>
    <item name="apptentiveLoveDialogHeaderImageStyle">@style/Cookbook3.Dialog.HeaderImage.LoveDialog</item>
    <item name="apptentiveLoveDialogTitleStyle">@style/Cookbook3.Dialog.TitleOrMessageOnly.LoveDialog</item>
    <item name="apptentiveLoveDialogButtonLayoutStyle">@style/Cookbook3.Dialog.ButtonLayout.LoveDialog</item>
    <item name="apptentiveLoveDialogButtonLayoutStyleAlternate"/>
    <item name="apptentiveLoveDialogYesButtonStyleAlternate">@style/Cookbook3.Button.LoveDialog.Yes</item>
    <item name="apptentiveLoveDialogNoButtonStyleAlternate">@style/Cookbook3.Button.LoveDialog.No</item>

    <!-- Note Dialog -->
    <item name="apptentiveNoteLayoutStyle">@style/Cookbook3.Dialog.Layout</item>
    <item name="apptentiveNoteHeaderImageStyle">@style/Cookbook3.Dialog.HeaderImage.Note</item>
    <item name="apptentiveNoteTitleWithMessageImageStyle">@style/Cookbook3.Dialog.TitleImage.Note</item>
    <item name="apptentiveNoteTitleWithMessageTextStyle">@style/Cookbook3.Dialog.TitleWithMessage.Note</item>
    <item name="apptentiveNoteTitleOrMessageOnlyImageStyle">@style/Cookbook3.Dialog.TitleImage.Note</item>
    <item name="apptentiveNoteTitleOrMessageOnlyTextStyle">@style/Cookbook3.Dialog.TitleOrMessageOnly</item>
    <item name="apptentiveNoteMessageTextStyle">@style/Cookbook3.Dialog.Message</item>
    <item name="apptentiveNoteButtonLayoutStyle">@style/Cookbook3.Dialog.ButtonLayout.Stacked</item>
    <item name="apptentiveNoteButtonStyle">@style/Cookbook3.Button</item>
    <item name="apptentiveNoteDismissButtonStyle">@style/Cookbook3.Button.Borderless</item>

    <!-- Survey -->
    <item name="colorOnPrimary">#FFFFFF</item>
    <item name="android:colorBackground">#FFFFFF</item>
    <item name="colorOnBackground">#414D59</item>

    <item name="android:statusBarColor">#FFFFFF</item>
    <item name="android:windowLightStatusBar" tools:ignore="NewApi">true</item>

    <item name="apptentiveSurveyToolbarStyle">@style/Cookbook3.Survey.Toolbar</item>
    <item name="apptentiveSurveyTitleStyle">@style/Cookbook3.Survey.Title</item>
    <item name="apptentiveSurveyBottomAppBarStyle">@style/Cookbook3.Survey.BottomAppBar</item>
    <item name="apptentiveSurveyIntroductionStyle">@style/Cookbook3.Survey.Introduction</item>
    <item name="apptentiveSurveySubmitButtonStyle">@style/Cookbook3.Button</item>

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

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

    <!-- Apptentive Message Center -->
    <item name="apptentiveMessageCenterToolbarStyle">@style/Cookbook3.MessageCenter.Toolbar</item>
    <item name="apptentiveMessageCenterBubbleColorInbound">#B0243C</item>
    <item name="apptentiveMessageCenterBubbleColorOutbound">#F3F3F3</item>
    <item name="apptentiveMessageCenterColorComposerOutline">#056E0F</item>
    <item name="apptentiveMessageCenterViewSeparatorStyle">@style/Cookbook3.MessageCenter.View.Separator.Style</item>
    <item name="apptentiveMessageCenterComposerStyle">@style/Cookbook3.MessageCenter.Composer.Style</item>
</style>

And there we have it! A completely custom design for every Alchemer Mobile interaction for Cookbook Design 3!

Basic Standard Market Research HR Professional Full Access Reporting
Free Individual Team & Enterprise
Feature Included In
Related Articles
START A TRIAL
  • Author: Chris Minnich
  • Share This Article:
  • Last updated: 10/18/2024 3:01 pm MDT
How helpful was this article?
Thank you for your feedback!
In This Article
Available on these Plans
See License Grid
Learn even more
Instructor-Led Virtual Training
Available to Enterprise Customers
Basic Training Information Sheet
Business Labs Information Sheet
 

Self-serve Learning Content
Alchemer University offers free, self-paced e-learning courses to help you get up to speed quickly.
© 2020 Alchemer LLC | All rights reserved.