tinting the in progress recording icon to the colorPrimary

- creates extension helpers for tinting and reading theme attributes
-extracts the background from the recording vector icon and set as a separate tintable background drawable

vector/src/main/java/im/vector/app/core/extensions/Context.kt

@@ -17,6 +17,8 @@
 package im.vector.app.core.extensions
 
 import android.content.Context
+import android.util.TypedValue
+import androidx.annotation.AttrRes
 import im.vector.app.core.di.HasVectorInjector
 import im.vector.app.core.di.VectorComponent
 
@@ -28,3 +30,11 @@ fun Context.vectorComponent(): VectorComponent {
         throw IllegalStateException("Your application context doesn't implement HasVectorInjector")
     }
 }
+
+fun Context.fetchThemeColor(@AttrRes themeColorResId: Int): Int {
+    val typedValue = TypedValue()
+    val a = obtainStyledAttributes(typedValue.data, intArrayOf(themeColorResId))
+    val color = a.getColor(0, 0)
+    a.recycle()
+    return color
+}

vector/src/main/java/im/vector/app/core/extensions/ViewExtensions.kt

@@ -18,11 +18,17 @@ package im.vector.app.core.extensions
 
 import android.graphics.drawable.Drawable
 import android.text.InputType
+import android.util.TypedValue
 import android.view.View
 import android.view.ViewGroup
 import android.widget.EditText
 import android.widget.ImageView
+import androidx.annotation.AttrRes
+import androidx.annotation.DimenRes
+import androidx.annotation.DrawableRes
 import androidx.appcompat.widget.SearchView
+import androidx.core.content.ContextCompat
+import androidx.core.graphics.drawable.DrawableCompat
 import androidx.core.view.isVisible
 import im.vector.app.R
 
@@ -58,3 +64,15 @@ fun ImageView.setDrawableOrHide(drawableRes: Drawable?) {
     setImageDrawable(drawableRes)
     isVisible = drawableRes != null
 }
+
+fun View.setAttributeTintedBackground(@DrawableRes drawableRes: Int, @AttrRes tint: Int) {
+    val drawable = ContextCompat.getDrawable(context, drawableRes)!!
+    DrawableCompat.setTint(drawable, context.fetchThemeColor(tint))
+    background = drawable
+}
+
+fun View.setAttributeBackground(@AttrRes attributeId: Int) {
+    val typedValue = TypedValue()
+    context.theme.resolveAttribute(attributeId, typedValue, true)
+    setBackgroundResource(typedValue.resourceId)
+}

vector/src/main/java/im/vector/app/features/home/room/detail/composer/VoiceMessageRecorderView.kt

@@ -27,6 +27,8 @@ import androidx.core.view.isVisible
 import androidx.core.view.updateLayoutParams
 import im.vector.app.BuildConfig
 import im.vector.app.R
+import im.vector.app.core.extensions.setAttributeBackground
+import im.vector.app.core.extensions.setAttributeTintedBackground
 import im.vector.app.core.hardware.vibrate
 import im.vector.app.core.utils.CountUpTimer
 import im.vector.app.core.utils.DimensionConverter
@@ -366,6 +368,7 @@ class VoiceMessageRecorderView: ConstraintLayout, VoiceMessagePlaybackTracker.Li
 
     private fun showRecordingViews() {
         views.voiceMessageMicButton.setImageResource(R.drawable.ic_voice_mic_recording)
+        views.voiceMessageMicButton.setAttributeTintedBackground(R.drawable.circle_with_halo, R.attr.colorPrimary)
         views.voiceMessageMicButton.updateLayoutParams<MarginLayoutParams> {
             setMargins(0, 0, 0, 0)
         }
@@ -443,6 +446,7 @@ class VoiceMessageRecorderView: ConstraintLayout, VoiceMessagePlaybackTracker.Li
     private fun resetMicButtonUi() {
         views.voiceMessageMicButton.isVisible = true
         views.voiceMessageMicButton.setImageResource(R.drawable.ic_voice_mic)
+        views.voiceMessageMicButton.setAttributeBackground(android.R.attr.selectableItemBackgroundBorderless)
         views.voiceMessageMicButton.updateLayoutParams<MarginLayoutParams> {
             if (rtlXMultiplier == -1) {
                 // RTL

vector/src/main/res/drawable/circle_with_halo.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="oval">
+            <solid android:color="#33FF0000" />
+        </shape>
+    </item>
+    <item
+        android:bottom="4dp"
+        android:left="4dp"
+        android:right="4dp"
+        android:top="4dp">
+        <shape android:shape="oval">
+            <solid android:color="#FF0000" />
+        </shape>
+    </item>
+</layer-list>

vector/src/main/res/drawable/ic_voice_mic_recording.xml

@@ -3,14 +3,6 @@
     android:height="52dp"
     android:viewportWidth="52"
     android:viewportHeight="52">
-  <path
-      android:pathData="M26.173,26.1729m-22.7631,0a22.7631,22.7631 0,1 1,45.5262 0a22.7631,22.7631 0,1 1,-45.5262 0"
-      android:fillColor="#0DBD8B"/>
-  <path
-      android:pathData="M26,26m-26,0a26,26 0,1 1,52 0a26,26 0,1 1,-52 0"
-      android:strokeAlpha="0.2"
-      android:fillColor="#0DBD8B"
-      android:fillAlpha="0.2"/>
   <path
       android:pathData="M21.2414,18.7749C21.2414,16.051 23.4496,13.8429 26.1734,13.8429C28.8973,13.8429 31.1054,16.051 31.1054,18.7749V26.1509C31.1054,28.8747 28.8973,31.0829 26.1734,31.0829C23.4496,31.0829 21.2414,28.8747 21.2414,26.1509V18.7749ZM17.542,24.2475C18.5968,24.2475 19.4518,25.1025 19.4518,26.1572C19.4518,29.8561 22.4509,32.8596 26.1586,32.8675C26.1637,32.8674 26.1689,32.8674 26.174,32.8674C26.179,32.8674 26.184,32.8674 26.189,32.8675C29.896,32.8589 32.8944,29.8556 32.8944,26.1572C32.8944,25.1025 33.7494,24.2475 34.8041,24.2475C35.8588,24.2475 36.7138,25.1025 36.7138,26.1572C36.7138,31.3227 32.9916,35.6165 28.0837,36.5143V37.24C28.0837,38.2947 27.2287,39.1497 26.174,39.1497C25.1193,39.1497 24.2643,38.2947 24.2643,37.24V36.5147C19.3555,35.6176 15.6323,31.3233 15.6323,26.1572C15.6323,25.1025 16.4873,24.2475 17.542,24.2475Z"
       android:fillColor="#ffffff"