Move chat messages to Material 3

switch to high and mid emphasis color for text in chat bubbles
centralize bubble coloring

Signed-off-by: Andy Scherzinger <info@andy-scherzinger.de>

app/src/main/java/com/nextcloud/talk/adapters/messages/IncomingLocationMessageViewHolder.kt

@@ -41,7 +41,6 @@ import android.webkit.WebView
 import android.webkit.WebViewClient
 import android.widget.Toast
 import androidx.appcompat.content.res.AppCompatResources
-import androidx.core.view.ViewCompat
 import autodagger.AutoInjector
 import coil.load
 import com.amulyakhare.textdrawable.TextDrawable
@@ -50,6 +49,7 @@ import com.nextcloud.talk.application.NextcloudTalkApplication
 import com.nextcloud.talk.application.NextcloudTalkApplication.Companion.sharedApplication
 import com.nextcloud.talk.databinding.ItemCustomIncomingLocationMessageBinding
 import com.nextcloud.talk.models.json.chat.ChatMessage
+import com.nextcloud.talk.ui.theme.ViewThemeUtils
 import com.nextcloud.talk.utils.ApiUtils
 import com.nextcloud.talk.utils.DisplayUtils
 import com.nextcloud.talk.utils.UriUtils
@@ -69,13 +69,14 @@ class IncomingLocationMessageViewHolder(incomingView: View, payload: Any) : Mess
     var locationName: String? = ""
     var locationGeoLink: String? = ""
 
-    @JvmField
     @Inject
-    var context: Context? = null
+    lateinit var context: Context
 
-    @JvmField
     @Inject
-    var appPreferences: AppPreferences? = null
+    lateinit var appPreferences: AppPreferences
+
+    @Inject
+    lateinit var viewThemeUtils: ViewThemeUtils
 
     lateinit var reactionsInterface: ReactionsInterface
 
@@ -155,25 +156,7 @@ class IncomingLocationMessageViewHolder(incomingView: View, payload: Any) : Mess
     }
 
     private fun colorizeMessageBubble(message: ChatMessage) {
-        val resources = itemView.resources
+        viewThemeUtils.themeIncomingMessageBubble(bubble, message.isGrouped, message.isDeleted)
-
-        var bubbleResource = R.drawable.shape_incoming_message
-
-        if (message.isGrouped) {
-            bubbleResource = R.drawable.shape_grouped_incoming_message
-        }
-
-        val bgBubbleColor = if (message.isDeleted) {
-            resources.getColor(R.color.bg_message_list_incoming_bubble_deleted)
-        } else {
-            resources.getColor(R.color.bg_message_list_incoming_bubble)
-        }
-        val bubbleDrawable = DisplayUtils.getMessageSelector(
-            bgBubbleColor,
-            resources.getColor(R.color.transparent),
-            bgBubbleColor, bubbleResource
-        )
-        ViewCompat.setBackground(bubble, bubbleDrawable)
     }
 
     private fun setParentMessageDataOnMessageItem(message: ChatMessage) {

app/src/main/java/com/nextcloud/talk/adapters/messages/IncomingPollMessageViewHolder.kt

@@ -29,7 +29,6 @@ import android.text.TextUtils
 import android.view.View
 import androidx.core.content.ContextCompat
 import androidx.core.content.res.ResourcesCompat
-import androidx.core.view.ViewCompat
 import autodagger.AutoInjector
 import coil.load
 import com.amulyakhare.textdrawable.TextDrawable
@@ -41,6 +40,7 @@ import com.nextcloud.talk.application.NextcloudTalkApplication.Companion.sharedA
 import com.nextcloud.talk.databinding.ItemCustomIncomingPollMessageBinding
 import com.nextcloud.talk.models.json.chat.ChatMessage
 import com.nextcloud.talk.polls.ui.PollMainDialogFragment
+import com.nextcloud.talk.ui.theme.ViewThemeUtils
 import com.nextcloud.talk.utils.ApiUtils
 import com.nextcloud.talk.utils.DisplayUtils
 import com.nextcloud.talk.utils.preferences.AppPreferences
@@ -60,6 +60,9 @@ class IncomingPollMessageViewHolder(incomingView: View, payload: Any) : MessageH
     @Inject
     lateinit var appPreferences: AppPreferences
 
+    @Inject
+    lateinit var viewThemeUtils: ViewThemeUtils
+
     @Inject
     lateinit var ncApi: NcApi
 
@@ -183,26 +186,7 @@ class IncomingPollMessageViewHolder(incomingView: View, payload: Any) : MessageH
     }
 
     private fun colorizeMessageBubble(message: ChatMessage) {
-        val resources = itemView.resources
+        viewThemeUtils.themeIncomingMessageBubble(bubble, message.isGrouped, message.isDeleted)
-
-        var bubbleResource = R.drawable.shape_incoming_message
-
-        if (message.isGrouped) {
-            bubbleResource = R.drawable.shape_grouped_incoming_message
-        }
-
-        val bgBubbleColor = if (message.isDeleted) {
-            ResourcesCompat.getColor(resources, R.color.bg_message_list_incoming_bubble_deleted, null)
-        } else {
-            ResourcesCompat.getColor(resources, R.color.bg_message_list_incoming_bubble, null)
-        }
-        val bubbleDrawable = DisplayUtils.getMessageSelector(
-            bgBubbleColor,
-            ResourcesCompat.getColor(resources, R.color.transparent, null),
-            bgBubbleColor,
-            bubbleResource
-        )
-        ViewCompat.setBackground(bubble, bubbleDrawable)
     }
 
     private fun setParentMessageDataOnMessageItem(message: ChatMessage) {

app/src/main/java/com/nextcloud/talk/adapters/messages/IncomingVoiceMessageViewHolder.kt

@@ -37,7 +37,6 @@ import android.view.View
 import android.widget.SeekBar
 import androidx.core.content.ContextCompat
 import androidx.core.content.res.ResourcesCompat
-import androidx.core.view.ViewCompat
 import androidx.work.WorkInfo
 import androidx.work.WorkManager
 import autodagger.AutoInjector
@@ -261,25 +260,7 @@ class IncomingVoiceMessageViewHolder(incomingView: View, payload: Any) : Message
     }
 
     private fun colorizeMessageBubble(message: ChatMessage) {
-        val resources = itemView.resources
+        viewThemeUtils.themeIncomingMessageBubble(bubble, message.isGrouped, message.isDeleted)
-
-        var bubbleResource = R.drawable.shape_incoming_message
-
-        if (message.isGrouped) {
-            bubbleResource = R.drawable.shape_grouped_incoming_message
-        }
-
-        val bgBubbleColor = if (message.isDeleted) {
-            ResourcesCompat.getColor(resources, R.color.bg_message_list_incoming_bubble_deleted, null)
-        } else {
-            ResourcesCompat.getColor(resources, R.color.bg_message_list_incoming_bubble, null)
-        }
-        val bubbleDrawable = DisplayUtils.getMessageSelector(
-            bgBubbleColor,
-            ResourcesCompat.getColor(resources, R.color.transparent, null),
-            bgBubbleColor, bubbleResource
-        )
-        ViewCompat.setBackground(bubble, bubbleDrawable)
     }
 
     private fun setParentMessageDataOnMessageItem(message: ChatMessage) {

app/src/main/java/com/nextcloud/talk/adapters/messages/MagicIncomingTextMessageViewHolder.kt

@@ -61,13 +61,11 @@ class MagicIncomingTextMessageViewHolder(itemView: View, payload: Any) : Message
 
     private val binding: ItemCustomIncomingTextMessageBinding = ItemCustomIncomingTextMessageBinding.bind(itemView)
 
-    @JvmField
     @Inject
-    var context: Context? = null
+    lateinit var context: Context
 
-    @JvmField
     @Inject
-    var appPreferences: AppPreferences? = null
+    lateinit var appPreferences: AppPreferences
 
     lateinit var reactionsInterface: ReactionsInterface
 

app/src/main/java/com/nextcloud/talk/adapters/messages/MagicOutcomingTextMessageViewHolder.kt

@@ -32,7 +32,6 @@ import android.util.TypedValue
 import android.view.View
 import androidx.core.content.res.ResourcesCompat
 import androidx.core.graphics.ColorUtils
-import androidx.core.view.ViewCompat
 import autodagger.AutoInjector
 import coil.load
 import com.google.android.flexbox.FlexboxLayout
@@ -46,7 +45,6 @@ import com.nextcloud.talk.ui.recyclerview.MessageSwipeCallback
 import com.nextcloud.talk.ui.theme.ServerTheme
 import com.nextcloud.talk.ui.theme.ViewThemeUtils
 import com.nextcloud.talk.utils.ApiUtils
-import com.nextcloud.talk.utils.DisplayUtils.getMessageSelector
 import com.nextcloud.talk.utils.DisplayUtils.searchAndReplaceWithMentionSpan
 import com.nextcloud.talk.utils.TextMatchers
 import com.stfalcon.chatkit.messages.MessageHolders.OutcomingTextMessageViewHolder
@@ -75,7 +73,6 @@ class MagicOutcomingTextMessageViewHolder(itemView: View) : OutcomingTextMessage
         val messageParameters: HashMap<String?, HashMap<String?, String?>>? = message.messageParameters
         var messageString: Spannable = SpannableString(message.text)
         realView.isSelected = false
-        binding.messageTime.setTextColor(ColorUtils.setAlphaComponent(serverTheme.colorText, ALPHA_60_INT))
         val layoutParams = binding.messageTime.layoutParams as FlexboxLayout.LayoutParams
         layoutParams.isWrapBefore = false
         var textSize = context!!.resources.getDimension(R.dimen.chat_text_size)
@@ -95,8 +92,6 @@ class MagicOutcomingTextMessageViewHolder(itemView: View) : OutcomingTextMessage
         binding.messageText.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize)
         binding.messageTime.layoutParams = layoutParams
         binding.messageText.text = messageString
-        binding.messageText.setTextColor(serverTheme.colorText)
-        binding.messageText.setLinkTextColor(serverTheme.colorText)
 
         // parent message handling
         if (!message.isDeleted && message.parentMessage != null) {
@@ -121,7 +116,6 @@ class MagicOutcomingTextMessageViewHolder(itemView: View) : OutcomingTextMessage
         readStatusDrawableInt?.let { drawableInt ->
             ResourcesCompat.getDrawable(context!!.resources, drawableInt, null)?.let {
                 binding.checkMark.setImageDrawable(it)
-                viewThemeUtils.colorImageViewText(binding.checkMark)
             }
         }
 
@@ -169,30 +163,7 @@ class MagicOutcomingTextMessageViewHolder(itemView: View) : OutcomingTextMessage
     }
 
     private fun setBubbleOnChatMessage(message: ChatMessage) {
-        val resources = sharedApplication!!.resources
+        viewThemeUtils.themeOutgoingMessageBubble(bubble, message.isGrouped, message.isDeleted)
-        val elementColor = viewThemeUtils.getElementColor(binding.root.context)
-        val bgBubbleColor = if (message.isDeleted) {
-            ColorUtils.setAlphaComponent(elementColor, HALF_ALPHA_INT)
-        } else {
-            elementColor
-        }
-        if (message.isGrouped) {
-            val bubbleDrawable = getMessageSelector(
-                bgBubbleColor,
-                ResourcesCompat.getColor(resources, R.color.transparent, null),
-                bgBubbleColor,
-                R.drawable.shape_grouped_outcoming_message
-            )
-            ViewCompat.setBackground(bubble, bubbleDrawable)
-        } else {
-            val bubbleDrawable = getMessageSelector(
-                bgBubbleColor,
-                ResourcesCompat.getColor(resources, R.color.transparent, null),
-                bgBubbleColor,
-                R.drawable.shape_outcoming_message
-            )
-            ViewCompat.setBackground(bubble, bubbleDrawable)
-        }
     }
 
     private fun processMessageParameters(

app/src/main/java/com/nextcloud/talk/adapters/messages/OutcomingLocationMessageViewHolder.kt

@@ -34,9 +34,7 @@ import android.webkit.WebView
 import android.webkit.WebViewClient
 import android.widget.Toast
 import androidx.appcompat.content.res.AppCompatResources
-import androidx.core.content.res.ResourcesCompat
 import androidx.core.graphics.ColorUtils
-import androidx.core.view.ViewCompat
 import autodagger.AutoInjector
 import coil.load
 import com.google.android.flexbox.FlexboxLayout
@@ -49,7 +47,6 @@ import com.nextcloud.talk.models.json.chat.ReadStatus
 import com.nextcloud.talk.ui.theme.ServerTheme
 import com.nextcloud.talk.ui.theme.ViewThemeUtils
 import com.nextcloud.talk.utils.ApiUtils
-import com.nextcloud.talk.utils.DisplayUtils
 import com.nextcloud.talk.utils.UriUtils
 import com.stfalcon.chatkit.messages.MessageHolders
 import java.net.URLEncoder
@@ -94,11 +91,8 @@ class OutcomingLocationMessageViewHolder(incomingView: View) : MessageHolders
         colorizeMessageBubble(message)
         binding.messageText.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize)
         binding.messageTime.layoutParams = layoutParams
-        binding.messageTime.setTextColor(ColorUtils.setAlphaComponent(serverTheme.colorText, ALPHA_60_INT))
 
         binding.messageText.text = message.text
-        binding.messageText.setTextColor(serverTheme.colorText)
-        binding.messageText.setLinkTextColor(serverTheme.colorText)
 
         // parent message handling
         setParentMessageDataOnMessageItem(message)
@@ -118,7 +112,6 @@ class OutcomingLocationMessageViewHolder(incomingView: View) : MessageHolders
         readStatusDrawableInt?.let { drawableInt ->
             AppCompatResources.getDrawable(context!!, drawableInt)?.let {
                 binding.checkMark.setImageDrawable(it)
-                viewThemeUtils.colorImageViewText(binding.checkMark)
             }
         }
 
@@ -227,30 +220,7 @@ class OutcomingLocationMessageViewHolder(incomingView: View) : MessageHolders
     }
 
     private fun colorizeMessageBubble(message: ChatMessage) {
-        val resources = sharedApplication!!.resources
+        viewThemeUtils.themeOutgoingMessageBubble(bubble, message.isGrouped, message.isDeleted)
-        val elementColor = viewThemeUtils.getElementColor(binding.root.context)
-        val bgBubbleColor = if (message.isDeleted) {
-            ColorUtils.setAlphaComponent(elementColor, HALF_ALPHA_INT)
-        } else {
-            elementColor
-        }
-        if (message.isGrouped) {
-            val bubbleDrawable = DisplayUtils.getMessageSelector(
-                bgBubbleColor,
-                ResourcesCompat.getColor(resources, R.color.transparent, null),
-                bgBubbleColor,
-                R.drawable.shape_grouped_outcoming_message
-            )
-            ViewCompat.setBackground(bubble, bubbleDrawable)
-        } else {
-            val bubbleDrawable = DisplayUtils.getMessageSelector(
-                bgBubbleColor,
-                ResourcesCompat.getColor(resources, R.color.transparent, null),
-                bgBubbleColor,
-                R.drawable.shape_outcoming_message
-            )
-            ViewCompat.setBackground(bubble, bubbleDrawable)
-        }
     }
 
     private fun openGeoLink() {

app/src/main/java/com/nextcloud/talk/adapters/messages/OutcomingPollMessageViewHolder.kt

@@ -23,12 +23,9 @@ package com.nextcloud.talk.adapters.messages
 
 import android.annotation.SuppressLint
 import android.content.Context
-import android.content.res.ColorStateList
 import android.view.View
 import androidx.appcompat.content.res.AppCompatResources
-import androidx.core.content.res.ResourcesCompat
 import androidx.core.graphics.ColorUtils
-import androidx.core.view.ViewCompat
 import autodagger.AutoInjector
 import coil.load
 import com.nextcloud.talk.R
@@ -43,7 +40,6 @@ import com.nextcloud.talk.polls.ui.PollMainDialogFragment
 import com.nextcloud.talk.ui.theme.ServerTheme
 import com.nextcloud.talk.ui.theme.ViewThemeUtils
 import com.nextcloud.talk.utils.ApiUtils
-import com.nextcloud.talk.utils.DisplayUtils
 import com.nextcloud.talk.utils.preferences.AppPreferences
 import com.stfalcon.chatkit.messages.MessageHolders
 import javax.inject.Inject
@@ -84,12 +80,6 @@ class OutcomingPollMessageViewHolder(outcomingView: View, payload: Any) : Messag
         colorizeMessageBubble(message)
 
         itemView.isSelected = false
-        binding.messageTime.setTextColor(
-            ColorUtils.setAlphaComponent(
-                serverTheme.colorText,
-                ALPHA_60_INT
-            )
-        )
 
         // parent message handling
         setParentMessageDataOnMessageItem(message)
@@ -109,7 +99,6 @@ class OutcomingPollMessageViewHolder(outcomingView: View, payload: Any) : Messag
         readStatusDrawableInt?.let { drawableInt ->
             AppCompatResources.getDrawable(context, drawableInt)?.let {
                 binding.checkMark.setImageDrawable(it)
-                viewThemeUtils.colorImageViewText(binding.checkMark)
             }
         }
 
@@ -142,9 +131,6 @@ class OutcomingPollMessageViewHolder(outcomingView: View, payload: Any) : Messag
         }
 
         if (pollId != null && pollName != null) {
-            binding.messagePollTitle.setTextColor(serverTheme.colorText)
-            binding.messagePollSubtitle.setTextColor(serverTheme.colorText)
-            binding.messagePollIcon.imageTintList = ColorStateList.valueOf(serverTheme.colorText)
             binding.messagePollTitle.text = pollName
 
             val roomToken = (payload as? MessagePayload)!!.roomToken
@@ -198,30 +184,7 @@ class OutcomingPollMessageViewHolder(outcomingView: View, payload: Any) : Messag
     }
 
     private fun colorizeMessageBubble(message: ChatMessage) {
-        val resources = sharedApplication!!.resources
+        viewThemeUtils.themeOutgoingMessageBubble(bubble, message.isGrouped, message.isDeleted)
-        val elementColor = viewThemeUtils.getElementColor(binding.root.context)
-        val bgBubbleColor = if (message.isDeleted) {
-            ColorUtils.setAlphaComponent(elementColor, HALF_ALPHA_INT)
-        } else {
-            elementColor
-        }
-        if (message.isGrouped) {
-            val bubbleDrawable = DisplayUtils.getMessageSelector(
-                bgBubbleColor,
-                ResourcesCompat.getColor(resources, R.color.transparent, null),
-                bgBubbleColor,
-                R.drawable.shape_grouped_outcoming_message
-            )
-            ViewCompat.setBackground(bubble, bubbleDrawable)
-        } else {
-            val bubbleDrawable = DisplayUtils.getMessageSelector(
-                bgBubbleColor,
-                ResourcesCompat.getColor(resources, R.color.transparent, null),
-                bgBubbleColor,
-                R.drawable.shape_outcoming_message
-            )
-            ViewCompat.setBackground(bubble, bubbleDrawable)
-        }
     }
 
     fun assignReactionInterface(reactionsInterface: ReactionsInterface) {
@@ -230,8 +193,6 @@ class OutcomingPollMessageViewHolder(outcomingView: View, payload: Any) : Messag
 
     companion object {
         private val TAG = NextcloudTalkApplication::class.java.simpleName
-        private val ALPHA_60_INT: Int = (255 * 0.6).roundToInt()
         private val ALPHA_80_INT: Int = (255 * 0.8).roundToInt()
-        private const val HALF_ALPHA_INT: Int = 255 / 2
     }
 }

app/src/main/java/com/nextcloud/talk/adapters/messages/OutcomingVoiceMessageViewHolder.kt

@@ -24,16 +24,13 @@ package com.nextcloud.talk.adapters.messages
 
 import android.annotation.SuppressLint
 import android.content.Context
-import android.graphics.PorterDuff
 import android.os.Handler
 import android.util.Log
 import android.view.View
 import android.widget.SeekBar
 import androidx.appcompat.content.res.AppCompatResources
 import androidx.core.content.ContextCompat
-import androidx.core.content.res.ResourcesCompat
 import androidx.core.graphics.ColorUtils
-import androidx.core.view.ViewCompat
 import androidx.work.WorkInfo
 import androidx.work.WorkManager
 import autodagger.AutoInjector
@@ -47,7 +44,6 @@ import com.nextcloud.talk.models.json.chat.ReadStatus
 import com.nextcloud.talk.ui.theme.ServerTheme
 import com.nextcloud.talk.ui.theme.ViewThemeUtils
 import com.nextcloud.talk.utils.ApiUtils
-import com.nextcloud.talk.utils.DisplayUtils
 import com.nextcloud.talk.utils.preferences.AppPreferences
 import com.stfalcon.chatkit.messages.MessageHolders
 import java.util.concurrent.ExecutionException
@@ -91,19 +87,13 @@ class OutcomingVoiceMessageViewHolder(outcomingView: View) : MessageHolders
         colorizeMessageBubble(message)
 
         itemView.isSelected = false
-        binding.messageTime.setTextColor(
-            ColorUtils.setAlphaComponent(
-                serverTheme.colorText,
-                ALPHA_60_INT
-            )
-        )
 
         // parent message handling
         setParentMessageDataOnMessageItem(message)
 
         updateDownloadState(message)
         binding.seekbar.max = message.voiceMessageDuration
-        viewThemeUtils.themeHorizontalSeekBar(binding.seekbar, serverTheme.colorText)
+        viewThemeUtils.themeHorizontalSeekBar(binding.seekbar)
 
         handleIsPlayingVoiceMessageState(message)
 
@@ -142,7 +132,6 @@ class OutcomingVoiceMessageViewHolder(outcomingView: View) : MessageHolders
         readStatusDrawableInt?.let { drawableInt ->
             AppCompatResources.getDrawable(context!!, drawableInt)?.let {
                 binding.checkMark.setImageDrawable(it)
-                viewThemeUtils.colorImageViewText(binding.checkMark)
             }
         }
 
@@ -165,7 +154,6 @@ class OutcomingVoiceMessageViewHolder(outcomingView: View) : MessageHolders
                 context!!,
                 R.drawable.ic_baseline_play_arrow_voice_message_24
             )
-            binding.playPauseBtn.icon.setColorFilter(serverTheme.colorText, PorterDuff.Mode.SRC_ATOP)
             binding.seekbar.progress = SEEKBAR_START
             message.resetVoiceMessage = false
         }
@@ -186,7 +174,6 @@ class OutcomingVoiceMessageViewHolder(outcomingView: View) : MessageHolders
                 context!!,
                 R.drawable.ic_baseline_pause_voice_message_24
             )
-            binding.playPauseBtn.icon.setColorFilter(serverTheme.colorText, PorterDuff.Mode.SRC_ATOP)
             binding.seekbar.progress = message.voiceMessagePlayedSeconds
         } else {
             binding.playPauseBtn.visibility = View.VISIBLE
@@ -194,7 +181,6 @@ class OutcomingVoiceMessageViewHolder(outcomingView: View) : MessageHolders
                 context!!,
                 R.drawable.ic_baseline_play_arrow_voice_message_24
             )
-            binding.playPauseBtn.icon.setColorFilter(serverTheme.colorText, PorterDuff.Mode.SRC_ATOP)
         }
     }
 
@@ -287,30 +273,7 @@ class OutcomingVoiceMessageViewHolder(outcomingView: View) : MessageHolders
     }
 
     private fun colorizeMessageBubble(message: ChatMessage) {
-        val resources = sharedApplication!!.resources
+        viewThemeUtils.themeOutgoingMessageBubble(bubble, message.isGrouped, message.isDeleted)
-        val elementColor = viewThemeUtils.getElementColor(binding.root.context)
-        val bgBubbleColor = if (message.isDeleted) {
-            ColorUtils.setAlphaComponent(elementColor, HALF_ALPHA_INT)
-        } else {
-            elementColor
-        }
-        if (message.isGrouped) {
-            val bubbleDrawable = DisplayUtils.getMessageSelector(
-                bgBubbleColor,
-                ResourcesCompat.getColor(resources, R.color.transparent, null),
-                bgBubbleColor,
-                R.drawable.shape_grouped_outcoming_message
-            )
-            ViewCompat.setBackground(bubble, bubbleDrawable)
-        } else {
-            val bubbleDrawable = DisplayUtils.getMessageSelector(
-                bgBubbleColor,
-                ResourcesCompat.getColor(resources, R.color.transparent, null),
-                bgBubbleColor,
-                R.drawable.shape_outcoming_message
-            )
-            ViewCompat.setBackground(bubble, bubbleDrawable)
-        }
     }
 
     fun assignVoiceMessageInterface(voiceMessageInterface: VoiceMessageInterface) {

app/src/main/java/com/nextcloud/talk/ui/theme/ViewThemeUtils.kt

@@ -28,6 +28,7 @@ import android.graphics.Color
 import android.graphics.PorterDuff
 import android.graphics.drawable.Drawable
 import android.view.View
+import android.view.ViewGroup
 import android.widget.CheckBox
 import android.widget.EditText
 import android.widget.ImageView
@@ -43,6 +44,7 @@ import androidx.appcompat.widget.SearchView.SearchAutoComplete
 import androidx.appcompat.widget.SwitchCompat
 import androidx.core.content.ContextCompat
 import androidx.core.content.res.ResourcesCompat
+import androidx.core.view.ViewCompat
 import androidx.core.view.children
 import androidx.swiperefreshlayout.widget.SwipeRefreshLayout
 import com.google.android.material.appbar.MaterialToolbar
@@ -163,15 +165,11 @@ class ViewThemeUtils @Inject constructor(private val theme: ServerTheme, private
 
     fun themeHorizontalSeekBar(seekBar: SeekBar) {
         withScheme(seekBar) { scheme ->
-            themeHorizontalSeekBar(seekBar, scheme.primary)
+            themeHorizontalProgressBar(seekBar, scheme.primary)
+            seekBar.thumb.setColorFilter(scheme.primary, PorterDuff.Mode.SRC_IN)
         }
     }
 
-    fun themeHorizontalSeekBar(seekBar: SeekBar, @ColorInt color: Int) {
-        themeHorizontalProgressBar(seekBar, color)
-        seekBar.thumb.setColorFilter(color, PorterDuff.Mode.SRC_IN)
-    }
-
     fun themeHorizontalProgressBar(progressBar: ProgressBar?, @ColorInt color: Int) {
         if (progressBar != null) {
             progressBar.indeterminateDrawable.setColorFilter(color, PorterDuff.Mode.SRC_IN)
@@ -321,6 +319,51 @@ class ViewThemeUtils @Inject constructor(private val theme: ServerTheme, private
         }
     }
 
+    fun themeIncomingMessageBubble(bubble: ViewGroup, grouped: Boolean, deleted: Boolean) {
+        val resources = bubble.resources
+
+        var bubbleResource = R.drawable.shape_incoming_message
+
+        if (grouped) {
+            bubbleResource = R.drawable.shape_grouped_incoming_message
+        }
+
+        val bgBubbleColor = if (deleted) {
+            resources.getColor(R.color.bg_message_list_incoming_bubble_deleted)
+        } else {
+            resources.getColor(R.color.bg_message_list_incoming_bubble)
+        }
+        val bubbleDrawable = DisplayUtils.getMessageSelector(
+            bgBubbleColor,
+            resources.getColor(R.color.transparent),
+            bgBubbleColor, bubbleResource
+        )
+        ViewCompat.setBackground(bubble, bubbleDrawable)
+    }
+
+    fun themeOutgoingMessageBubble(bubble: ViewGroup, grouped: Boolean, deleted: Boolean) {
+        withScheme(bubble) { scheme ->
+            val bgBubbleColor = if (deleted) {
+                ColorUtils.setAlphaComponent(scheme.surfaceVariant, HALF_ALPHA_INT)
+            } else {
+                scheme.surfaceVariant
+            }
+
+            val layout = if (grouped) {
+                R.drawable.shape_grouped_outcoming_message
+            } else {
+                R.drawable.shape_outcoming_message
+            }
+            val bubbleDrawable = DisplayUtils.getMessageSelector(
+                bgBubbleColor,
+                ResourcesCompat.getColor(bubble.resources, R.color.transparent, null),
+                bgBubbleColor,
+                layout
+            )
+            ViewCompat.setBackground(bubble, bubbleDrawable)
+        }
+    }
+
     fun colorCardViewBackground(card: MaterialCardView) {
         withScheme(card) { scheme ->
             card.setCardBackgroundColor(scheme.surfaceVariant)
@@ -363,9 +406,9 @@ class ViewThemeUtils @Inject constructor(private val theme: ServerTheme, private
                 SWITCHCOMPAT_TRACK_ALPHA,
                 Color.red(scheme.primary),
                 Color.green(scheme.primary),
-                Color.blue
+                Color.blue(scheme.primary)
-                (scheme.primary)
             )
+
             switchCompat.thumbTintList = ColorStateList(
                 arrayOf(intArrayOf(android.R.attr.state_checked), intArrayOf()),
                 intArrayOf(scheme.primary, thumbUncheckedColor)
@@ -531,6 +574,12 @@ class ViewThemeUtils @Inject constructor(private val theme: ServerTheme, private
         private const val SWITCHCOMPAT_TRACK_ALPHA: Int = 77
         private const val PROGRESS_LIGHTNESS_LIGHT_THEME: Float = 0.76f
         private const val PROGRESS_LIGHTNESS_DARK_THEME: Float = 0.28f
+        private const val TRACK_ALPHA: Int = 77
+        private const val HALF_ALPHA_INT: Int = 255 / 2
+        private const val HSL_SIZE: Int = 3
+        private const val INDEX_LIGHTNESS: Int = 2
+        private const val LIGHTNESS_LIGHT_THEME: Float = 0.76f
+        private const val LIGHTNESS_DARK_THEME: Float = 0.28f
         private const val SURFACE_OPACITY_BUTTON_DISABLED: Float = 0.12f
         private const val ON_SURFACE_OPACITY_BUTTON_DISABLED: Float = 0.38f
         private const val SEARCH_TEXT_SIZE: Float = 16f

app/src/main/res/layout/controller_chat.xml

@@ -84,8 +84,8 @@
             app:outcomingDefaultBubblePressedColor="@color/colorPrimary"
             app:outcomingDefaultBubbleSelectedColor="@color/transparent"
             app:outcomingImageTimeTextSize="12sp"
-            app:outcomingTextColor="@color/nc_outcoming_text_default"
+            app:outcomingTextColor="@color/high_emphasis_text"
-            app:outcomingTextLinkColor="@color/nc_outcoming_text_default"
+            app:outcomingTextLinkColor="@color/high_emphasis_text"
             app:outcomingTextSize="@dimen/chat_text_size"
             app:outcomingTimeTextSize="12sp"
             app:textAutoLink="all" />

app/src/main/res/layout/item_custom_incoming_location_message.xml

@@ -87,6 +87,7 @@
             android:layout_height="wrap_content"
             android:layout_below="@id/messageText"
             android:layout_marginStart="8dp"
+            android:textColor="@color/medium_emphasis_text"
             app:layout_alignSelf="center" />
 
         <include

app/src/main/res/layout/item_custom_incoming_poll_message.xml

@@ -99,6 +99,7 @@
             android:layout_height="wrap_content"
             android:layout_below="@id/messageText"
             android:layout_marginStart="8dp"
+            android:textColor="@color/medium_emphasis_text"
             app:layout_alignSelf="center"
             tools:text="12:38" />
 

app/src/main/res/layout/item_custom_incoming_text_message.xml

@@ -83,6 +83,7 @@
             android:layout_height="wrap_content"
             android:layout_below="@id/messageText"
             android:layout_marginStart="8dp"
+            android:textColor="@color/medium_emphasis_text"
             android:textIsSelectable="false"
             app:layout_alignSelf="center" />
 

app/src/main/res/layout/item_custom_incoming_voice_message.xml

@@ -40,77 +40,78 @@
             android:layout_marginEnd="8dp"
             app:roundAsCircle="true" />
 
-        <com.google.android.flexbox.FlexboxLayout
+    <com.google.android.flexbox.FlexboxLayout
-            android:id="@id/bubble"
+        android:id="@id/bubble"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_marginEnd="@dimen/message_incoming_bubble_margin_right"
+        android:layout_toEndOf="@id/messageUserAvatar"
+        android:orientation="vertical"
+        app:alignContent="stretch"
+        app:alignItems="stretch"
+        app:flexWrap="wrap"
+        app:justifyContent="flex_end">
+
+        <include
+            android:id="@+id/message_quote"
+            layout="@layout/item_message_quote"
+            android:visibility="gone" />
+
+        <androidx.emoji.widget.EmojiTextView
+            android:id="@+id/messageAuthor"
             android:layout_width="match_parent"
-            android:layout_height="match_parent"
+            android:layout_height="wrap_content"
-            android:layout_marginEnd="@dimen/message_incoming_bubble_margin_right"
+            android:layout_marginBottom="4dp"
-            android:layout_toEndOf="@id/messageUserAvatar"
+            android:textAlignment="viewStart"
-            android:orientation="vertical"
+            android:textColor="@color/textColorMaxContrast"
-            app:alignContent="stretch"
+            android:textSize="12sp" />
-            app:alignItems="stretch"
-            app:flexWrap="wrap"
-            app:justifyContent="flex_end">
 
-                <include
+        <LinearLayout
-                    android:id="@+id/message_quote"
+            android:layout_width="match_parent"
-                    layout="@layout/item_message_quote"
+            android:layout_height="wrap_content"
-                    android:visibility="gone" />
+            android:gravity="center_vertical"
+            android:orientation="horizontal">
 
-                <androidx.emoji.widget.EmojiTextView
+            <ProgressBar
-                    android:id="@+id/messageAuthor"
+                android:id="@+id/progressBar"
-                    android:layout_width="match_parent"
+                android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
+                android:layout_height="wrap_content"
-                    android:layout_marginBottom="4dp"
+                android:layout_gravity="center"
-                    android:textAlignment="viewStart"
+                android:visibility="gone" />
-                    android:textColor="@color/textColorMaxContrast"
-                    android:textSize="12sp" />
 
-                <LinearLayout
+            <com.google.android.material.button.MaterialButton
-                    android:layout_width="match_parent"
+                android:id="@+id/playPauseBtn"
-                    android:layout_height="wrap_content"
+                style="@style/Widget.AppTheme.Button.IconButton"
-                    android:orientation="horizontal"
+                android:layout_width="48dp"
-                    android:gravity="center_vertical">
+                android:layout_height="48dp"
+                android:contentDescription="@string/play_pause_voice_message"
+                android:visibility="visible"
+                app:cornerRadius="@dimen/button_corner_radius"
+                app:icon="@drawable/ic_baseline_play_arrow_voice_message_24"
+                app:iconSize="40dp"
+                app:iconTint="@color/nc_incoming_text_default" />
 
-                        <ProgressBar
+            <SeekBar
-                            android:id="@+id/progressBar"
+                android:id="@+id/seekbar"
-                            android:layout_width="wrap_content"
+                android:layout_width="match_parent"
-                            android:layout_height="wrap_content"
+                android:layout_height="wrap_content"
-                            android:layout_gravity="center"
+                tools:progress="50" />
-                            android:visibility="gone"/>
 
-                        <com.google.android.material.button.MaterialButton
+        </LinearLayout>
-                            android:id="@+id/playPauseBtn"
-                            style="@style/Widget.AppTheme.Button.IconButton"
-                            android:layout_width="48dp"
-                            android:layout_height="48dp"
-                            android:contentDescription="@string/play_pause_voice_message"
-                            android:visibility="visible"
-                            app:cornerRadius="@dimen/button_corner_radius"
-                            app:icon="@drawable/ic_baseline_play_arrow_voice_message_24"
-                            app:iconSize="40dp"
-                            app:iconTint="@color/nc_incoming_text_default" />
 
-                        <SeekBar
+        <TextView
-                            android:id="@+id/seekbar"
+            android:id="@id/messageTime"
-                            android:layout_width="match_parent"
+            android:layout_width="wrap_content"
-                            android:layout_height="wrap_content"
+            android:layout_height="wrap_content"
-                            tools:progress="50" />
+            android:layout_below="@id/messageText"
+            android:layout_marginStart="8dp"
+            android:textColor="@color/medium_emphasis_text"
+            app:layout_alignSelf="center"
+            tools:text="12:38" />
 
-                </LinearLayout>
+        <include
+            android:id="@+id/reactions"
+            layout="@layout/reactions_inside_message" />
 
-                <TextView
+    </com.google.android.flexbox.FlexboxLayout>
-                    android:id="@id/messageTime"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_below="@id/messageText"
-                    android:layout_marginStart="8dp"
-                    app:layout_alignSelf="center"
-                    tools:text="12:38"/>
-
-            <include
-                android:id="@+id/reactions"
-                layout="@layout/reactions_inside_message" />
-
-        </com.google.android.flexbox.FlexboxLayout>
 </RelativeLayout>

app/src/main/res/layout/item_custom_outcoming_location_message.xml

@@ -58,6 +58,7 @@
             android:layout_alignWithParentIfMissing="true"
             android:lineSpacingMultiplier="1.2"
             android:textAlignment="viewStart"
+            android:textColor="@color/high_emphasis_text"
             android:textColorHighlight="@color/nc_grey"
             android:textIsSelectable="false"
             tools:text="Talk to you later!" />
@@ -68,6 +69,7 @@
             android:layout_height="wrap_content"
             android:layout_below="@id/messageText"
             android:layout_marginStart="8dp"
+            android:textColor="@color/medium_emphasis_text"
             app:layout_alignSelf="center"
             tools:text="10:35" />
 
@@ -78,7 +80,8 @@
             android:layout_below="@id/messageTime"
             android:layout_marginStart="8dp"
             android:contentDescription="@null"
-            app:layout_alignSelf="center" />
+            app:layout_alignSelf="center"
+            app:tint="@color/high_emphasis_text" />
 
         <include
             android:id="@+id/reactions"

app/src/main/res/layout/item_custom_outcoming_poll_message.xml

@@ -56,14 +56,13 @@
                 android:layout_height="wrap_content"
                 android:contentDescription="@null"
                 android:src="@drawable/ic_baseline_bar_chart_24"
-                app:tint="@color/nc_outcoming_text_default" />
+                app:tint="@color/high_emphasis_text" />
 
             <androidx.emoji.widget.EmojiTextView
                 android:id="@+id/message_poll_title"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:textAlignment="viewStart"
-                android:textColor="@color/nc_outcoming_text_default"
                 android:textStyle="bold"
                 tools:text="This is the poll title?" />
 
@@ -75,7 +74,7 @@
             android:layout_height="wrap_content"
             android:layout_marginTop="@dimen/double_margin_between_elements"
             android:text="@string/message_poll_tap_to_open"
-            android:textColor="@color/nc_outcoming_text_default" />
+            android:textColor="@color/high_emphasis_text" />
 
         <TextView
             android:id="@id/messageTime"
@@ -83,7 +82,7 @@
             android:layout_height="wrap_content"
             android:layout_below="@id/messageText"
             android:layout_marginStart="8dp"
-            android:textColor="@color/nc_outcoming_text_default"
+            android:textColor="@color/medium_emphasis_text"
             app:layout_alignSelf="center"
             tools:text="10:35" />
 
@@ -94,8 +93,8 @@
             android:layout_below="@id/messageTime"
             android:layout_marginStart="8dp"
             android:contentDescription="@null"
-            android:textColor="@color/nc_outcoming_text_default"
+            app:layout_alignSelf="center"
-            app:layout_alignSelf="center" />
+            app:tint="@color/high_emphasis_text" />
 
         <include
             android:id="@+id/reactions"

app/src/main/res/layout/item_custom_outcoming_text_message.xml

@@ -63,6 +63,8 @@
             android:layout_height="wrap_content"
             android:layout_below="@id/messageText"
             android:layout_marginStart="8dp"
+            android:alpha="0.6"
+            android:textColor="@color/medium_emphasis_text"
             android:textIsSelectable="false"
             app:layout_alignSelf="center"
             tools:text="10:35" />
@@ -74,7 +76,8 @@
             android:layout_below="@id/messageTime"
             android:layout_marginStart="8dp"
             android:contentDescription="@null"
-            app:layout_alignSelf="center" />
+            app:layout_alignSelf="center"
+            app:tint="@color/high_emphasis_text" />
 
         <include
             android:id="@+id/reactions"

app/src/main/res/layout/item_custom_outcoming_voice_message.xml

@@ -51,17 +51,17 @@
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:orientation="horizontal"
+            android:gravity="center_vertical"
-            android:gravity="center_vertical">
+            android:orientation="horizontal">
 
             <ProgressBar
                 android:id="@+id/progressBar"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center"
+                android:indeterminateTint="@color/nc_outcoming_text_default"
                 android:progressTint="@color/fontAppbar"
-                android:visibility="gone"
+                android:visibility="gone" />
-                android:indeterminateTint="@color/nc_outcoming_text_default"/>
 
             <com.google.android.material.button.MaterialButton
                 android:id="@+id/playPauseBtn"
@@ -70,11 +70,11 @@
                 android:layout_height="48dp"
                 android:contentDescription="@string/play_pause_voice_message"
                 android:visibility="visible"
-                app:rippleColor="#1FFFFFFF"
                 app:cornerRadius="@dimen/button_corner_radius"
                 app:icon="@drawable/ic_baseline_play_arrow_voice_message_24"
                 app:iconSize="40dp"
-                app:iconTint="@color/nc_outcoming_text_default" />
+                app:iconTint="@color/high_emphasis_text"
+                app:rippleColor="#1FFFFFFF" />
 
             <SeekBar
                 android:id="@+id/seekbar"
@@ -92,6 +92,7 @@
             android:layout_height="wrap_content"
             android:layout_below="@id/messageText"
             android:layout_marginStart="8dp"
+            android:textColor="@color/medium_emphasis_text"
             app:layout_alignSelf="center"
             tools:text="10:35" />
 
@@ -101,8 +102,9 @@
             android:layout_height="wrap_content"
             android:layout_below="@id/messageTime"
             android:layout_marginStart="8dp"
+            android:contentDescription="@null"
             app:layout_alignSelf="center"
-            android:contentDescription="@null" />
+            app:tint="@color/high_emphasis_text" />
 
         <include
             android:id="@+id/reactions"