Started voice recording layout

This commit is contained in:
Sylvain Berfini 2023-11-09 17:28:33 +01:00
parent f31209162a
commit 8f33f1f0c9
8 changed files with 132 additions and 20 deletions

View file

@ -89,6 +89,8 @@ class ConversationViewModel @UiThread constructor() : ViewModel() {
val isReplyingToMessage = MutableLiveData<String>()
val voiceRecordingInProgress = MutableLiveData<Boolean>()
var scrollingPosition: Int = SCROLLING_POSITION_NOT_SET
val requestKeyboardHidingEvent: MutableLiveData<Event<Boolean>> by lazy {
@ -485,6 +487,7 @@ class ConversationViewModel @UiThread constructor() : ViewModel() {
@UiThread
fun startVoiceMessageRecording() {
voiceRecordingInProgress.value = true
}
@UiThread
@ -493,6 +496,7 @@ class ConversationViewModel @UiThread constructor() : ViewModel() {
@UiThread
fun cancelVoiceMessageRecording() {
voiceRecordingInProgress.value = false
}
@UiThread

View file

@ -120,12 +120,14 @@ class ImageUtils {
null
}
canvas.drawBitmap(
drawables[i].toBitmap(size, size, Bitmap.Config.ARGB_8888),
src,
rectangles[i],
null
)
try {
canvas.drawBitmap(
drawables[i].toBitmap(size, size, Bitmap.Config.ARGB_8888),
src,
rectangles[i],
null
)
} catch (_: Exception) {}
}
return bitmap

View file

@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="256"
android:viewportHeight="256">
<path
android:pathData="M240,128a15.74,15.74 0,0 1,-7.6 13.51L88.32,229.65a16,16 0,0 1,-16.2 0.3A15.86,15.86 0,0 1,64 216.13V39.87a15.86,15.86 0,0 1,8.12 -13.82,16 16,0 0,1 16.2,0.3L232.4,114.49A15.74,15.74 0,0 1,240 128Z"
android:fillColor="#4e6074"/>
</vector>

View file

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="@color/white"/>
</shape>

View file

@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="256"
android:viewportHeight="256">
<path
android:pathData="M216,55.27V200.73A15.29,15.29 0,0 1,200.73 216H55.27A15.29,15.29 0,0 1,40 200.73V55.27A15.29,15.29 0,0 1,55.27 40H200.73A15.29,15.29 0,0 1,216 55.27Z"
android:fillColor="#4e6074"/>
</vector>

View file

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="70dp"/>
<gradient
android:startColor="@color/gradient_start"
android:endColor="@color/orange_main_500"
/>
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="70dp"/>
<solid android:color="@color/gradient_progress"/>
</shape>
</clip>
</item>
</layer-list>

View file

@ -1,6 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<data>
<import type="android.view.View" />
@ -68,11 +69,27 @@
android:onClick="@{() -> viewModel.toggleEmojiPickerVisibility()}"
android:padding="8dp"
android:src="@{viewModel.isEmojiPickerOpen ? @drawable/x : @drawable/smiley, default=@drawable/smiley}"
android:visibility="@{viewModel.voiceRecordingInProgress ? View.GONE : View.VISIBLE}"
app:layout_constraintBottom_toBottomOf="@id/message_area_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/message_area_background"
app:tint="@color/icon_color_selector" />
<ImageView
android:id="@+id/cancel_voice_message"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginStart="8dp"
android:onClick="@{() -> viewModel.cancelVoiceMessageRecording()}"
android:padding="8dp"
android:src="@drawable/x"
android:background="@drawable/circle_white_button_background"
android:visibility="@{viewModel.voiceRecordingInProgress ? View.VISIBLE : View.GONE, default=gone}"
app:layout_constraintBottom_toBottomOf="@id/message_area_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/message_area_background"
app:tint="@color/orange_main_500" />
<ImageView
android:id="@+id/attach_file"
android:layout_width="40dp"
@ -82,6 +99,7 @@
android:onClick="@{openFilePickerClickListener}"
android:padding="8dp"
android:src="@drawable/paperclip"
android:visibility="@{viewModel.voiceRecordingInProgress ? View.GONE : View.VISIBLE}"
app:layout_constraintBottom_toBottomOf="@id/message_area_background"
app:layout_constraintEnd_toStartOf="@id/message_area_background"
app:layout_constraintStart_toEndOf="@id/emoji_picker_toggle"
@ -94,6 +112,7 @@
android:layout_height="0dp"
android:layout_marginEnd="16dp"
android:src="@drawable/edit_text_background"
android:visibility="@{viewModel.voiceRecordingInProgress ? View.INVISIBLE : View.VISIBLE}"
app:layout_constraintBottom_toBottomOf="@id/message_to_send"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/attach_file"
@ -117,6 +136,7 @@
android:text="@={viewModel.textToSend}"
android:textColorHint="@color/gray_main2_400"
android:textSize="14sp"
android:visibility="@{viewModel.voiceRecordingInProgress ? View.INVISIBLE : View.VISIBLE}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/send_barrier"
app:layout_constraintStart_toStartOf="@id/message_area_background"
@ -127,26 +147,63 @@
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="voice_record, send_message" />
app:constraint_referenced_ids="record_voice_message, send_message" />
<ProgressBar
android:id="@+id/voice_record_progress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:progressDrawable="@drawable/voice_recording_gradient_progress"
android:visibility="@{viewModel.voiceRecordingInProgress ? View.VISIBLE : View.GONE, default=gone}"
tools:progress="60"
app:layout_constraintBottom_toBottomOf="@id/message_to_send"
app:layout_constraintEnd_toStartOf="@id/send_message"
app:layout_constraintStart_toEndOf="@id/cancel_voice_message"
app:layout_constraintTop_toTopOf="@id/message_to_send" />
<ImageView
android:id="@+id/voice_record"
android:layout_width="@dimen/icon_size"
android:layout_height="@dimen/icon_size"
android:layout_marginEnd="12dp"
android:src="@drawable/microphone"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="@id/message_area_background"
app:layout_constraintEnd_toEndOf="@id/message_area_background"
app:layout_constraintTop_toTopOf="@id/message_area_background"
app:tint="@color/icon_color_selector" />
android:id="@+id/stop_recording"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginStart="10dp"
android:onClick="@{() -> viewModel.stopVoiceMessageRecording()}"
android:padding="8dp"
android:src="@drawable/stop_fill"
android:background="@drawable/circle_white_button_background"
android:visibility="@{viewModel.voiceRecordingInProgress ? View.VISIBLE : View.GONE, default=gone}"
app:layout_constraintBottom_toBottomOf="@id/voice_record_progress"
app:layout_constraintStart_toStartOf="@id/voice_record_progress"
app:layout_constraintTop_toTopOf="@id/voice_record_progress"
app:tint="@color/orange_main_500" />
<androidx.appcompat.widget.AppCompatTextView
style="@style/default_text_style"
android:id="@+id/voice_recording_length"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:paddingStart="12dp"
android:paddingEnd="12dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:text="00:00"
android:textSize="14sp"
android:textColor="@color/gray_main2_600"
android:background="@drawable/shape_squircle_white_r50_background"
android:visibility="@{viewModel.voiceRecordingInProgress ? View.VISIBLE : View.GONE, default=gone}"
app:layout_constraintBottom_toBottomOf="@id/voice_record_progress"
app:layout_constraintEnd_toEndOf="@id/voice_record_progress"
app:layout_constraintTop_toTopOf="@id/voice_record_progress"/>
<ImageView
android:id="@+id/send_message"
android:layout_width="40dp"
android:layout_height="0dp"
android:layout_marginEnd="4dp"
android:visibility="@{viewModel.textToSend.length() > 0 || viewModel.attachments.size() > 0 ? View.VISIBLE : View.GONE, default=gone}"
android:visibility="@{viewModel.textToSend.length() > 0 || viewModel.attachments.size() > 0 || viewModel.voiceRecordingInProgress ? View.VISIBLE : View.GONE, default=gone}"
android:onClick="@{() -> viewModel.sendMessage()}"
android:padding="8dp"
android:src="@drawable/paper_plane_tilt"
@ -160,7 +217,7 @@
android:layout_width="40dp"
android:layout_height="0dp"
android:layout_marginEnd="4dp"
android:visibility="@{viewModel.textToSend.length() > 0 || viewModel.attachments.size() > 0 ? View.GONE : View.VISIBLE}"
android:visibility="@{viewModel.textToSend.length() > 0 || viewModel.attachments.size() > 0 || viewModel.voiceRecordingInProgress ? View.GONE : View.VISIBLE}"
android:onClick="@{() -> viewModel.startVoiceMessageRecording()}"
android:padding="8dp"
android:src="@drawable/microphone"

View file

@ -40,4 +40,7 @@
<color name="blue_info_500">#4AA8FF</color>
<color name="orange_warning_600">#DBB820</color>
<color name="gradient_start">#FF923F</color>
<color name="gradient_progress">#80FFFFFF</color>
</resources>