Game Zone UI Customization for Android

Spinner Customization

The game zone UI components are available in the /LoyaltyMobileSDK-Android/SampleApps/MyNTORewards/src/main/java/com/salesforce/loyalty/mobile/myntorewards/views/gamezone package.

Customize the spinner components, such as the wheel size, frame width and color, and more in the SpinnerConfiguration.kt file. Here are all the parameters you can modify.

1class SpinnerConfiguration {
2
3    companion object {
4        //preferences
5        val WHEEL_SIZE = 280.dp
6        val WHEEL_FRAME_WIDTH = 4.dp
7        val WHEEL_FRAME_COLOUR = SpinnerFrameColour
8        val WHEEL_BORDER_WIDTH = 12.dp
9        val WHEEL_SEGMENT_BACKGROUND = Color.White //same colour will apply on border
10        const val START_DEGREE = 0f
11        //spinner default loading position degree 30f represents when spinner will load it will be at 30 degree
12        const val ROTATION_PER_SECOND = 3f
13        const val PADDING_ANGLE_BETWEEN_WHEEL_SEGMENT = 2f //padding between two segments of wheel
14        const val ROTATION_DURATION = 3000 // duration of wheel rotate after the API responds
15        const val INITIAL_ROTATION_DURATION = 20000 // duration of wheel rotate till API responds
16        const val WHEEL_TEXT_INITIAL_ROTATION = 0f // we can configure the orientation of text
17        //based on this angle,we can make wheel content straight or with angle inside the wheel 
18    }
19}

For example, to change the spinner frame color to blue, open the /LoyaltyMobileSDK-Android/SampleApps/MyNTORewards/src/main/java/com/salesforce/loyalty/mobile/myntorewards/views/gamezone/spinner/SpinnerConfiguration.kt file in Android Studio, and change the value of val WHEEL_FRAME_COLOUR from SpinnerFrameColour to Color.Blue.

To increase the padding between two segments of the wheel, change the value of const val PADDING_ANGLE_BETWEEN_WHEEL_SEGMENT from 2f to 4f.

Scratch Card Customization

You can customize the scratch card components, such as the box and canvas in the ScratchCanvasView.kt file.

For example, to change the scratch card background color to white, open the /LoyaltyMobileSDK-Android/SampleApps/MyNTORewards/src/main/java/com/salesforce/loyalty/mobile/myntorewards/views/gamezone/spinner/ScratchCanvasView.kt file in Android Studio, and inside the CanvasForScratching method, replace Box( modifier = modifier.background(VibrantPurple40).testTag(TEST_TAG_SCRATCH_CARD) with Box( modifier = modifier.background(Color.White).testTag(TEST_TAG_SCRATCH_CARD).