Stock Chat UI Customization
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(this@ExoPlayerActivity),
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(this@ExoPlayerActivity),
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(this@ExoPlayerActivity),
null,
false
)
separatorViewBinding2.txtDate.text = "New Messages"
val linearLayout = LinearLayout(this@ExoPlayerActivity)
linearLayout.orientation = LinearLayout.VERTICAL
separatorViewBinding?.let {
linearLayout.addView(
separatorViewBinding.root
)
}
linearLayout.addView(separatorViewBinding2.root)
return linearLayout
}
}
return separatorViewBinding?.root
}
}
Updated about 1 year ago