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

Our objective with this is to encourage more UI customization within your app while using our Alchemer Mobile 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 Alchemer Mobile interaction UIs.

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.

Reminder

Default Alchemer Mobile 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 Alchemer Mobile 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.

Alchemer Mobile Rating Dialog Alchemer Mobile Message Center

Alchemer Mobile Love Dialog Alchemer Mobile Prompt

Alchemer Mobile Survey Home Screen ( No interaction)

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
Alchemer Mobile 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.

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
Prompts (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

Design 3

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

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