Skip to main content
Version: 2.2.x

Card View

This option allows you to display our custom widget that display stories in an card format horizontally or on grid.

Layout​

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

<com.joinstoriessdk.androidsdk.ui.card.ListStoryCardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="200dp"/>

<com.joinstoriessdk.androidsdk.ui.player.StoryPlayer
    android:id="@+id/story_player"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Trigger​

Like on thumb view, to start the display of our card view widget, you need to call the startCardView method:

binding.cardView.setStoryPlayer(binding.storyPlayer)
binding.cardView.startCardView("<join_alias>", timeout = 10, playShowShareButton = false)

Configuration​

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

Show Label​

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

cardView.withLabel = true | false

Label Typeface​

Card views label custom font (withLabel should be true)

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

Label Color​

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

cardView.labelColor = Color.BLACK

Card elevation​

Card views custom elevation. 8 is default value

cardView.cardElevation = 10

Card raduis​

Card views custom radius. 8 is default value

cardView.cardRadius = 10

Show play button​

Show/hide play button below each card. The play button is visible by default

cardView.hasPlayButton = true | false

Show overlay​

Show/hide overlay below each card. The overlay is visible by default

cardView.hasOverlay = true | false

Spacing and number of column​

You can custom spacing between each card and the number of column (grid format only). The spacing default value is 8 and number of column default value is 2.

cardList.spacing = 10

Card Size​

By default, the size of the card is calculated by a ratio based on the width or height of the container.

You can custom size calling these parameters :

cardList.cardWidth = 150

The height is equal to the height of the container.