GuidesAPI EndpointsQuestionsChangelog

Stock Chat UI Customization

Suggest Edits

Customize Snap to Live button in stock chat UI

Integrator can implement ChatSnapToLiveDelegate to pass his own snap to live view with ConstraintSet. See the sample code below.

val chatSnapToLiveDelegate = object : ChatSnapToLiveDelegate {
                val snapToLiveCard = DemoSnapToLiveBinding.inflate(
                    LayoutInflater.from([email protected]),
                    null,
                    false
                )

                override fun getSnapToLiveView(): View {
                    return snapToLiveCard.root
                }

                override fun applyConstraintsOnChatViewForSnapToLiveView(
                    constraintSet: ConstraintSet,
                    rootViewId: Int
                ) {
                    constraintSet.connect(
                        getSnapToLiveView().id,
                        ConstraintSet.START,
                        ConstraintSet.PARENT_ID,
                        ConstraintSet.START
                    )
                    constraintSet.connect(
                        getSnapToLiveView().id,
                        ConstraintSet.BOTTOM,
                        ConstraintSet.PARENT_ID,
                        ConstraintSet.BOTTOM
                    )
                    constraintSet.connect(
                        getSnapToLiveView().id,
                        ConstraintSet.END,
                        ConstraintSet.PARENT_ID,
                        ConstraintSet.END
                    )
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
                        constraintSet.setHorizontalBias(
                            getSnapToLiveView().id,
                            0.5f
                        )
                    } else {
                        constraintSet.setHorizontalBias(
                            getSnapToLiveView().id,
                            0.5f
                        )
                    }
                    constraintSet.setMargin(
                        getSnapToLiveView().id,
                        ConstraintSet.START,
                        resources.getDimensionPixelSize(com.livelike.engagementsdk.R.dimen.livelike_snap_live_margin_start)
                    )
                    constraintSet.setMargin(
                        getSnapToLiveView().id,
                        ConstraintSet.LEFT,
                        resources.getDimensionPixelSize(com.livelike.engagementsdk.R.dimen.livelike_snap_live_margin_left)
                    )
                    constraintSet.setMargin(
                        getSnapToLiveView().id,
                        ConstraintSet.END,
                        0
                    )
                    constraintSet.setMargin(
                        getSnapToLiveView().id,
                        ConstraintSet.RIGHT,
                        0
                    )
                    constraintSet.setMargin(
                        getSnapToLiveView().id,
                        ConstraintSet.BOTTOM,
                        350
                    )
                }
            }
            binding.chatWidget.chatView.setChatSnapToLiveDelegate(chatSnapToLiveDelegate)

Customize Scrollbar in Stock Chat UI

Integrator can customize the scrollbar of the stock Chat UI with their own drawable. See the sample code below.

📘

This is only applicable for Android 10 (API level 29) and above

binding.chatWidget.chatView.setScrollBarEnabled(isScrollBarNeeded=true,
                                                scrollbarDrawable = AppCompatResources.getDrawable(this,android.R.color.darker_gray))

Insert custom content between messages in Stock Chat UI

binding.chatWidget.chatView.chatViewSeparatorContentDelegate =
                object : ChatViewSeparatorContentDelegate {
                    override fun getSeparatorView(
                        messageTop: LiveLikeChatMessage?,
                        messageBottom: LiveLikeChatMessage?
                    ): View? {
                        var separatorViewBinding: DemoChatDateViewBinding? =
                            DemoChatDateViewBinding.inflate(
                                LayoutInflater.from([email protected]),
                                null,
                                false
                            )

                        val today = ZonedDateTime.now()
                        val yesterday = today.minusDays(1)
                        val b = messageBottom?.createdAt?.parseISODateTime()
                        val mBottom = if (b != null) ZonedDateTime.ofInstant(
                            b.toInstant(),
                            ZoneId.systemDefault()
                        )?.dayOfMonth
                        else null
                        val t = messageTop?.createdAt?.parseISODateTime()
                        val mTop = if (t != null)
                            ZonedDateTime.ofInstant(
                                t.toInstant(),
                                ZoneId.systemDefault()
                            )?.dayOfMonth
                        else null
                        //println("ExoPlayerActivity.getSeparatorView>>$mBottom >> $mTop >> ${today.dayOfMonth} >>${yesterday.dayOfMonth} >> ${messageTop?.message} >> ${messageBottom?.message}")
                        if (messageTop == null) {
                            separatorViewBinding?.txtDate?.text = when {
                                today.dayOfMonth == mBottom -> "Today"
                                yesterday.dayOfMonth == mBottom -> "Yesterday"
                                else -> messageBottom?.createdAt?.parseISODateTime()
                                    ?.toLocalDateTime()?.format(
                                        DateTimeFormatter.ISO_LOCAL_DATE
                                    )
                            }
                        } else if (mTop == mBottom) {
                            separatorViewBinding = null
                        } else {
                            when {
                                today.dayOfMonth == mBottom -> separatorViewBinding?.txtDate?.text =
                                    "Today"
                                yesterday.dayOfMonth == mBottom -> separatorViewBinding?.txtDate?.text =
                                    "Yesterday"
                                messageBottom?.createdAt != null -> separatorViewBinding?.txtDate?.text =
                                    messageBottom?.createdAt?.parseISODateTime()?.format(
                                        DateTimeFormatter.ISO_LOCAL_DATE
                                    )
                                else -> {
                                    separatorViewBinding = null
                                }
                            }
                        }
                        if (messageBottom?.createdAt?.parseISODateTime()?.toLocalDateTime()
                                ?.isAfter(
                                    lastMessageTime?.parseISODateTime()?.toLocalDateTime()
                                ) == true
                        ) {
                            if (messageTop?.createdAt?.parseISODateTime()?.toLocalDateTime()
                                    ?.isAfter(
                                        (lastMessageTime?.parseISODateTime()?.toLocalDateTime())
                                    ) != true
                            ) {
                                val separatorViewBinding2 = DemoChatDateViewBinding.inflate(
                                    LayoutInflater.from([email protected]),
                                    null,
                                    false
                                )
                                separatorViewBinding2.txtDate.text = "New Messages"
                                val linearLayout = LinearLayout([email protected])
                                linearLayout.orientation = LinearLayout.VERTICAL
                                separatorViewBinding?.let {
                                    linearLayout.addView(
                                        separatorViewBinding.root
                                    )
                                }
                                linearLayout.addView(separatorViewBinding2.root)
                                return linearLayout
                            }
                        }
                        return separatorViewBinding?.root
                    }
                }

Updated 8 days ago