This design is created in a generic “banking 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 2

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

Alchemer Mobile Rating DialogAlchemer Mobile Message Center

Alchemer Mobile Love DialogAlchemer Mobile PromptAlchemer Mobile SurveyHomepage (No interaction)

This design highlights custom UI configurations like:

All Interactions
- Outline buttons with rounded corners
Love Dialog
- Header image
- Vertical buttons
Prompt (formerly Notes)
- Header image
Survey
- Custom toolbar background
- Small header within the toolbar
- Footer text
Alchemer Mobile Rating Dialog
- Header image
Alchemer MobileMessage Center
- Header Image
- Toolbar separator line

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, Prompt, and Alchemer Mobile Rating Dialog.

We named these cookbook_2_love_dialog_header, cookbook_2_note_header, and cookbook_2_rating_dialog_header. You’ll see them referenced within the code blocks for the Love Dialog, Prompt, and Rating Dialog.

Design 2 Prompt header image

Design 2 Alchemer Mobile Rating Dialog header image

Design 2 Love Dialog header image

Survey toolbar background

Used in: Survey

This allows us to give the toolbar a divider line between the toolbar and the survey screen. We named this one cookbook_2_survey_toolbar_background.xml and you’ll see it referenced within the code block for the survey toolbar.

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <solid android:color="?colorPrimary" />
        </shape>
    </item>

    <item
        android:bottom="3dp">
        <shape android:shape="rectangle">
            <solid android:color="?android:colorBackground" />
        </shape>
    </item>

</layer-list>

Survey toolbar header image (small)

Used in: Survey

Adding a small header image to a survey is possible in multiple ways. We can use a PNG, but vectors (SVG) are more versatile, customizable, and scalable, so they’re recommended.

We named this one cookbook_2_survey_header.xml and you’ll see it referenced within the code block for the survey small header image

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

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="241dp"
    android:height="33dp"
    android:viewportWidth="241"
    android:viewportHeight="33">
  <path
      android:pathData="M48.21,8.34C49.39,8.34 50.43,8.51 51.3,8.87C52.19,9.22 52.87,9.7 53.36,10.33C53.86,10.96 54.11,11.69 54.11,12.53C54.11,13.26 53.93,13.89 53.58,14.42C53.23,14.95 52.78,15.37 52.22,15.68C52.67,15.84 53.08,16.05 53.47,16.31C53.86,16.55 54.16,16.87 54.39,17.27C54.64,17.67 54.76,18.2 54.76,18.84C54.76,19.64 54.5,20.4 53.98,21.1C53.47,21.78 52.76,22.34 51.86,22.77C50.96,23.19 49.92,23.4 48.76,23.4C48.1,23.4 47.37,23.36 46.55,23.29C45.73,23.23 44.95,23.15 44.21,23.05C43.48,22.95 42.88,22.85 42.43,22.75V8.89C43.3,8.72 44.22,8.59 45.2,8.49C46.17,8.39 47.17,8.34 48.21,8.34ZM48.36,11.97C47.63,11.97 46.99,12.02 46.44,12.14V14.61H48.46C48.94,14.61 49.34,14.49 49.67,14.27C50,14.04 50.16,13.7 50.16,13.26C50.16,12.87 49.99,12.56 49.64,12.33C49.32,12.09 48.89,11.97 48.36,11.97ZM46.44,19.59C46.74,19.69 47.1,19.77 47.52,19.81C47.93,19.84 48.26,19.85 48.48,19.85C49.07,19.85 49.54,19.74 49.9,19.51C50.27,19.28 50.46,18.94 50.46,18.5C50.46,18.07 50.25,17.76 49.84,17.57C49.42,17.39 48.92,17.29 48.33,17.29H46.44V19.59ZM62.31,11.79C62.88,11.79 63.44,11.92 63.99,12.18C64.54,12.42 65,12.74 65.36,13.13V12.12H69.06V23.07H65.36V21.25C65.09,21.85 64.67,22.36 64.12,22.77C63.56,23.19 62.88,23.4 62.1,23.4C61.28,23.4 60.51,23.19 59.8,22.77C59.08,22.36 58.49,21.72 58.04,20.86C57.59,19.99 57.37,18.89 57.37,17.57C57.37,16.34 57.59,15.3 58.04,14.44C58.49,13.58 59.1,12.93 59.84,12.48C60.6,12.02 61.42,11.79 62.31,11.79ZM63.08,15.4C62.55,15.4 62.11,15.62 61.75,16.05C61.41,16.48 61.24,16.99 61.24,17.57C61.24,18.16 61.42,18.66 61.77,19.06C62.13,19.46 62.6,19.66 63.19,19.66C63.51,19.66 63.83,19.58 64.16,19.42C64.49,19.25 64.77,19 65,18.67C65.24,18.33 65.36,17.89 65.36,17.36V16.31C65.05,16.05 64.69,15.83 64.29,15.66C63.9,15.49 63.5,15.4 63.08,15.4ZM76.76,12.12V13.53C77.1,13.06 77.52,12.65 78.01,12.31C78.51,11.97 79.12,11.79 79.85,11.79C80.97,11.79 81.88,12.17 82.58,12.93C83.3,13.69 83.66,14.82 83.66,16.31V23.07H79.96L79.94,16.89C79.94,16.34 79.79,15.96 79.49,15.75C79.19,15.52 78.85,15.4 78.48,15.4C78.08,15.4 77.74,15.51 77.47,15.73C77.2,15.93 76.96,16.17 76.76,16.46V23.07H73.06V12.12H76.76ZM91.25,7.61V16.52L94.75,12.12H99.22L94.8,16.84L99.42,23.07H94.75L92.43,19.38L91.25,20.62V23.07H87.56V7.61H91.25Z"
      android:fillColor="#056E0F"/>
  <path
      android:pathData="M106.47,8.68V19.53H112.94V23.07H102.46V8.68H106.47ZM122,11.79C122.76,11.79 123.5,11.94 124.21,12.22C124.93,12.51 125.57,12.91 126.14,13.43C126.72,13.94 127.17,14.56 127.5,15.28C127.84,15.98 128.01,16.75 128.01,17.6C128.01,18.44 127.84,19.22 127.5,19.94C127.17,20.64 126.72,21.25 126.14,21.76C125.57,22.28 124.93,22.68 124.21,22.97C123.5,23.25 122.76,23.4 122,23.4C121.24,23.4 120.5,23.25 119.79,22.97C119.07,22.68 118.42,22.28 117.85,21.76C117.28,21.25 116.82,20.64 116.48,19.94C116.15,19.22 115.98,18.44 115.98,17.6C115.98,16.75 116.15,15.98 116.48,15.28C116.82,14.56 117.28,13.94 117.85,13.43C118.42,12.91 119.07,12.51 119.79,12.22C120.5,11.94 121.24,11.79 122,11.79ZM122,15.34C121.74,15.34 121.45,15.4 121.12,15.51C120.8,15.63 120.53,15.85 120.3,16.18C120.07,16.49 119.96,16.97 119.96,17.6C119.96,18.21 120.07,18.68 120.3,19.01C120.53,19.34 120.8,19.56 121.12,19.68C121.45,19.79 121.74,19.85 122,19.85C122.27,19.85 122.56,19.79 122.88,19.68C123.19,19.56 123.47,19.34 123.69,19.01C123.92,18.68 124.04,18.21 124.04,17.6C124.04,16.97 123.92,16.49 123.69,16.18C123.47,15.85 123.19,15.63 122.88,15.51C122.56,15.4 122.27,15.34 122,15.34ZM135.46,11.79C136.03,11.79 136.59,11.92 137.13,12.18C137.69,12.42 138.15,12.74 138.51,13.13V12.12H142.21V22.75C142.21,23.91 141.92,24.92 141.35,25.78C140.77,26.65 140.01,27.33 139.07,27.82C138.12,28.31 137.09,28.55 135.95,28.55C135.04,28.55 134.24,28.42 133.57,28.17C132.9,27.92 132.22,27.58 131.55,27.13V23.87C132.01,24.13 132.42,24.36 132.79,24.56C133.18,24.76 133.6,24.91 134.04,25.03C134.49,25.16 135.01,25.22 135.61,25.22C136.5,25.22 137.2,24.97 137.71,24.47C138.24,23.97 138.51,23.4 138.51,22.77V21.25C138.24,21.85 137.82,22.36 137.26,22.77C136.71,23.19 136.03,23.4 135.24,23.4C134.43,23.4 133.66,23.19 132.95,22.77C132.23,22.36 131.64,21.72 131.18,20.86C130.74,19.99 130.52,18.89 130.52,17.57C130.52,16.34 130.74,15.3 131.18,14.44C131.64,13.58 132.24,12.93 132.99,12.48C133.75,12.02 134.57,11.79 135.46,11.79ZM136.23,15.4C135.7,15.4 135.26,15.62 134.9,16.05C134.56,16.48 134.38,16.99 134.38,17.57C134.38,18.16 134.56,18.66 134.92,19.06C135.28,19.46 135.75,19.66 136.34,19.66C136.65,19.66 136.98,19.58 137.31,19.42C137.64,19.25 137.91,19 138.15,18.67C138.39,18.33 138.51,17.89 138.51,17.36V16.31C138.2,16.05 137.84,15.83 137.44,15.66C137.05,15.49 136.65,15.4 136.23,15.4ZM151.48,11.79C152.24,11.79 152.97,11.94 153.69,12.22C154.41,12.51 155.05,12.91 155.62,13.43C156.2,13.94 156.65,14.56 156.98,15.28C157.32,15.98 157.49,16.75 157.49,17.6C157.49,18.44 157.32,19.22 156.98,19.94C156.65,20.64 156.2,21.25 155.62,21.76C155.05,22.28 154.41,22.68 153.69,22.97C152.97,23.25 152.24,23.4 151.48,23.4C150.72,23.4 149.98,23.25 149.26,22.97C148.55,22.68 147.9,22.28 147.33,21.76C146.76,21.25 146.3,20.64 145.96,19.94C145.63,19.22 145.46,18.44 145.46,17.6C145.46,16.75 145.63,15.98 145.96,15.28C146.3,14.56 146.76,13.94 147.33,13.43C147.9,12.91 148.55,12.51 149.26,12.22C149.98,11.94 150.72,11.79 151.48,11.79ZM151.48,15.34C151.22,15.34 150.93,15.4 150.6,15.51C150.28,15.63 150.01,15.85 149.78,16.18C149.55,16.49 149.44,16.97 149.44,17.6C149.44,18.21 149.55,18.68 149.78,19.01C150.01,19.34 150.28,19.56 150.6,19.68C150.93,19.79 151.22,19.85 151.48,19.85C151.75,19.85 152.04,19.79 152.36,19.68C152.67,19.56 152.95,19.34 153.17,19.01C153.4,18.68 153.52,18.21 153.52,17.6C153.52,16.97 153.4,16.49 153.17,16.18C152.95,15.85 152.67,15.63 152.36,15.51C152.04,15.4 151.75,15.34 151.48,15.34Z"
      android:fillColor="#54AA5B"/>
  <path
      android:pathData="M169.84,19.53V23.07H160.96V19.53H163.39V12.22H160.96V8.68H169.84V12.22H167.41V19.53H169.84ZM181.02,11.79C181.84,11.79 182.6,12 183.32,12.42C184.05,12.83 184.64,13.47 185.08,14.33C185.52,15.19 185.75,16.28 185.75,17.62C185.75,18.85 185.52,19.89 185.06,20.75C184.62,21.61 184.01,22.27 183.25,22.73C182.51,23.17 181.69,23.4 180.8,23.4C180.23,23.4 179.67,23.27 179.11,23.03C178.56,22.77 178.11,22.45 177.75,22.06V28.23H174.06V12.12H177.75V13.94C178.03,13.34 178.44,12.83 179,12.42C179.56,12 180.23,11.79 181.02,11.79ZM179.92,15.53C179.62,15.53 179.3,15.62 178.96,15.79C178.63,15.95 178.34,16.2 178.1,16.54C177.87,16.87 177.75,17.3 177.75,17.83V18.88C178.08,19.14 178.44,19.36 178.83,19.53C179.23,19.7 179.63,19.79 180.03,19.79C180.58,19.79 181.02,19.57 181.36,19.14C181.71,18.7 181.88,18.19 181.88,17.62C181.88,17.03 181.7,16.54 181.34,16.13C180.98,15.73 180.51,15.53 179.92,15.53ZM192.83,11.79C193.54,11.79 194.2,11.9 194.8,12.12C195.42,12.32 195.91,12.6 196.29,12.95V15.86C195.91,15.63 195.49,15.41 195.02,15.21C194.54,15 194.04,14.89 193.49,14.89C193.15,14.89 192.84,14.96 192.57,15.1C192.31,15.23 192.18,15.44 192.18,15.73C192.18,15.93 192.26,16.08 192.42,16.18C192.58,16.28 192.88,16.39 193.34,16.5L194.01,16.67C195.91,17.16 196.87,18.18 196.87,19.74C196.87,20.46 196.65,21.1 196.22,21.66C195.8,22.2 195.25,22.63 194.57,22.95C193.89,23.25 193.16,23.4 192.38,23.4C191.56,23.4 190.8,23.28 190.1,23.05C189.4,22.81 188.79,22.52 188.29,22.17V19.29C188.81,19.61 189.39,19.87 190.03,20.09C190.69,20.3 191.28,20.41 191.79,20.41C192.21,20.41 192.51,20.36 192.7,20.26C192.9,20.16 193,19.98 193,19.72C193,19.52 192.88,19.37 192.65,19.27C192.43,19.16 192.1,19.03 191.67,18.88L190.57,18.54C189.77,18.3 189.18,17.92 188.81,17.4C188.44,16.87 188.25,16.23 188.25,15.47C188.25,14.71 188.45,14.06 188.85,13.51C189.25,12.97 189.8,12.55 190.48,12.25C191.19,11.95 191.97,11.79 192.83,11.79ZM210.18,12.12V18.69C210.18,19.68 209.95,20.52 209.49,21.23C209.04,21.93 208.43,22.47 207.64,22.84C206.85,23.21 205.95,23.4 204.93,23.4C203.92,23.4 203.01,23.21 202.23,22.84C201.44,22.47 200.82,21.93 200.36,21.23C199.91,20.52 199.69,19.68 199.69,18.69V12.12H203.39L203.41,17.7C203.41,18.45 203.52,18.99 203.75,19.34C203.99,19.68 204.39,19.85 204.93,19.85C205.48,19.85 205.87,19.68 206.09,19.34C206.34,18.99 206.46,18.45 206.46,17.7L206.48,12.12H210.18ZM217.77,12.12V13.53C218.12,13.06 218.48,12.65 218.87,12.31C219.25,11.97 219.81,11.79 220.54,11.79C221.27,11.79 221.93,11.97 222.5,12.31C223.07,12.64 223.52,13.13 223.85,13.79C224.2,13.22 224.65,12.75 225.21,12.37C225.78,11.99 226.41,11.79 227.12,11.79C228.23,11.79 229.14,12.17 229.85,12.93C230.56,13.69 230.92,14.82 230.92,16.31V23.07H227.23L227.2,16.89C227.2,16.34 227.06,15.96 226.77,15.75C226.5,15.52 226.18,15.4 225.81,15.4C225.48,15.4 225.19,15.5 224.95,15.7C224.72,15.91 224.52,16.13 224.35,16.39V23.07H220.65L220.63,16.89C220.63,16.34 220.49,15.96 220.2,15.75C219.93,15.52 219.6,15.4 219.23,15.4C218.9,15.4 218.62,15.51 218.4,15.73C218.18,15.93 217.97,16.17 217.77,16.46V23.07H214.08V12.12H217.77Z"
      android:fillColor="#78BF7F"/>
  <path
      android:pathData="M13.54,28.76L10.7,23.86L14.86,16.68L17.5,21.25L33.1,21.24L28.67,28.83L13.54,28.76Z"
      android:fillColor="#78BF7F"/>
  <path
      android:pathData="M35.88,16.37L33.05,21.28L24.75,21.27L27.39,16.69L19.59,3.19L28.37,3.23L35.88,16.37Z"
      android:fillColor="#54AA5B"/>
  <path
      android:pathData="M13.97,3.17H19.64L23.78,10.36L18.49,10.36L10.7,23.87L6.35,16.24L13.97,3.17Z"
      android:fillColor="#056E0F"/>
  <path
      android:pathData="M20.33,2.03L20.31,2H13.3L5,16.23L10.7,26.21L10.71,26.19L12.86,29.93L29.34,30L35.13,20.08H35.09L37.23,16.38L29.05,2.07L20.33,2.03ZM25.75,11.52H25.79L21.67,4.37L27.69,4.39L34.54,16.37L32.4,20.08L26.78,20.08L28.74,16.69L25.75,11.52ZM18.9,4.33L21.71,9.19L17.82,9.19L11.16,20.74L10.71,21.52L7.69,16.25L14.64,4.33H18.9ZM16.2,16.67L19.17,11.52L23.06,11.52L26.05,16.69L24.09,20.08L18.17,20.09L16.2,16.67ZM12.05,23.86L13.18,21.9L14.86,19L16.83,22.42L22.74,22.42L22.73,22.43L31.05,22.44L28,27.66L14.21,27.6L12.05,23.86Z"
      android:fillColor="#333237"
      android:fillType="evenOdd"/>
</vector>

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 sen font is from Google Fonts

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

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

    <!-- Survey -->
    <item name="colorPrimary">#056E0F</item>
    <item name="colorOnPrimary">#FFFFFF</item>
    <item name="android:colorBackground">#FFFFFF</item>
    <item name="colorOnBackground">#3A4C5F</item>

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

Button style

Used in: Love Dialog, 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="Cookbook2.Button" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="android:paddingTop">10dp</item>
    <item name="android:paddingBottom">10dp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:fontFamily">@font/sen</item>
    <item name="android:textColor">?colorOnSurface</item>
    <item name="android:textSize">15sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:minWidth">192dp</item>
    <item name="cornerRadius">10dp</item>
    <item name="strokeColor">?colorSecondary</item>
    <item name="strokeWidth">3dp</item>
</style>

Dialog layouts

Used in: Love Dialog, Prompt, and Survey (close 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="Cookbook2.Dialog.Layout" parent="">
    <item name="android:background">?colorSurface</item>
</style>

Dialog header images

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

We use some negative padding here to cover up a margin that the Android system likes to create for Dialogs.

<style name="Cookbook2.Dialog.HeaderImage" parent="">
    <item name="android:adjustViewBounds">true</item>
    <item name="android:layout_marginBottom">4dp</item>
    <item name="android:paddingStart">-2dp</item>
    <item name="android:paddingEnd">-2dp</item>
</style>

Dialog title text style

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

The text style for all dialog titles look the same, so we can share this style between all of them.

<style name="Cookbook2.Dialog.Title" parent="Apptentive.TextAppearance.Title.Dialog.WithMessage">
    <item name="android:textStyle">bold</item>
    <item name="android:paddingTop">12dp</item>
    <item name="android:paddingStart">24dp</item>
    <item name="android:paddingEnd">24dp</item>
</style>

Dialog message style

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

We already have a title style defined that we’ll be sharing between all dialogs. We just need to adjust our message style.

<style name="Cookbook2.Dialog.Message" parent="Apptentive.TextAppearance.Message.Dialog">
    <item name="android:textSize">16sp</item>
    <item name="android:paddingTop">8dp</item>
    <item name="android:paddingStart">24dp</item>
    <item name="android:paddingEnd">24dp</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="Cookbook2.Dialog.ButtonLayout" parent="">
    <item name="android:orientation">vertical</item>
    <item name="android:gravity">center</item>
    <item name="android:paddingTop">20dp</item>
    <item name="android:paddingBottom">16dp</item>
</style>

<style name="Cookbook2.Dialog.Button.Borderless" parent="Apptentive.Widget.Dialog.Button">
    <item name="android:textColor">?colorOnSurface</item>
    <item name="android:textStyle">bold</item>
    <item name="android:minWidth">192dp</item>
    <item name="android:gravity">center</item>
    <item name="cornerRadius">10dp</item>
</style>

1. The Love Dialog

Design 2 Love Dialog

The layout

Uses apptentiveLoveDialogLayoutStyle.

We can use the Cookbook2.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="Cookbook2.Dialog.HeaderImage.LoveDialog">
    <item name="android:src">@drawable/cookbook_2_love_dialog_header</item>
</style>

The title

Uses apptentiveLoveDialogTitleStyle.

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

The buttons and button layout

Uses apptentiveLoveDialogButtonLayoutStyle, apptentiveLoveDialogButtonLayoutStyleAlternate, apptentiveLoveDialogYesButtonStyleAlternate, and apptentiveLoveDialogNoButtonStyleAlternate.

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 Cookbook2.Dialog.ButtonLayoutstyle 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.

We can use theCookbook2.Buttonand Cookbook2.Button.Borderless styles that we created earlier for the buttons.

We’ll just have to create a style to tell the default button layout to not show.

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

The styles

<item name="apptentiveFontFamilyDefault">@font/sen</item>
<item name="colorSecondary">#34993E</item>
<item name="apptentiveHeaderAlpha">1</item>
<item name="apptentiveSubheaderAlpha">.8</item>
<item name="apptentiveTextSizeDefault">15sp</item>
<item name="colorSurface">#FFFFFF</item>
<item name="colorOnSurface">#3A4C5F</item>

<item name="apptentiveLoveDialogLayoutStyle">@style/Cookbook2.Dialog.Layout</item>
<item name="apptentiveLoveDialogHeaderImageStyle">@style/Cookbook2.Dialog.HeaderImage.LoveDialog</item>
<item name="apptentiveLoveDialogTitleStyle">@style/Cookbook2.Dialog.Title</item>
<item name="apptentiveLoveDialogButtonLayoutStyle">@style/Cookbook2.Dialog.ButtonLayout.LoveDialog</item>
<item name="apptentiveLoveDialogButtonLayoutStyleAlternate">@style/Cookbook2.Dialog.ButtonLayout</item>
<item name="apptentiveLoveDialogYesButtonStyleAlternate">@style/Cookbook2.Button</item>
<item name="apptentiveLoveDialogNoButtonStyleAlternate">@style/Cookbook2.Button.Borderless</item>

2. The Prompt (formerly Notes)

Design 2 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 Alchemer Mobile designs for each interaction to include a header image.

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

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

The titles and message

Uses apptentiveNoteTitleWithMessageTextStyle, apptentiveNoteTitleOrMessageOnlyTextStyle, and apptentiveNoteMessageTextStyle.

We can use the Cookbook2.Dialog.Title and the Cookbook2.Dialog.Message styles that we created earlier.

The buttons and button layout

Uses apptentiveNoteButtonLayoutStyle, apptentiveNoteButtonStyle, and apptentiveNoteDismissButtonStyle.

We can use the Cookbook2.Dialog.ButtonLayoutthat we created earlier for the button layout.

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

The styles

<item name="apptentiveFontFamilyDefault">@font/sen</item>
<item name="colorSecondary">#34993E</item>
<item name="apptentiveHeaderAlpha">1</item>
<item name="apptentiveSubheaderAlpha">.8</item>
<item name="apptentiveTextSizeDefault">15sp</item>
<item name="colorSurface">#FFFFFF</item>
<item name="colorOnSurface">#3A4C5F</item>

<item name="apptentiveNoteLayoutStyle">@style/Cookbook2.Dialog.Layout</item>
<item name="apptentiveNoteHeaderImageStyle">@style/Cookbook2.Dialog.HeaderImage.Note</item>
<item name="apptentiveNoteTitleWithMessageTextStyle">@style/Cookbook2.Dialog.Title</item>
<item name="apptentiveNoteTitleOrMessageOnlyTextStyle">@style/Cookbook2.Dialog.Title</item>
<item name="apptentiveNoteMessageTextStyle">@style/Cookbook2.Dialog.Message</item>
<item name="apptentiveNoteButtonLayoutStyle">@style/Cookbook2.Dialog.ButtonLayout</item>
<item name="apptentiveNoteButtonStyle">@style/Cookbook2.Button</item>
<item name="apptentiveNoteDismissButtonStyle">@style/Cookbook2.Button.Borderless</item>

3. The Survey

Design 2 Survey

The toolbar and bottom app bar

Uses apptentiveSurveyToolbarStyle and apptentiveSurveyBottomAppBarStyle.

The toolbar uses the survey header drawable we created.

The bottom app bar is slightly bigger than our Alchemer Mobile design.

<style name="Cookbook2.Survey.Toolbar" parent="Apptentive.Widget.Survey.Toolbar">
    <item name="android:background">@drawable/cookbook_2_survey_toolbar_background</item>
    <item name="navigationIconTint">?colorOnBackground</item>
</style>

<style name="Cookbook2.Survey.BottomAppBar" parent="">
    <item name="android:background">?colorPrimary</item>
    <item name="android:minHeight">44dp</item>
</style>

The small header image

Uses apptentiveSurveyTitleStyle and apptentiveSurveyHeaderImageStyle.

To include a small header image into the toolbar we’ll want to hide the title text that is present, then we can add the image src and give it a center layout_gravity.

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

<style name="Cookbook2.Survey.HeaderImage" parent="">
    <item name="android:src">@drawable/cookbook_2_survey_header</item>
    <item name="android:layout_gravity">center</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>
    <item name="android:layout_marginTop">8dp</item>
</style>

The footer text

Uses apptentiveSurveyFootnoteStyle

This is another hidden element within our UI that allows you to add footer text to your survey.

<style name="Cookbook2.Survey.Footnote" parent="">
    <item name="android:fontFamily">@font/sen</item>
    <item name="android:textColor">?colorOnBackground</item>
    <item name="android:textSize">11sp</item>
    <item name="android:gravity">center</item>
    <item name="android:paddingStart">16dp</item>
    <item name="android:paddingEnd">16dp</item>
    <item name="android:layout_marginTop">16dp</item>
    <item name="android:layout_marginBottom">16dp</item>
    <item name="android:text">Note: Our company policy for submission does not allow us to accept ideas or materials we have not specifically requested.</item>
</style>

The submit button

Uses apptentiveSurveySubmitButtonStyle.

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

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.

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 Cookbook2.Dialog.Title, Cookbook2.Dialog.Message, Cookbook2.Dialog.ButtonLayout.Stacked, andCookbook2.Button styles we created earlier.

The styles

<item name="apptentiveFontFamilyDefault">@font/sen</item>
<item name="colorSecondary">#34993E</item>
<item name="apptentiveHeaderAlpha">1</item>
<item name="apptentiveSubheaderAlpha">.8</item>
<item name="apptentiveTextSizeDefault">15sp</item>
<item name="colorPrimary">#056E0F</item>
<item name="colorOnPrimary">#FFFFFF</item>
<item name="android:colorBackground">#FFFFFF</item>
<item name="colorOnBackground">#3A4C5F</item>
<item name="android:statusBarColor">#FFFFFF</item>
<item name="android:windowLightStatusBar" tools:ignore="NewApi">true</item>

<item name="apptentiveSurveyToolbarStyle">@style/Cookbook2.Survey.Toolbar</item>
<item name="apptentiveSurveyBottomAppBarStyle">@style/Cookbook2.Survey.BottomAppBar</item>
<item name="apptentiveSurveyTitleStyle">@style/Cookbook2.Survey.Title</item>
<item name="apptentiveSurveyHeaderImageStyle">@style/Cookbook2.Survey.HeaderImage</item>
<item name="apptentiveSurveyIntroductionStyle">@style/Cookbook2.Survey.Introduction</item>
<item name="apptentiveSurveyFootnoteStyle">@style/Cookbook2.Survey.Footnote</item>
<item name="apptentiveSurveySubmitButtonStyle">@style/Cookbook2.Button</item>

<item name="apptentiveGenericDialogTitleTextStyle">@style/Cookbook2.Dialog.Title</item>
<item name="apptentiveGenericDialogMessageTextStyle">@style/Cookbook2.Dialog.Message</item>
<item name="apptentiveGenericDialogButtonLayoutStyle">@style/Cookbook2.Dialog.ButtonLayout.Stacked</item>
<item name="apptentiveGenericDialogPositiveButtonStyle">@style/Cookbook2.Button</item>
<item name="apptentiveGenericDialogNegativeButtonStyle">@style/Cookbook2.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 2 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="Cookbook2.Dialog.Layout.RatingDialog">
    <item name="android:paddingBottom">20dp</item>
</style>

The header image

Uses apptentiveRatingDialogHeaderImageStyle.

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 the Apptentive Rating Dialog while leveraging the shared style.

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

The title

Uses apptentiveRatingDialogTitleTextStyle.

A different alignment and some additional padding are needed.

<style name="Cookbook2.Dialog.Title.RatingDialog">
    <item name="android:textAlignment">center</item>
    <item name="android:paddingTop">20dp</item>
    <item name="android:paddingBottom">16dp</item>
</style>

The message

Uses apptentiveRatingDialogMessageTextStyle.

We can use the Cookbook2.Dialog.Message style we created earlier.

The buttons

Uses apptentiveRatingDialogButtonRateStyle, apptentiveRatingDialogButtonRemindStyle, and apptentiveRatingDialogButtonDeclineStyle.

We can utilize most code from the Cookbook2.Buttonand Cookbook2.Button.Borderless styles.

<style name="Cookbook2.Button.RatingDialog">
    <item name="android:layout_gravity">center</item>
    <item name="android:layout_marginTop">12dp</item>
    <item name="android:layout_marginBottom">4dp</item>
</style>

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

The styles

<item name="apptentiveFontFamilyDefault">@font/sen</item>
<item name="colorSecondary">#34993E</item>
<item name="apptentiveHeaderAlpha">1</item>
<item name="apptentiveSubheaderAlpha">.8</item>
<item name="apptentiveTextSizeDefault">15sp</item>
<item name="colorSurface">#FFFFFF</item>
<item name="colorOnSurface">#3A4C5F</item>

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

5. Message Center

Design 2 Alchemer Mobile Message Center

The toolbar

Design 2 Message Center Toolbar

<item name="apptentiveMessageCenterToolbarStyle">@style/Cookbook2.MessageCenter.Toolbar</item>
<item name="apptentiveMessageCenterToolbarTitleStyle">@style/Cookbook2.MessageCenter.Title</item>
<item name="apptentiveMessageCenterFillColorIcon">#3A4C5F</item>

<style name="Cookbook2.MessageCenter.Toolbar" parent="Apptentive.Widget.MessageCenter.Toolbar">
    <item name="android:background">@drawable/cookbook_2_survey_toolbar_background</item>
    <item name="navigationIconTint">#3A4C5F</item>
    <item name="android:layout_gravity">center</item>
</style>

<style name="Cookbook2.MessageCenter.Title" parent="">
    <item name="android:background">@drawable/cookbook_2_survey_header</item>
    <item name="android:textColor">#00000000</item>
</style>

Bubble colors

Design 2 Message Center Message Bubbles

<item name="apptentiveMessageCenterBubbleColorOutbound">#F3F3F3</item>
<item name="apptentiveMessageCenterBubbleColorInbound">#056E0F</item>

Attachment and send icons

Design 2 Message Center Attachment Button

<item name="apptentiveMessageCenterFillColorSendIconBackground">#056E0F</item>
<item name="apptentiveMessageCenterFillColorAttachmentIconBackground">#056E0F</item>

Compose section

Design 2 Message Center Compose Section

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

<style name="Cookbook2.MessageCenter.View.Separator.Style" parent="Apptentive.Widget.Separator">
    <item name="android:background">#3A4C5F</item>
</style>

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

The styles

<item name="apptentiveMessageCenterToolbarStyle">@style/Cookbook2.MessageCenter.Toolbar</item>
<item name="apptentiveMessageCenterToolbarTitleStyle">@style/Cookbook2.MessageCenter.Title</item>
<item name="apptentiveMessageCenterFillColorSendIconBackground">#056E0F</item>
<item name="apptentiveMessageCenterFillColorAttachmentIconBackground">#056E0F</item>
<item name="apptentiveMessageCenterBubbleColorOutbound">#F3F3F3</item>
<item name="apptentiveMessageCenterBubbleColorInbound">#056E0F</item>
<item name="apptentiveMessageCenterColorComposerOutline">#056E0F</item>
<item name="apptentiveMessageCenterViewSeparatorStyle">@style/Cookbook2.MessageCenter.View.Separator.Style</item>
<item name="apptentiveMessageCenterComposerStyle">@style/Cookbook2.MessageCenter.Composer.Style</item>
<item name="apptentiveMessageCenterFillColorIcon">#3A4C5F</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="Cookbook2.Button" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="android:paddingTop">10dp</item>
    <item name="android:paddingBottom">10dp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:fontFamily">@font/sen</item>
    <item name="android:textColor">?colorOnSurface</item>
    <item name="android:textSize">15sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:minWidth">192dp</item>
    <item name="cornerRadius">10dp</item>
    <item name="strokeColor">?colorSecondary</item>
    <item name="strokeWidth">3dp</item>
</style>

<!-- Dialogs -->
<style name="Cookbook2.Dialog.Layout" parent="">
    <item name="android:background">?colorSurface</item>
</style>

<style name="Cookbook2.Dialog.HeaderImage" parent="">
    <item name="android:adjustViewBounds">true</item>
    <item name="android:layout_marginBottom">4dp</item>
    <item name="android:paddingStart">-2dp</item>
    <item name="android:paddingEnd">-2dp</item>
</style>

<style name="Cookbook2.Dialog.Title" parent="Apptentive.TextAppearance.Title.Dialog.WithMessage">
    <item name="android:textStyle">bold</item>
    <item name="android:paddingTop">12dp</item>
    <item name="android:paddingStart">24dp</item>
    <item name="android:paddingEnd">24dp</item>
</style>

<style name="Cookbook2.Dialog.Message" parent="Apptentive.TextAppearance.Message.Dialog">
    <item name="android:lineSpacingExtra">3sp</item>
    <item name="android:paddingTop">8dp</item>
    <item name="android:paddingStart">24dp</item>
    <item name="android:paddingEnd">24dp</item>
</style>

<style name="Cookbook2.Dialog.ButtonLayout.Stacked" parent="">
    <item name="android:orientation">vertical</item>
    <item name="android:gravity">center</item>
    <item name="android:paddingTop">20dp</item>
    <item name="android:paddingBottom">16dp</item>
</style>

<style name="Cookbook2.Button.Borderless" parent="Apptentive.Widget.Dialog.Button">
    <item name="android:textColor">?colorOnSurface</item>
    <item name="android:textStyle">bold</item>
    <item name="android:minWidth">192dp</item>
    <item name="android:gravity">center</item>
    <item name="cornerRadius">10dp</item>
</style>

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

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

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

<!-- Survey -->
<style name="Cookbook2.Survey.Toolbar" parent="Apptentive.Widget.Survey.Toolbar">
    <item name="android:background">@drawable/cookbook_2_survey_toolbar_background</item>
    <item name="navigationIconTint">?colorOnBackground</item>
</style>

<style name="Cookbook2.Survey.BottomAppBar" parent="">
    <item name="android:background">?colorPrimary</item>
    <item name="android:minHeight">44dp</item>
</style>

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

<style name="Cookbook2.Survey.HeaderImage" parent="">
    <item name="android:src">@drawable/cookbook_2_survey_header</item>
    <item name="android:layout_gravity">center</item>
</style>

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

<style name="Cookbook2.Survey.Footnote" parent="">
    <item name="android:fontFamily">@font/sen</item>
    <item name="android:textColor">?colorOnBackground</item>
    <item name="android:textSize">11sp</item>
    <item name="android:gravity">center</item>
    <item name="android:paddingStart">16dp</item>
    <item name="android:paddingEnd">16dp</item>
    <item name="android:layout_marginTop">16dp</item>
    <item name="android:layout_marginBottom">16dp</item>
    <item name="android:text">Note: Our company policy for submission does not allow us to accept ideas or materials we have not specifically requested.</item>
</style>

<!-- Rating Dialog -->
<style name="Cookbook2.Dialog.Layout.RatingDialog">
    <item name="android:paddingBottom">20dp</item>
</style>

<style name="Cookbook2.Dialog.HeaderImage.RatingDialog">
    <item name="android:src">@drawable/cookbook_2_rating_dialog_header</item>
</style>

<style name="Cookbook2.Dialog.Title.RatingDialog">
    <item name="android:textAlignment">center</item>
    <item name="android:paddingTop">20dp</item>
    <item name="android:paddingBottom">16dp</item>
</style>

<style name="Cookbook2.Button.RatingDialog">
    <item name="android:layout_gravity">center</item>
    <item name="android:layout_marginTop">12dp</item>
    <item name="android:layout_marginBottom">4dp</item>
</style>

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

<!-- Message Center -->
<style name="Cookbook2.MessageCenter.Toolbar" parent="Apptentive.Widget.MessageCenter.Toolbar">
    <item name="android:background">@drawable/cookbook_2_survey_toolbar_background</item>
    <item name="navigationIconTint">#3A4C5F</item>
    <item name="android:layout_gravity">center</item>
</style>

<style name="Cookbook2.MessageCenter.Title" parent="">
    <item name="android:background">@drawable/cookbook_2_survey_header</item>
    <item name="android:textColor">#00000000</item>
</style>

<style name="Cookbook2.MessageCenter.View.Separator.Style" parent="Apptentive.Widget.Separator">
    <item name="android:background">#3A4C5F</item>
</style>

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

Setting the styles

<!-- Cookbook 2 -->
<style name="ApptentiveThemeOverride">
    <!-- All Interactions -->
    <item name="apptentiveFontFamilyDefault">@font/sen</item>
    <item name="colorSecondary">#34993E</item>
    <item name="apptentiveHeaderAlpha">1</item>
    <item name="apptentiveSubheaderAlpha">.8</item>
    <item name="apptentiveTextSizeDefault">15sp</item>

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

    <!-- Love Dialog -->
    <item name="apptentiveLoveDialogLayoutStyle">@style/Cookbook2.Dialog.Layout</item>
    <item name="apptentiveLoveDialogHeaderImageStyle">@style/Cookbook2.Dialog.HeaderImage.LoveDialog</item>
    <item name="apptentiveLoveDialogTitleStyle">@style/Cookbook2.Dialog.Title</item>
    <item name="apptentiveLoveDialogButtonLayoutStyle">@style/Cookbook2.Dialog.ButtonLayout.LoveDialog</item>
    <item name="apptentiveLoveDialogButtonLayoutStyleAlternate">@style/Cookbook2.Dialog.ButtonLayout.Stacked</item>
    <item name="apptentiveLoveDialogYesButtonStyleAlternate">@style/Cookbook2.Button</item>
    <item name="apptentiveLoveDialogNoButtonStyleAlternate">@style/Cookbook2.Button.Borderless</item>

    <!-- Note Dialog -->
    <item name="apptentiveNoteLayoutStyle">@style/Cookbook2.Dialog.Layout</item>
    <item name="apptentiveNoteHeaderImageStyle">@style/Cookbook2.Dialog.HeaderImage.Note</item>
    <item name="apptentiveNoteTitleWithMessageTextStyle">@style/Cookbook2.Dialog.Title</item>
    <item name="apptentiveNoteTitleOrMessageOnlyTextStyle">@style/Cookbook2.Dialog.Title</item>
    <item name="apptentiveNoteMessageTextStyle">@style/Cookbook2.Dialog.Message</item>
    <item name="apptentiveNoteButtonLayoutStyle">@style/Cookbook2.Dialog.ButtonLayout.Stacked</item>
    <item name="apptentiveNoteButtonStyle">@style/Cookbook2.Button</item>
    <item name="apptentiveNoteDismissButtonStyle">@style/Cookbook2.Button.Borderless</item>

    <!-- Survey -->
    <item name="colorPrimary">#056E0F</item>
    <item name="colorOnPrimary">#FFFFFF</item>
    <item name="android:colorBackground">#FFFFFF</item>
    <item name="colorOnBackground">#3A4C5F</item>

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

    <item name="apptentiveSurveyToolbarStyle">@style/Cookbook2.Survey.Toolbar</item>
    <item name="apptentiveSurveyBottomAppBarStyle">@style/Cookbook2.Survey.BottomAppBar</item>
    <item name="apptentiveSurveyTitleStyle">@style/Cookbook2.Survey.Title</item>
    <item name="apptentiveSurveyHeaderImageStyle">@style/Cookbook2.Survey.HeaderImage</item>
    <item name="apptentiveSurveyIntroductionStyle">@style/Cookbook2.Survey.Introduction</item>
    <item name="apptentiveSurveyFootnoteStyle">@style/Cookbook2.Survey.Footnote</item>
    <item name="apptentiveSurveySubmitButtonStyle">@style/Cookbook2.Button</item>

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

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

   <!-- Apptentive Message Center -->
   <item name="apptentiveMessageCenterToolbarStyle">@style/Cookbook2.MessageCenter.Toolbar</item>
   <item name="apptentiveMessageCenterToolbarTitleStyle">@style/Cookbook2.MessageCenter.Title</item>
   <item name="apptentiveMessageCenterFillColorSendIconBackground">#056E0F</item>
   <item name="apptentiveMessageCenterFillColorAttachmentIconBackground">#056E0F</item>
   <item name="apptentiveMessageCenterBubbleColorOutbound">#F3F3F3</item>
   <item name="apptentiveMessageCenterBubbleColorInbound">#056E0F</item>
   <item name="apptentiveMessageCenterColorComposerOutline">#056E0F</item>
   <item name="apptentiveMessageCenterViewSeparatorStyle">@style/Cookbook2.MessageCenter.View.Separator.Style</item>
   <item name="apptentiveMessageCenterComposerStyle">@style/Cookbook2.MessageCenter.Composer.Style</item>
   <item name="apptentiveMessageCenterFillColorIcon">#3A4C5F</item>
</style>

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

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


Feature	Included In

Android UI Cookbook Design 2

Overview

Design 2

Implementation

Files

Survey toolbar background

Survey toolbar header image (small)

Shared Styles

Important styles

Button style

Dialog layouts

Dialog header images

Dialog title text style

Dialog message style

Dialog button layout and borderless buttons

1. The Love Dialog

The layout

The header image

The title

The buttons and button layout

The styles

2. The Prompt (formerly Notes)

The layout

The header image

The titles and message

The styles

3. The Survey

The toolbar and bottom app bar

The small header image

The introduction

The footer text

The submit button

The close dialog

The styles

4. The Alchemer Mobile Rating Dialog

The dialog layout

The header image

The title

The message

The buttons

The styles

5. Message Center

The toolbar

Bubble colors

Attachment and send icons

Compose section

The styles

6. Setting all the styles

All the styles

Setting the styles