Android UI Cookbook Overview

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.

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

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

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

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

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

Design 3

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

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 square corners
  • Love Dialog
    • Large header image
    • Image buttons
  • Notes
    • Title text icon
    • Large header image
  • Survey
    • Large header image
  • Apptentive Rating Dialog
    • Large header image
Updated on June 22, 2022

Was this article helpful?

Related Articles