Skip to main content

Grid layout

The grid layout displays videos vertically.

val cfBuilder = ViewConfig.Builder(this) // `this` is a context
// set the video source (SingleVideoSource, PlaylistVideoSource)
cfBuilder.videoSource(source)
val loCf = ShortVideoGridLayout.createDefaultConfig(this)
cfBuilder.layoutConfig(loCf)
shortVideoView.init(cfBuilder.build())

You can change the Grid span count (default value is 3):

val loCf = ShortVideoGridLayout.createDefaultConfig(this)
loCf.numberOfColumns = 2

Player behavior configuration:

val playerCf = PlayerItemConfiguration().apply {
    enableAutoPlay()
    actionOnCompleted = PlayerCompleteAction.STOP
}
cfBuilder.playerConfig(playerCf)

And other attributes:

  • Item background color
  • Spacing between items

Grid Item​

For Grid items, you can customize the following UI components/attributes:

  • Item width and height ratio (recommended to use a portrait ratio)
  • Video title text view
  • Play button (set to null to hide)
  • Item's corner radius
  • Video thumbnail scale mode
val gridLoCf = ShortVideoGridLayout.createDefaultConfig(this)
gridLoCf.ratio = "9:16"
gridLoCf.itemConfiguration?.let { cf ->
    cf.title = TitleConfiguration().apply {
        this.color = ContextCompat.getColor(context, R.color.bls_sv_video_item_title_color)
        this.backgroundRes = R.drawable.bls_sv_bg_carousel_video_item_title
        this.textSize =
            context.resources.getDimension(R.dimen.bls_sv_video_item_title_size)
        this.font = Typeface.DEFAULT
        this.gravity = Gravity.START or Gravity.CENTER_VERTICAL
    }
    cf.playButton = ButtonViewItemConfiguration().apply {
        this.onStateIconRes = R.drawable.ic_play
    }
    cf.cornerRadius = 10F
    cf.imageScaleMode = ImageView.ScaleType.CENTER
}