improve voice message UI

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

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

@@ -89,7 +89,7 @@ class OutcomingVoiceMessageViewHolder(incomingView: View) : MessageHolders
         colorizeMessageBubble(message)
 
         itemView.isSelected = false
-        binding.messageTime.setTextColor(context?.resources!!.getColor(R.color.warm_grey_four))
+        binding.messageTime.setTextColor(context!!.resources.getColor(R.color.white60))
 
         // parent message handling
         setParentMessageDataOnMessageItem(message)

app/src/main/res/drawable/voice_message_outgoing_seek_bar_ruler.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android"
-    android:shape="line">
-
-    <stroke android:width="2dp" android:color="@color/nc_voice_message_outgoing_controls"/>
-    <corners android:radius="1dp" />
-
-</shape>
-

app/src/main/res/drawable/voice_message_outgoing_seek_bar_slider.xml

@@ -1,9 +1,29 @@
 <?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Nextcloud Talk application
+  ~
+  ~ @author Marcel Hibbe
+  ~ Copyright (C) 2021 Marcel Hibbe <dev@mhibbe.de>
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU General Public License as published by
+  ~ the Free Software Foundation, either version 3 of the License, or
+  ~ at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License
+  ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="oval">
 
     <size android:height="12dp" android:width="12dp"/>
-    <solid android:color="@color/nc_voice_message_outgoing_controls" />
+    <solid android:color="#ffffff" />
     <corners android:radius="1dp" />
 
 </shape>

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

@@ -24,6 +24,7 @@
 
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginLeft="16dp"
@@ -77,29 +78,35 @@
                             android:layout_gravity="center"
                             android:visibility="gone"/>
 
-                        <ImageButton
+                        <com.google.android.material.button.MaterialButton
                             android:id="@+id/playBtn"
-                            android:layout_width="44dp"
-                            android:layout_height="44dp"
-                            android:background="@drawable/ic_baseline_play_arrow_voice_message_24"
+                            style="@style/Widget.AppTheme.Button.IconButton"
+                            android:layout_width="48dp"
+                            android:layout_height="48dp"
+                            android:contentDescription="@string/play_voice_message"
                             android:visibility="visible"
-                            android:contentDescription="@string/play_voice_message">
-                        </ImageButton>
+                            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" />
 
-                        <ImageButton
+                        <com.google.android.material.button.MaterialButton
                             android:id="@+id/pauseBtn"
-                            android:layout_width="44dp"
-                            android:layout_height="44dp"
-                            android:background="@drawable/ic_baseline_pause_voice_message_24"
+                            style="@style/Widget.AppTheme.Button.IconButton"
+                            android:layout_width="48dp"
+                            android:layout_height="48dp"
+                            android:contentDescription="@string/pause_voice_message"
                             android:visibility="gone"
-                            android:contentDescription="@string/pause_voice_message">
-                        </ImageButton>
+                            app:cornerRadius="@dimen/button_corner_radius"
+                            app:icon="@drawable/ic_baseline_pause_voice_message_24"
+                            app:iconSize="40dp"
+                            app:iconTint="@color/nc_incoming_text_default" />
 
                         <SeekBar
                             android:id="@+id/seekbar"
+                            style="@style/Nextcloud.Material.Incoming.SeekBar"
                             android:layout_width="200dp"
-                            android:layout_height="wrap_content">
-                        </SeekBar>
+                            android:layout_height="wrap_content" />
 
                 </LinearLayout>
 
@@ -109,7 +116,8 @@
                     android:layout_height="wrap_content"
                     android:layout_below="@id/messageText"
                     android:layout_marginStart="8dp"
-                    app:layout_alignSelf="center" />
+                    app:layout_alignSelf="center"
+                    tools:text="12:38"/>
 
         </com.google.android.flexbox.FlexboxLayout>
 </RelativeLayout>

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

@@ -59,7 +59,7 @@
             android:lineSpacingMultiplier="1.2"
             android:textColorHighlight="@color/nc_grey"
             android:textIsSelectable="true"
-            tools:text="Talk to ayou later!" />
+            tools:text="Talk to you later!" />
 
         <TextView
             android:id="@id/messageTime"

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

@@ -2,8 +2,10 @@
   ~ Nextcloud Talk application
   ~
   ~ @author Mario Danic
+  ~ @author Marcel Hibbe
   ~ @author Andy Scherzinger
   ~ Copyright (C) 2021 Andy Scherzinger <info@andy-scherzinger.de>
+  ~ Copyright (C) 2021 Marcel Hibbe <dev@mhibbe.de>
   ~ Copyright (C) 2017-2018 Mario Danic <mario@lovelyhq.com>
   ~
   ~ This program is free software: you can redistribute it and/or modify
@@ -60,32 +62,37 @@
                 android:progressTint="@color/fontAppbar"
                 android:visibility="gone"/>
 
-            <ImageButton
+            <com.google.android.material.button.MaterialButton
                 android:id="@+id/playBtn"
-                android:layout_width="44dp"
-                android:layout_height="44dp"
-                android:background="@drawable/ic_baseline_play_arrow_voice_message_24"
+                style="@style/Widget.AppTheme.Button.IconButton"
+                android:layout_width="48dp"
+                android:layout_height="48dp"
+                android:contentDescription="@string/play_voice_message"
                 android:visibility="visible"
-                android:contentDescription="@string/play_voice_message">
-            </ImageButton>
+                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" />
 
-            <ImageButton
+            <com.google.android.material.button.MaterialButton
                 android:id="@+id/pauseBtn"
-                android:layout_width="44dp"
-                android:layout_height="44dp"
-                android:background="@drawable/ic_baseline_pause_voice_message_24"
+                style="@style/Widget.AppTheme.Button.IconButton"
+                android:layout_width="48dp"
+                android:layout_height="48dp"
+                android:contentDescription="@string/pause_voice_message"
                 android:visibility="gone"
-                android:contentDescription="@string/pause_voice_message">
-            </ImageButton>
+                app:cornerRadius="@dimen/button_corner_radius"
+                app:icon="@drawable/ic_baseline_pause_voice_message_24"
+                app:iconSize="40dp"
+                app:iconTint="@color/nc_outcoming_text_default" />
 
             <SeekBar
                 android:id="@+id/seekbar"
+                style="@style/Nextcloud.Material.Outgoing.SeekBar"
                 android:layout_width="200dp"
                 android:layout_height="40dp"
-                android:progressDrawable="@drawable/voice_message_outgoing_seek_bar_ruler"
                 android:thumb="@drawable/voice_message_outgoing_seek_bar_slider"
-                tools:progress="50">
-            </SeekBar>
+                tools:progress="50" />
 
         </LinearLayout>
 

app/src/main/res/values/styles.xml

@@ -177,4 +177,18 @@
         <item name="android:typeface">sans</item>
         <item name="android:textStyle">bold</item>
     </style>
+
+    <style name="Nextcloud.Material.Incoming.SeekBar" parent="Widget.AppCompat.SeekBar">
+        <item name="android:progressBackgroundTint">@color/medium_emphasis_text</item>
+        <item name="android:progressTint">@color/colorPrimary</item>
+        <item name="android:colorControlActivated">@color/colorPrimary</item>
+    </style>
+
+    <style name="Nextcloud.Material.Outgoing.SeekBar" parent="Widget.AppCompat.SeekBar">
+        <item name="android:progressBackgroundTint">#deffffff</item>
+        <item name="android:progressTint">#ffffff</item>
+        <item name="android:colorControlActivated">#ffffff</item>
+        <item name="android:colorControlNormal">#ffffff</item>
+    </style>
+
 </resources>