Step 2: Integration

a. Import the SDK Module

1. Copy the ${sdkFolder}/visa-sensory-branding-sdk module to your project, it's a pre-configured Gradle module for visa-sensory-branding-${sdkVersion}.aar.

2. Add the SDK module to your own modules' build.gradle(.kts) by the below code:

dependencies {
... implementation(project(":visa-sensory-branding-sdk"))
}

3. Click Gradle Sync button of Android Studio to load the SDK.

4. You can find the integration examples under folders inside the package.

b. Initialisation

Import the Visa Sensory Branding class reference into source files as necessary.

Java/Kotlin

import com.visa.SensoryBrandingView

XML

<com.visa.SensoryBrandingView
android:id="@+id/vsb"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>

Java + View

SensoryBrandingView vsb = (SensoryBrandingView) findViewById(R.id.vsb);

Kotlin + View

val vsb = findViewById<SensoryBrandingView>(R.id.vsb)

Kotlin + Jetpack Compose

// Wrap the SensoryBrandingView with AndroidView
AndroidView( modifier = Modifier
.width(Dp(width))
.wrapContentHeight(),
factory = { ctx ->
val vsb = SensoryBrandingView(ctx, null)
// More configurations...
// vsb.languageCode = "en"
vsb
},
update = { vsb -> })

c. Animate

Activates the Visa Sensory Branding animation.

Java View

vsb.animate(error -> {
    Log.d("SensoryBrandingView", error == null ? "OK" : error.getMessage());
    return null;
});

Kotlin View

vsb.animate { error ->
    Log.d("SensoryBrandingView", error?.message ?: "OK")
}

Kotlin + Jetpack Compose

// We need a property to trigger animation
var playingTheAnimation by rememberSaveable { mutableStateOf(false) }

// Wrap the SensoryBrandingView with AndroidView
AndroidView(
    modifier = Modifier
        .width(Dp(width))
        .wrapContentHeight(),
    factory = { ctx ->
        val vsb = SensoryBrandingView(ctx, null)
    // More configurations...
    // vsb.languageCode = "en"
    vsb
},
update = { vsb ->
    if (playingTheAnimation) {
        vsb.animate { result ->
            Log.d("SensoryBrandingView", result?.message ?: "OK")
        }
    }
})

There are 3 possible error messages (Error#getMessage()):

Error Message	NOTE
Previous animation still in progress, cannot start new animation	Please wait for a while till animation displays
Alpha channel is not supported for backdrop color	Please choose a different background color
Invalid background color selected, contrast levels are below 3:1 against #FFFFFF #1434CB	Please choose a different background color

d. Sizing & Layout

You can choose to have the Visa animation render in full screen on a device, or in a constrained view in context of other UI elements. To render in full screen, simply initialize the container to fit device height and width and set background color to same as backdropColor. For constrained view, specify the width of SensoryBrandingView during initialization.

1. The width of the animation object will not be larger than 60% of the screen's width. If the width is set to be larger, it will be resized to be 60% of the screen's width.
2. The width of the animation object will not be smaller than 20% of the screen's width. If the width is set to be smaller, it will be resized to be 20% of the screen's width.

e. Animation Configuration Parameters

Language Code

Define the language of the texts present below the checkmark

Java

vsb.setLanguageCode("en");

Kotlin

vsb.languageCode = "en"

Backdrop Color

The color behind the animation, used to determine the Visa logo colors. Specify Visa Blue(#1434CB) for a white Visa logo. Specify White(#FFFFFF) for a blue Visa logo. Any other color will result in either blue or white color applied to the Logo, depending on contrast.

Note: Do not set backdropColor with simi-transparent color or make it transparent.

Java

vsb.setBackdropColor(Color.parseColor("#123333"));

Kotlin

vsb.backdropColor = Color.parseColor("#123333")

Sound

Set to true to enable sound. (true by default)

Java

vsb.setSoundEnabled(true);

Kotlin

vsb.soundEnabled = true

Checkmark

This parameter enables/disables checkmark screen after visa logo animation:

Checkmark Mode includes:

• CheckmarkMode.CHECKMARK: shows checkmark at the end of the animation without text
• CheckmarkMode.CHECKMARK_WITH_TEXT: shows checkmark and checkmark text at the end of the animation (default)
• CheckmarkMode.NONE: no checkmark at the end of the animation

Checkmark Text includes:

• CheckmarkTextOption.APPROVE
• CheckmarkTextOption.SUCCESS
• CheckmarkTextOption.COMPLETE (default)

Java

vsb.setCheckmarkMode(CheckmarkMode.CHECKMARK_WITH_TEXT);
vsb.setCheckmarkText(CheckmarkTextOption.APPROVE);

Kotlin

vsb.checkmarkMode = CheckmarkMode.CHECKMARK_WITH_TEXT
vsb.checkmarkText = CheckmarkTextOption.APPROVE