Hey I am working on chat application. I completed my incoming and outgoing message from How to use different layouts for incoming & outgoing chat messages. Also I tried this How to show date in between conversation in recyclerview or in listview. I added output how my all looks like.
ConversationAdapter.kt
class ConversationAdapter : ListAdapter<Message, RecyclerView.ViewHolder>(MESSAGE_COMPARATOR) {
companion object {
private val MESSAGE_COMPARATOR = object : DiffUtil.ItemCallback<Message>() {
override fun areItemsTheSame(oldItem: Message, newItem: Message): Boolean {
return oldItem.id == newItem.id
}
override fun areContentsTheSame(oldItem: Message, newItem: Message): Boolean {
return ((oldItem.name == newItem.name) && (oldItem.text == oldItem.text)
&& (oldItem.time == newItem.time) && (oldItem.type == newItem.type))
}
}
private const val INCOMING_MESSAGE = 1
private const val OUTGOING_MESSAGE = 2
private const val TIMING = 3
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
return when (viewType) {
INCOMING_MESSAGE -> {
IncomingViewHolder(
IncomingLayoutBinding.inflate(
LayoutInflater.from(parent.context),
parent,
false
)
)
}
OUTGOING_MESSAGE -> {
OutGoingViewHolder(
OutgoingLayoutBinding.inflate(
LayoutInflater.from(parent.context),
parent,
false
)
)
}
else -> {
TimingViewHolder(
TimingLayoutBinding.inflate(
LayoutInflater.from(parent.context),
parent,
false
)
)
}
}
}
override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
when (holder) {
is IncomingViewHolder -> {
holder.bindItem(getItem(position))
}
is OutGoingViewHolder -> {
holder.bindItem(getItem(position))
}
is TimingViewHolder -> {
holder.bindItem(getItem(position))
}
}
}
override fun getItemViewType(position: Int): Int {
return when {
getItem(position).type.equals("incoming") -> {
INCOMING_MESSAGE
}
getItem(position).type.equals("outgoing") -> {
OUTGOING_MESSAGE
}
getItem(position).type.equals("added") -> {
TIMING
}
else -> {
super.getItemViewType(position)
}
}
}
inner class IncomingViewHolder(val binding: IncomingLayoutBinding) : RecyclerView.ViewHolder(binding.root) {
fun bindItem(item: Message) {
binding.incomingMessage.text = item.text
}
}
inner class OutGoingViewHolder(val binding: OutgoingLayoutBinding) : RecyclerView.ViewHolder(binding.root) {
fun bindItem(item: Message) {
binding.outGoingMessage.text = item.text
}
}
inner class TimingViewHolder(val binding: TimingLayoutBinding) : RecyclerView.ViewHolder(binding.root) {
fun bindItem(item: Message) {
binding.timing.text = item.time
}
}
}
MM.kt
data class Message(
val id: String? = null,
val text: String? = null,
val time: String? = null,
val type: String? = null,
val name: String? = null
)
MainActivity.kt
class MainActivity : BaseActivity() {
lateinit var binding: MainLayoutBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = MainLayoutBinding.inflate(layoutInflater)
setContentView(binding.root)
setupAdapter()
}
private fun setupAdapter() {
val list = listOf<Message>(
Message(id = "1", text = "avc", time = "2021-10-08T15:34:00", type = "outgoing"),
Message(id = "2", text = "dsds", time = "2021-10-08T15:36:00", type = "incoming"),
Message(id = "3", type = "added", time = "2021-10-08T00:00:00", name = "ABC"),
Message(id = "4", type = "added", time = "2021-10-07T15:50:00", name = "XYZ"),
Message(id = "5", text = "asvc", time = "2021-10-07T15:46:00", type = "outgoing"),
Message(id = "6", text = "asvc", time = "2021-10-07T15:46:00", type = "incoming"),
Message(id = "6", text = "asvc", time = "2021-10-06T12:34:00", type = "outgoing"),
Message(id = "8", text = "asvc", time = "2021-10-06T12:50:00", type = "incoming"),
Message(id = "9", type = "added", time = "2021-10-06T12:46:00", name = "DEF")
)
val adapter = ConversationAdapter()
binding.conversationRecyclerView.adapter = adapter
adapter.submitList(list)
}
}
timing_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:background="@color/aqua"
android:layout_height="wrap_content">
<TextView
android:id="@+id/timing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
incoming_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:background="@color/red"
android:layout_height="wrap_content">
<TextView
android:id="@+id/incomingMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
outgoing_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:background="@color/yellow"
android:layout_height="wrap_content">
<TextView
android:id="@+id/outGoingMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Output
How to achieve other functionality.
1. How to category my date to show dates between conversation of each day in efficient way because my list is too huge big. I just added the sample
2. How to show scroll effect of dates when user scroll chats just like whatsapp have yesterday, today and other dates format.
3. In above list example there is one property added, which means someone added in group chat. In whatsapp XYZ joined using the groups invite link.
I am adding screen shot of whatsapp
