Thumb view sample

Add the SDK

First add the SDK and required dependencies in your app/build.gradle file.

You can check the latest SDK version on Maven Central.

dependencies {
    [...]

    implementation 'com.joinstoriessdk:androidsdk:X:X:X'

    [...]
}

Init

Then you should init the SDK. There isn't any side effect so you can implement it wherever you want. Just be sure to call the init method before any start method.

JoinStories.init(this, your_team_id)

Layout

Now you need to add our StoryScaffoldView and StoryPlayer views withing the layout of the Activity/Fragment that will be responsible to trigger their display.

<com.joinstoriessdk.androidsdk.ui.StoryScaffoldView
    android:id="@+id/story_scaffold"
    android:layout_width="0dp"
    android:layout_height="144dp"
    android:layout_marginTop="16dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:labelColor="@android:color/holo_orange_dark"
    app:thumbViewSpacing="10"
    app:thumbViewOverlayColor="@color/cardview_dark_background"
    app:loaderInnerViewWidth="4"
    app:loaderWidth="4"
    app:storyViewedIndicatorAlpha="80"
    app:storyViewedIndicatorColor="@android:color/holo_blue_bright"/>

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

Trigger

At this point you are now ready to display and start our widget, by calling the startThumbView method.

It could be in the onResume method of your Activity for example:

override fun onResume() {
    super.onResume()

    binding.storyScaffold.setStoryPlayer(binding.storyPlayer)
    binding.storyScaffold.startThumbView("your_alias")
}

For a complete list of the available configuration parameter, see the Thumb View document of the usage section.