Show/Hide Storyly

This guide shows use cases for showing or hiding Storyly bar in your app. To increase user experience when there are no stories available or stories are not loading using Storyly event handling.

You can also check out the demo on GitHub

Storyly Demo for Kotlin (opens new window)

Storyly Demo for Java (opens new window)

Before you begin

You need to have the working Storyly setup as described in Initial SDK Setup

Show Storyly

Use case for showing storyly if StorylyView is loaded and stories are available.

Create layout xml with added StorylyView. Initialize StorylyView with token from dashboard.

For not to show already visible StorylyView bar, check if initially load and storyGroupList size. Set StorylyView visibility to View.VISIBLE.

Event handling

storylyLoaded event triggers first for available cached stories and second for request response with current stories. Detailed information about Event Handling

binding.storylyView.storylyListener = object : StorylyListener {
    var initialLoad = true

    override fun storylyLoaded(storylyView: StorylyView, storyGroupList: List<StoryGroup>) {
        //  for not to re-animate already loaded StorylyView
        if (initialLoad && storyGroupList.isNotEmpty()) {
            initialLoad = false
            storylyView.visibility = View.VISIBLE
        }
    }
    // ... other storyly events
}

storylyView.setStorylyListener(new StorylyListener() {
    boolean initialLoad = true;

    @Override
    public void storylyLoaded(@NotNull StorylyView storylyView, @NotNull List<StoryGroup> storyGroupList) {
        //  for not to re-animate already loaded StorylyView
        if (initialLoad && storyGroupList.size() > 0) {
            initialLoad = false;
            storylyView.setVisibility(View.VISIBLE);
        }
    }
    // ... other storyly events
}

Hide Storyly

Use case for hiding storyly if StorylyView is not loaded and stories are not available.

Create layout xml with added StorylyView. Initialize StorylyView with token from dashboard.

For not to show already visible StorylyView bar, check if initially loaded and storyGroupList size. Set StorylyView visibility to View.VISIBLE.

Loading cached stories triggers storylyLoaded event before storylyLoadFailed event. Check for if cache loaded and storyGroupList size. If cache or request is not loaded set StorylyView visibility to View.INVISIBLE or Visibility.GONE.

Event handling

storylyLoaded event triggers first for available cached stories and later for up to date stories. storylyLoaded for cached stories will trigger before storylyLoadFailed. Detailed information about Event Handling

binding.storylyView.storylyListener = object : StorylyListener {
    var storylyLoaded = false

    override fun storylyLoaded(storylyView: StorylyView, storyGroupList: List<StoryGroup>) {
        if (storyGroupList.isNotEmpty()) {
            storylyLoaded = true
        }
    }

    override fun storylyLoadFailed(storylyView: StorylyView, errorMessage: String) {
        // if cached before not hide
        if (!storylyLoaded) {
            storylyView.visibility = View.GONE;
        }
    }
    //  ... other used Storyly events
}

storylyView.setStorylyListener(new StorylyListener() {
    boolean storylyLoaded = false;

    @Override
    public void storylyLoaded(@NotNull StorylyView storylyView, @NotNull List<StoryGroup> list) {
        if (list.size() > 0) {
            storylyLoaded = true;
        }
    }

    @Override
    public void storylyLoadFailed(@NotNull StorylyView storylyView, @NotNull String errorMessage) {
        // if cached before not hide
        if (!storylyLoaded) {
            storylyView.setVisibility(View.GONE);
        }
    }
    //  ... other used Storyly events
});