Android UI Cookbook Overview

Contents

This article will share some custom designs and examples of how to translate them into Apptentive interactions using styles.

Our objective with this is to encourage more UI customization within your app while using our Apptentive SDK!

We are hoping this might also inspire some new UI within your app and break down some of the barriers to implementing some more complicated Apptentive interaction UIs.

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.

Reminder

Default Apptentive interaction styles are designed to look like Material Design.

See the Android Interface Customization article for our default stylings.

Example App

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

Overview

We have 3 app styles with Apptentive interactions custom-tailored to fit that app’s specific theme.

We’ll split up each design by interaction type. We’ll have supporting files and the styles to create your file for each type. After this, you just need to set the styles within your ApptentiveThemeOverride style (or app theme style)!

Notice

All interaction designs are possible starting from 6.0.0.

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

Design 1

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

The images below show:

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

This design highlights custom UI configurations like:

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

Design 2

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

The images below show:

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

This design highlights custom UI configurations like:

All Interactions
- Outline buttons with rounded corners
Love Dialog
- Header image
- Vertical buttons
Notes
- Header image
Survey
- Custom toolbar background
- Small header within the toolbar
- Footer text
Apptentive Rating Dialog
- Header image
Apptentive Message Center
- Header Image
- Toolbar separator line