Theming¶

MimiSDK has a powerful theming engine built into every UI component, designed to provide all the flexibility you need to make Mimi feel at home in your app. We provide the ability to customize colors, fonts, layout and system elements and more.

Applying a theme¶

Applying Mimi's theme is as simple as using it in your app's manifest:

<application
    android:name=".MyApplication"
    android:theme="@style/MyBrandTheme">
</application>

If you want to theme UX resources with your UI stylesheet, then you need to declare a theme in your app's styles.xml and make it extend Theme.Mimi. Then you will be able to override as many attributes as needed, as a way to customize colors, text fonts or even button shapes:

<style name="MyBrandTheme" parent="Theme.Mimi">

        <!-- general colors -->

        <item name="mimiPrimaryTintColorNormal">@color/myPrimaryTintColor</item>
        <item name="mimiPrimaryTintColorHighlighted">@color/myPrimaryTintColorHighlighted</item>
        <item name="mimiSecondaryTintColorNormal">@color/mySecondaryTintColor</item>
        <item name="mimiSecondaryTintColorHighlighted">@color/mySecondaryTintColorHighlighted</item>
        <item name="mimiTertiaryTintColorNormal">@color/myTertiaryTintColor</item>
        <item name="mimiTertiaryTintColorHighlighted">@color/myTertiaryTintColorHighlighted</item>

        <item name="mimiPrimaryTextColorNormal">@color/myPrimaryTextColor</item>
        <item name="mimiPrimaryTextColorHighlighted">@color/myPrimaryTextColorHighlighted</item>
        <item name="mimiSecondaryTextColorNormal">@color/mySecondaryTextColor</item>
        <item name="mimiSecondaryTextColorHighlighted">@color/mySecondaryTextColorHighlighted</item>

        <item name="mimiForegroundColorNormal">@color/myForegroundColor</item>
        <item name="mimiForegroundColorHighlighted">@color/myForegroundColorHighlighted</item>
        <item name="mimiSecondaryForegroundColorNormal">@color/mySecondaryForegroundColor</item>
        <item name="mimiSecondaryForegroundColorHighlighted">@color/mySecondaryForegroundColorHighlighted</item>

        <item name="mimiPrimaryBackgroundColor">@color/myPrimaryBackgroundColor</item>
        <item name="mimiSecondaryBackgroundColor">@color/mySecondaryBackgroundColor</item>
        <item name="mimiElevatedBackgroundColor">@color/myElevatedBackgroundColor</item>

        <item name="mimiSuccessColor">@color/mySuccessColor</item>
        <item name="mimiWarningColor">@color/myWarningColor</item>
        <item name="mimiErrorColor">@color/myErrorColor</item>

        <item name="mimiEarLeftColor">@color/myLeftEarColor</item>
        <item name="mimiEarRightColor">@color/myRightEarColor</item>

        <item name="mimiHearingTestButtonTextColorNormal">@color/myHearingTestButtonTextColorNormal</item>
        <item name="mimiHearingTestButtonTextColorHighlighted">@color/myHearingTestButtonTextColorHighlighted</item>
        <item name="mimiHearingTestButtonBackgroundColor">@color/myHearingTestButtonBackgroundColor</item>

        <!-- fonts -->

        <item name="mimiFontLight">@font/myFontLight</item>
        <item name="mimiFontRegular">@font/myFontRegular</item>
        <item name="mimiFontMedium">@font/myFontMedium</item>
        <item name="mimiFontHeader">@font/myFontHeader</item>

        <!-- text appearances -->

        <item name="mimiTextAppearanceHeader">@style/myHeaderText</item>
        <item name="mimiTextAppearanceBodyNormal">@style/myBodyNormalText</item>
        <item name="mimiTextAppearanceBodyHighlighted">@style/myBodyHighlightedText</item>
        <item name="mimiTextAppearanceCompactBodyNormal">@style/myBodyCompactText</item>
        <item name="mimiTextAppearanceCompactBodyHighlighted">@style/myBodyCompactHighlightedText</item>
        <item name="mimiTextAppearanceTitle">@style/myTitleText</item>
        <item name="mimiTextAppearanceAction">@style/myMimiActionText</item>
        <item name="mimiTextAppearanceCompactAction">@style/myMimiActionCompactText</item>
        <item name="mimiTextAppearanceCaption">@style/TextAppearance.Mimi.Caption</item>

        <!-- widget styles -->

        <item name="mimiButtonCornerRadius">@dimen/myButtonRadius</item>
        <item name="mimiButtonStyle">@style/myButtonStyle</item>
        <item name="mimiCompactActionButtonStyle">@style/myCompactActionButtonStyle</item>
        <item name="mimiCompactBorderlessActionButtonStyle">@style/myCompactActionButtonBorderlessStyle</item>

        <!-- specialized theming -->
        <item name="mimiHearButtonStyle">@style/myHearButtonStyle</item>
        <item name="mimiSoundPersonalizationIconColor">@color/mySoundPersonalizationIconColor</item>

        <!-- Note: Deprecated attributes are not shown -->
</style>

Note: In order to properly theme your Mimi components, you will need to make use of the Theme.Mimi style class. You can either do this by theming the whole application with such a theme like shown above or you can also theme any Activity independently by specifying the MimiUX theme per Activity in your application Manifest.

Color identifiers¶

primaryTint¶

The Primary color that is applied to buttons, navigation titles, switches, sliders and artwork.

secondaryTint¶

Secondary tint that is applied to secondary elements, designed to give contrast to the primaryTint.

tertiaryTint¶

Tertiary tint that is applied to mostly background elements, such as separators and control backgrounds.

foreground¶

Color that is used as the foreground in controls and views, such as for the text color in buttons or switches with a colored background.

primaryBackground¶

Background color that is applied to all full-screen views, excluding overlay modals that do not cover the entire canvas.

secondaryBackground¶

Background color that is applied to some secondary views, and should give contrast to the primaryBackground.

elevatedBackground¶

Background color that is applied to elements that are commonly found above the primary background canvas, such as navigation bars, dialogs, tab bars and modal overlays.

primaryText¶

Text color that is applied to all primary text, such as primary information labels and text fields.

secondaryText¶

Text color that is applied to low priority text elements, such as background information and details.

success¶

Color to use for successful operations and states.

warning¶

Color to use for alerts that are presented for non-fatal errors.

error¶

Color to use for alerts that are presented for fatal errors.

Font attributes¶

Font to use for large titles, typically seen as large, prominent headers. Also used by default on the mimiTextAppearanceHeader text style.

regular¶

Font to use for title elements, such as navigation bar titles as well as Edit texts. Used by default on the mimiTextAppearanceTitle text style.

medium¶

Font to use for highlighted versions of body text elements, which are typically emboldened. Used by default on the mimiTextAppearanceBodyHighlighted, mimiTextAppearanceAction and mimiTextAppearanceCompactBodyHighlighted.

light¶

Font to use for all body text elements.

Button styles¶

Button¶

Default button style using primaryTintColor as background color, foregroundColor as text color and mediumFont as family font.

CompactActionButton¶

More compressed action button style, with less padding designed for quicker and more usual flow actions. Also styled using primaryTintColor as background color and foregroundColor as text color.

CompactBorderlessActionButton¶

Similar to CompactActionButton but without any background color and styled with primaryTintColor as text color.

MimiHearButtonStyle¶

Main button style for the Circular Button present inside the Hearing Test. Styled by default with primaryTintColor as background color, foregroundColor as text color and mediumFont as family font.