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:

XML

<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"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Jetpack Compose

    AndroidView(
        factory = {
            StoryScaffoldView(it)
        },
        modifier = Modifier
            .fillMaxSize()
            .requiredHeight(144.dp)
            .fillMaxWidth()
    )

    AndroidView(
        factory = {
            StoryPlayer(it)
        },
        update = {
            it.visibility = View.GONE
            it.translationZ = 16f
        }
    )  

Trigger

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

Kotlin

binding.storyScaffold.setStoryPlayer(binding.storyPlayer)
binding.storyScaffold.startThumbView("<join_alias>")

Jetpack Compose

@Composable
fun ThumbView() {
    val context = LocalContext.current
    val storyScaffoldView = remember { StoryScaffoldView(context) }
    val storyPlayerView = remember { StoryPlayer(context) }

    AndroidView(
        factory = {
            storyScaffoldView.apply {
                setStoryPlayer(storyPlayerView)
            }
        }
    )

    AndroidView(
        factory = {
            storyPlayerView
        }
    )

    StartThumbViewCompose(storyScaffoldView, joinAlias = "<join_alias>")
}

@Composable
fun StartThumbViewCompose(
    storyScaffoldView: StoryScaffoldView,
    joinAlias: String,
    timeout: Long = 10,
    listener: JoinStoriesListener? = null
) {
    LaunchedEffect(Unit) {
        storyScaffoldView.startThumbView(joinAlias, timeout, listener)
    }
}

Configuration

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

Show Label

Show/hide text below each thumb. The label is visible by default

storyScaffold.withLabel = true | false

Label Typeface

Thumb views label custom font (withLabel should be true)

storyScaffold.typeface = ResourcesCompat.getFont(context, R.font.font)

Label Color

Thumb views label custom text color (withLabel should be true)

Kotlin

storyScaffold.labelColor = Color.BLACK

XML

<com.joinstoriessdk.androidsdk.ui.StoryScaffoldView
    ...
    app:labelColor="@android:color/black"
    ...
/>

Thumb View Spacing

Spacing between thumb views

Kotlin

storyScaffold.thumbViewSpacing = 32

XML

<com.joinstoriessdk.androidsdk.ui.StoryScaffoldView
    ...
    app:thumbViewSpacing="32"
    ...
/>

Thumb View Overlay Color

Color of the overlay displayed on the thumb view image when a story was selected by the user and is loading

Kotlin

storyScaffold.thumbViewOverlayColor = Color.parseColor("#BB4C4C4C")

XML

<com.joinstoriessdk.androidsdk.ui.StoryScaffoldView
    ...
    app:thumbViewOverlayColor="@color/overlay_color"
    ...
/>

Loader Inner View Width

Spacing between the image and the loader in a thumb view

Kotlin

storyScaffold.loaderInnerViewWidth = 8

XML

<com.joinstoriessdk.androidsdk.ui.StoryScaffoldView
    ...
    app:loaderInnerViewWidth="8"
    ...
/>

Loader Inner View Color

Color between the image and the loader in a thumb view. By default, is TRANSPARANT

storyScaffold.loaderInnerViewColor = intArrayOf(Color.RED, Color.CYAN, Color.YELLOW)

Loader Colors

Colors of the thumb view loader. A sweep gradient will be applied on it. The default colours are RED and BLUE

storyScaffold.loaderInnerViewColor = intArrayOf(Color.RED, Color.BLUE)

Loader Width

Width of the thumb view

Kotlin

storyScaffold.loaderWidth = 8

XML

<com.joinstoriessdk.androidsdk.ui.StoryScaffoldView
    ...
    app:loaderWidth="8"
    ...
/>

Story Viewed Indicator Color

Color of the thumb view indicator displayed when a story has been viewed by the user

Kotlin

storyScaffold.storyViewedIndicatorColor = Color.GRAY

XML

<com.joinstoriessdk.androidsdk.ui.StoryScaffoldView
    ...
    app:storyViewedIndicatorColor="@android:color/gray"
    ...
/>

Story Viewed Indicator Alpha

Alpha of the thumb view indicator displayed when a story has been viewed by the user. Range [0..255]

Kotlin

storyScaffold.storyViewedIndicatorAlpha = 80

XML

<com.joinstoriessdk.androidsdk.ui.StoryScaffoldView
    ...
    app:storyViewedIndicatorAlpha="80"
    ...
/>

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.