By changing and overwriting styles and themes in the SDK, the look of views and screens can be customized.

Basic Setup

VouchrSDK allows you to pass in your own theme.

  1. Create an xml android theme. Note: The theme should be based on a NoActionBar variant of Theme.AppCompat such as Theme.AppCompat.Light.NoActionBar.
<resources>
    <style name="SampleTheme" parent="Theme.Surpriise.Base">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="vchr_screenBackground">@drawable/screenBackground</item>
        <item name="android:colorBackground">@color/backgroundColor</item>

        <item name="VouchrButton.Positive">@style/SampleButton.Positive</item>
        <item name="VouchrButton.Negative">@style/SampleButton.Neutral</item>
        <item name="VouchrButton.Neutral">@style/SampleButton.Negative</item>
    </style>

    <style name="SampleButton">
        <item name="android:letterSpacing">0</item>
        <item name="android:textAllCaps">true</item>
        <item name="android:textSize">16sp</item>
        <item name="vchr_clickAnimation">ripple</item>
        <item name="vchr_radius">4dp</item>
        <item name="vchr_focusColor">@android:color/darker_gray</item>
    </style>

    <style name="SampleButton.Positive" parent="SampleButton">
        <item name="vchr_defaultColor">?colorPrimary</item>
        <item name="vchr_textColor">@android:color/white</item>
    </style>

    <style name="SampleButton.Neutral" parent="SampleButton">
        <item name="vchr_borderColor">?colorPrimary</item>
        <item name="vchr_borderWidth">3dp</item>
        <item name="vchr_defaultColor">@android:color/white</item>
        <item name="vchr_textColor">?colorPrimary</item>
    </style>

    <style name="SampleButton.Negative" parent="SampleButton.Neutral"/>
</resources>
  1. Then pass it into Engine.Builder.
Engine.Builder builder = new Engine.Builder("baseUrl", "SDK_ID");
builder.setBaseTheme(R.style.SampleTheme);
...
builder.build();

val builder = Engine.Builder("baseUrl", "SDK_ID")
builder.setBaseTheme(R.style.SampleTheme)
...
builder.build()

Need more control?

If for you need finer control. You can use your own ThemeManager instead of the default one.

builder.setThemeManager(new CustomThemeManager(R.style.SampleTheme));

builder.setThemeManager(CustomThemeManager(R.style.SampleTheme))

SDK Activities are tagged with one of three theme types. The following methods will be called based on the activity type.

Method Usage
setBaseTheme Set the Base theme for activities and views
setTranslucentStatusTheme Theme for activities with a translucent status bar. By default calls setBaseTheme first
setTransparentTheme Theme for activities with transparent background and status bar By default calls setBaseTheme first

Theming Claim/Reveal screen with different theme

This allows you the set the theme just for the Claim/Reveal screen.

ClaimConfig claimConfig = new ClaimConfig.Builder().setBaseTheme(R.style.SampleThemeProfessional).build();

Engine.Builder builder = new Engine.Builder(serverUrl, sdkId);
builder.addClaimConfig(claimConfig);

val claimConfig = ClaimConfig.Builder()
        .setBaseTheme(R.style.SampleThemeProfessional)
        .build()

val builder = Engine.Builder(serverUrl, sdkId)
builder.addClaimConfig(claimConfig)

Common Config

This allows you to configure the language used within the sdk. The giftVerb is what the sdk uses to refer to your voucher. The appName refers to the name of your application the sdk is currently in.

CommonConfig commonConfig = new CommonConfig.Builder().giftVerb("gift").appName("Gifting").build();

Engine.Builder builder = new Engine.Builder(serverUrl, sdkId);
builder.setCommonConfig(commonConfig);

val commonConfig = CommonConfig.Builder().giftVerb("gift").appName("Gifting").build()

val builder = Engine.Builder(serverUrl, sdkId)
builder.setCommonConfig(commonConfig)

Theming Explained

Colors

There are three primary colors used in SDK:

Color Usage
colorPrimary used as the primary color
colorPrimaryDark used as the primary color but darker
colorAccent used as an accent for most components

Using VouchrSDK Color attributes

  • In your XML file
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="?colorPrimary"/>
  • Or programmatically
TextView textView = findViewById(R.id.textView);
textView.setTextColor(ThemeUtil.getThemeColorAccent(context));

textView.setTextColor(ThemeUtil.getThemeColorAccent(context))

Background Theming

VouchrSDK uses two attributes to theme backgrounds - vchr_screenBackground and android:colorBackground. vcrh_screenBackground controls the asset that occupies the background of the screen, and android:colorBackground sets the color of the asset. Omission of vchr_screenBackground results in a solid android:colorBackground colored background and omission of android:colorBackground results in the default color of the asset set by vchr_screenBackground come through.

TextAppearances

VouchrSDK uses seven textAppearance styles to theming TextViews, EditViews and all other views related with showing texts. They are:

Style Default (Font,Size)
TextAppearance.PrimaryHeader AvenirNext Bold, 24sp
TextAppearance.SecondaryHeader AvenirNext Demi Bold, 16sp
TextAppearance.NavigationHeader AvenirNext Bold, 14sp
TextAppearance.Body AvenirNext Media, 16sp
TextAppearance.Caption AvenirNext Bold, 10sp
TextAppearance.Display AvenirNext Bold, 30sp
TextAppearance.ButtonText AvenirNext Demi Bold, 16sp

Using VouchrSDK TextAppearance attributes

  • In your XML file
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?TextAppearance.Body"/>
  • Or programmatically
TextView textView = findViewById(R.id.textView);
textView.setTextAppearance(ThemeUtil.resolveThemeAttribute(R.attr.TextAppearance_PrimaryHeader,context));

textView.setTextAppearance(ThemeUtil.resolveThemeAttribute(R.attr.TextAppearance_PrimaryHeader,context))

Steps for Theming TextAppearance

  • create your own textAppearance style
<style name="[you style name]" parent="TextAppearance">
     <item name="android:fontFamily">[your font path]</item>
     <item name="android:textSize">[your text size]</item>
     ...
</style>
  • in your theming styles, overwrite textAppearance styles of SDK with your styles
<item name="TextAppearance.Body">@style/[your customized style]</item>

Buttons

VouchrSDK has the following styles for theming VouchrButton (Customized Button View used across the SDK)

Style Usage
VouchrButton.Positive positive button on dark backgrounds
VouchrButton.Negative negative button on dark backgrounds
VouchrButton.Neutral neutral button on dark backgrounds
VouchrButton.CloseButton style for close “x” button in screen top corners on dark backgrounds
VouchrButton.BackButton style for back button usually in the top left corner of the screen on dark backgrounds

Using VouchrButton attributes

  • In your XML file
    <VouchrButton
        android:id="@+id/tryBtn"
        style="?VouchrButton.Positive"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login"
  • Or construct a VouchrButton with styles programmatically
VouchrButton vouchrButton = new VouchrButton(context, null, 0,ThemeUtil.resolveThemeAttribute(R.attr.VouchrButton_Positive,context))

val vouchrButton = VouchrButton(context, null, 0,ThemeUtil.resolveThemeAttribute(R.attr.VouchrButton_Positive,context))

Theming Buttons

  • Create your own VouchrButton style.
<style name="[your button style name]" parent="VouchrButton">
        <item name="android:text">string</item>
        <item name="android:textSize">dimension</item>
        <item name="android:textAllCaps">boolean</item>
        <item name="android:letterSpacing">float</item>
        <item name="android:paddingLeft">dimension</item>
        <item name="android:paddingTop">dimension</item>
        <item name="android:paddingRight">dimension</item>
        <item name="android:paddingBottom">dimension</item>
        <item name="android:paddingStart">dimension</item>
        <item name="android:paddingEnd">dimension</item>
        <item name="android:padding">dimension</item>

        <item name="vchr_enabled">boolean<item>
        <item name="vchr_defaultColor">color<item>
        <item name="vchr_text">string<item>

        <item name="vchr_textColor">color<item>
        <item name="vchr_iconColor">color<item>
        <item name="vchr_iconTintColor">color<item>

        <item name="vchr_textFont">string<item>
        <item name="vchr_iconFont">string<item>

        <item name="vchr_textSize">dimension<item>
        <item name="vchr_iconResource">integer<item>
        <item name="vchr_fontIconResource">string<item>
        <item name="vchr_fontIconSize">dimension<item>
        <attr name="vchr_iconPosition" format="enum">
            left, right, top, bottom, center
        </attr>

        <attr name="vchr_textPosition" format="enum">
            left, right, top, bottom
        </attr>

        <attr name="vchr_textGravity" format="enum">
            top, bottom, left, right, 
            center_vertical, fill_vertical, center_horizontal, fill_horizontal, 
            center, fill, clip_vertical, clip_horizontal, start, end
        </attr>

        <attr name="vchr_clickAnimation" format="enum">
            ripple, shadow, spring
        </attr>

        <item name="vchr_springAnimation_minScale">float<item>

        <item name="vchr_iconPaddingLeft">dimension<item>
        <item name="vchr_iconPaddingRight">dimension<item>
        <item name="vchr_iconPaddingTop">dimension<item>
        <item name="vchr_iconPaddingBottom">dimension<item>

        <item name="vchr_radiusTopLeft">dimension<item>
        <item name="vchr_radiusTopRight">dimension<item>
        <item name="vchr_radiusBottomLeft">dimension<item>
        <item name="vchr_radiusBottomRight">dimension<item>

        <item name="vchr_borderColor">color<item>
        <item name="vchr_borderWidth">dimension<item>
        <item name="vchr_focusColor">color<item>
        <item name="vchr_disabledColor">color<item>
        <item name="vchr_disabledTextColor">color<item>
        <item name="vchr_disabledBorderColor">color<item>
        <item name="vchr_radius">dimension<item>
        <item name="vchr_textAllCaps">boolean<item>
        <item name="vchr_ghost">boolean<item>
        <item name="vchr_useSystemFont">boolean<item>
        <item name="vchr_showloading">boolean<item>
</style>
  • In your theming styles, overwrite VouchrButton styles of SDK with your own styles.
...
<item name="VouchrButton.Positive">@style/[your style for positive VouchrButtons]</item>
...