ThumbView

This option allows you to display our custom widget that display stories in an horizontal scrollable view with a Instagram-like UI.

Layout

You first need to add our scaffold view and player view within your Activity/Fragment layout:

<com.joinstoriessdk.androidsdk.ui.StoryScaffoldView
    android:id="@+id/story_scaffold"
    android:layout_width="0dp"
    android:layout_height="144dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<com.joinstoriessdk.androidsdk.ui.player.StoryPlayer
    android:id="@+id/story_player"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@android:color/white"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Trigger

To start the display of our thumbView widget, you need to call the startThumbView method:

JoinStories.startThumbView(
    joinStoriesThumbConfig,
    lifecycleScope,
    container_view,
    story_player,
    story_scaffold,
    listener
)

Parameter	Type	Required	Description
joinStoriesThumbConfig	JoinStoriesThumbConfig	YES	The configuration object, that requires at least the JOIN Stories alias you were given
lifecycleScope	LifecycleCoroutineScope	YES	A lifecycle scope bounded to Android component containing the StoryPlayer and the StoryScaffoldView implemented previously
containerView	View	YES	The root view containing the StoryPlayer and the StoryScaffoldView implemented previously. It will only use its bounds to animate the player appearance/disappearance
storyPlayer	StoryPlayer	YES	The StoryPlayer implemented previously
storyScaffoldView	StoryScaffoldView	YES	The StoryScaffoldView implemented previously
listener	JoinStoriesListener	NO	A listener allowing you to be notified when an error occured while fetching stories

Configuration

You can fine tune SDK behavior and UI, by specifying optional values of the JoinStoriesThumbConfig parameter.

Available configuration parameters:

Name	Type	Default Value	Description
joinAlias	String		The JOIN Stories alias you were given to configure your integration
timeout	Long	10	Timeout used for the stories fetching network requests (call and read)
typeface	Typeface	null	Thumb views label custom font (withLabel should be true)
labelColor	Int	Color. BLACK	Thumb views label custom text color (withLabel should be true)
thumbViewSpacing	Int	32	Spacing between thumb views
withLabel	Boolean	true	Show/hide text below each thumb view
loaderInnerViewWidth	Int	8	Spacing between the image and the loader in a thumb view
loaderInnerViewColor	IntArray	intArrayOf (Color. TRANSPARENT)	Color between the image and the loader in a thumb view
loaderColors	IntArray	intArrayOf (Color. RED , Color. BLUE)	Colors of the thumb view loader. A sweep gradient will be applied on it
loaderWidth	Int	8	Width of the thumb view loader
storyViewedIndicatorColor	Int	Color. GRAY	Color of the thumb view indicator displayed when a story has been viewed by the user
storyViewedIndicatorAlpha	Int	80	Alpha of the thumb view indicator displayed when a story has been viewed by the user. Range [0..255]
thumbViewOverlayColor	Int	Color.parseColor( "#BB4C4C4C")	Color of the overlay displayed on the thumb view image when a story was selected by the user and is loading
playerBackgroundColor	Int	Color.BLACK	Color of the player's background, if the player height is smaller than screen dimensions
playerVerticalAnchor	PlayerVerticalAnchor	.BOTTOM	If the player's height is smaller than screen height, anchor it to the top, bottom or center of the scren
playerShowShareButton	Boolean	true	Change the visibility of the share button displayed on the Player view
playerClosingButton	Boolean	true	Change the visibility of the close button displayed on the Player view
playerHorizontalMargins	Int	0	Apply the margin to the left and right of the player view. To maintain ratio, it also changes the height of the player view.
playerCornerRadius	Float	0f	Apply radius to the 4 corners of the player view
playerProgressBarDefaultColor	String?	null	Change the background color of the progress bar in the player view. If no value or null is filled, the default color will be used. Format is ##RRGGBB or #RRGGBBAA
playerProgressBarFillColor	String?	null	Change the fill color of the progress bar in the player view. If no value or null is filled, the default color will be used. Format is ##RRGGBB or #RRGGBBAA
playerProgressBarThickness	Int?	null	Change the thickness of the progress bar in the player view. If no value or null is filled, the default thickness will be used.
playerProgressBarRadius	Int?	null	Change the radius of the progress bar in the player view. If no value or null is filled, the default thickness will be used. Radius will be applied to the 4 corners.

Multiple widgets

You can implement our thumbView widget multiple times on the same screen, with the same or different join alias.

To do so, you need to implement n StoryScaffoldView within your UI, and call the startThumbView method n times, one for each instance of StoryScaffoldView.