improve voice message UI

Signed-off-by: Andy Scherzinger <info@andy-scherzinger.de>
This commit is contained in:
Andy Scherzinger 2021-06-21 21:56:20 +02:00
parent edc4f65780
commit db68b4e93d
No known key found for this signature in database
GPG Key ID: 6CADC7E3523C308B
7 changed files with 82 additions and 42 deletions

View File

@ -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)

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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"

View File

@ -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>

View File

@ -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>