1. Home
  2. Developer Guides
  3. [NEW!] Android SDK 6.0 – Native
  4. Android UI Cookbook Design 2
Searching...

Android UI Cookbook Design 2

Contents

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

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

Notice

All interaction designs are possible starting from 6.0.0.

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

The images below show:

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

This design highlights custom UI configurations like:

  • All Interactions
    • Outline buttons with rounded corners
  • Love Dialog
    • Small header image
    • Vertical buttons
  • Notes
    • Small header image
  • Survey
    • Custom toolbar background
    • Small header within the toolbar
    • Footer text
  • Apptentive Rating Dialog
    • Small header image

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, Note, and Apptentive 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, Note, and Rating Dialog.

Design 2 Love Dialog header image
Design 2 Note header image
Design 2 Apptentive Rating 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

PNG version for visual
<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 Apptentive interactions usage.

We are following Material Theme guidelines for color styling

Read more about what items are used where within the Apptentive 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, Note, Survey, Survey (close dialog), and Apptentive Rating Dialog

Inherit from Apptentive 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, Note, and Survey (close dialog)

The Apptentive 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, Note, and Apptentive 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, Note, Survey (close dialog), and Apptentive 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: Note, Survey (close dialog), and Apptentive 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, Note, 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 Apptentive 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 Note

Design 2 Note

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

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

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

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

Design 2 Apptentive Rating Dialog

The dialog layout

Uses apptentiveRatingDialogLayoutStyle.

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

<style name="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

The 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

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

Attachment and send icons

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

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>

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 Apptentive interaction for Cookbook Design 2!

Updated on June 5, 2023

Was this article helpful?

Yes No

Related Articles