This guide shows you how to customize the JOIN Stories experience of your users. These customizations apply to Bubble, Card List, Card Grid and Player.

📘

Before you begin

It is advised to apply these customizations after JOINStoriesInit if you are planning to do the customizations programmatically.

Bubble Trigger View

This section shows supported customizations on the Bubble trigger.

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration()

Bubble Label

These attributes changes the label below each bubble.

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(showLabel: Boolean)

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(labelFont: Typeface?)

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(labelFontSize: Float)

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(labelColor: Int)

📘

Tip

Visibility: The label is visible by default

Font : The label use the font of device by default

Font Size : The font size of label is 12f by default

Color : The label color is Color.BLACK by default

Bubble Spacing

This attribute changes the spacing between each bubble. The spacing is 12dp by default

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(thumbViewSpacing: Int)

Bubble Size

This attribute changes the bubble size. The size is 74dp by default

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(thumbViewSize: Int)

Bubble Loaders Color

This attribute changes the colors of loader. By default, the loader use "#D9222D" and "#FFA800" colors.

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(loaderColors: IntArray)

Bubble Loader Size

This attribute changes the width of loader. By default, the width of loader is 2dp

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(loaderWidth: Int)

Bubble Story Viewed Indicator Color

This attribute changes the color of story viewed indicator. By default, the color is Color.GRAY.

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(storyViewedIndicatorColor: Int)

Bubble Play Button Visibility

This attribute changes the visibility of the play button on the bubble image. By default, the play button is visible.

bubbleTriggerView.bubbleConfiguration = BubbleConfiguration(showPlayButton: Boolean)

Card Trigger View

This section shows supported customizations on the Card List and Card Grid triggers

val cardTrigger: CardTriggerView = CardTriggerView(context)

cardTrigger.cardConfiguration = CardGridConfiguration()
// OR
cardTrigger.cardConfiguration = CardListConfiguration()

Card Radius

This attribute changes the radius of card. By default, the radius is 8dp in list format and 10dp in grid format.

cardTrigger.cardConfiguration = CardGridConfiguration(cardRadius: Int)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(cardRadius: Int)

Card Elevation

This attribute changes the elevation of card. By default, the radius is 2dp .

cardTrigger.cardConfiguration = CardGridConfiguration(cardElevation: Int)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(cardElevation: Int)

Card Play Button Visibility

This attribute changes the visibility of the play button on the card image. By default, the play button is visible.

cardTrigger.cardConfiguration = CardGridConfiguration(showPlayButton: Boolean)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(showPlayButton: Boolean)

Card Label

These attributes changes the label below each card.

cardTrigger.cardConfiguration = CardGridConfiguration(showLabel: Boolean)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(showLabel: Boolean)

cardTrigger.cardConfiguration = CardGridConfiguration(labelFont: Typeface?)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(labelFont: Typeface?)

cardTrigger.cardConfiguration = CardGridConfiguration(labelFontSize: Float)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(labelFontSize: Float)

cardTrigger.cardConfiguration = CardGridConfiguration(labelColor: Int)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(labelColor: Int)

📘

Tip

Visibility: The label is visible by default.

Font : The label use the font of device by default

Font Size : By default, the font size of label is 12f in list format and 19f in grid format.

Color : The label color is Color.WHITE by default

Card Overlay Visibility

This attribute changes the visibility of overlay present at the bottom of each card (below the label). By default, the overlay is visible.

cardTrigger.cardConfiguration = CardGridConfiguration(showOverlay: Boolean)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(showOverlay: Boolean)

Card Spacing

This attribute changes the spacing between each card. By default, the spacing is 6dp in list format and 16dp in grid format

cardTrigger.cardConfiguration = CardGridConfiguration(spacing: Int)
// OR
cardTrigger.cardConfiguration = CardListConfiguration(spacing: Int)

Number of columns (only Card Grid)

This attribute changes the number of columns in the card grid. By default, it is 2 columns.

cardTrigger.cardConfiguration = CardGridConfiguration(numberOfColumns: Int)

Card Size

By default, cards is in 9:16 format but you can change the size of card using a CardSize object. The CardSize request a CardSizeType (CardSizeType.Ratio or CardSizeType.Fixed) and a value.

CardSize(type: CardSizeType, value: Float)

Card Grid Height

In card grid format, you can only customize height. The card take the max width available in CardTriggerView.
You can force the height with fixed size or use a ratio based on the max width available.

val height = CardSize(type: CardSizeType.Fixed, value: 200f)
//OR
val height = CardSize(type: CardSizeType.Ratio, value: 0.5f)

cardTrigger.cardConfiguration = CardGridConfiguration(cardHeight: height)

Card List Width

In card list format, you can only customize width. The card take the height of CardTriggerView.
You can force the width with fixed size or use a ratio based on the height.

val width = CardSize(type: CardSizeType.Fixed, value: 150f)
//OR
val width = CardSize(type: CardSizeType.Ratio, value: 1f)

cardTrigger.cardConfiguration = CardListConfiguration(cardWidth: width)

Player View

You can customize the player that opens when the trigger is clicked.

val playerConfiguration: PlayerConfiguration = PlayerConfiguration()

cardTrigger.playerConfiguration = playerConfiguration
bubbleTrigger.playerConfiguration = playerConfiguration

Player Start Opening Animation (only standalone mode)

The start opening animation can be changed when the player is used in standalone mode. By default, the animation start from the bottom of the screen.

// enum class PlayerStandaloneAnimationOrigin {
//     TOP_LEFT, BOTTOM_LEFT, BOTTOM, BOTTOM_RIGHT, TOP, TOP_RIGHT
// }

JOINStories.startPlayer(
  ...
  configuration = PlayerConfiguration(playerStandaloneAnimationOrigin: PlayerStandaloneAnimationOrigin)
)

Player Vertical Anchor

The attribute changes the player anchor when the player's height is smaller than screen height. The default anchor is TOP

// enum class PlayerVerticalAnchor {
//     TOP, BOTTOM, CENTER
// }

trigger.playerConfiguration = PlayerConfiguration(playerVerticalAnchor: PlayerVerticalAnchor)

Player Background Color

The attribute changes the background color of player. The background color is Color.BLACK by default

trigger.playerConfiguration = PlayerConfiguration(playerBackgroundColor: Int)

Player Horizontal Margins

The attribute changes the player's left and right margins. By default, the player has no margin.

trigger.playerConfiguration = PlayerConfiguration(playerBackgroundColor: Int)

Player Corner Radius

The attribute changes the corner radius of player. By default, the corner radius is 0.

trigger.playerConfiguration = PlayerConfiguration(playerCornerRadius: Int)

Player Progress Bar

These attributes change the style of the progress bar at the top of the player

trigger.playerConfiguration = PlayerConfiguration(playerProgressBarDefaultColor: Int)

trigger.playerConfiguration = PlayerConfiguration(playerProgressBarFillColor: Int)

trigger.playerConfiguration = PlayerConfiguration(playerProgressBarThickness: Int)

trigger.playerConfiguration = PlayerConfiguration(playerProgressBarRadius: Int)

📘

Tip

Default Color : The default color is WHITE with 50% of alpha

Fill Color : The default color is WHITE

Thickness : By default, the thickness is 2dp

Radius : By default, the radius is6dp