Reworked UI for incoming call screen when screen is locked

This commit is contained in:
Sylvain Berfini 2025-06-30 17:36:40 +02:00
parent b4c2a52bf7
commit ff425089c7
8 changed files with 157 additions and 202 deletions

View file

@ -33,7 +33,6 @@ import org.linphone.core.tools.Log
import org.linphone.databinding.CallIncomingFragmentBinding
import org.linphone.ui.call.viewmodel.CurrentCallViewModel
import org.linphone.utils.AppUtils
import kotlin.math.abs
import kotlin.math.max
import kotlin.math.min
@ -52,7 +51,7 @@ class IncomingCallFragment : GenericCallFragment() {
private var initialX = 0f
private var slidingButtonX = 0f
private val slidingButtonTouchListener = View.OnTouchListener { view, event ->
val width = binding.bottomBar.root.width.toFloat()
val width = binding.bottomBar.lockedScreenBottomBar.root.width.toFloat()
val aboveAnswer = view.x + view.width > width - areaSize
val aboveDecline = view.x < areaSize
@ -81,19 +80,6 @@ class IncomingCallFragment : GenericCallFragment() {
true
}
MotionEvent.ACTION_MOVE -> {
callViewModel.slidingButtonAboveAnswer.value = aboveAnswer
callViewModel.slidingButtonAboveDecline.value = aboveDecline
val offset = view.x - initialX
val percent = abs(offset) / (width / 2)
if (offset > 0) {
callViewModel.answerAlpha.value = 1f
callViewModel.declineAlpha.value = 1f - percent
} else if (offset < 0) {
callViewModel.answerAlpha.value = 1f - percent
callViewModel.declineAlpha.value = 1f
}
view.animate()
.x(min(max(marginSize, event.rawX + slidingButtonX), width - view.width - marginSize))
.setDuration(0)
@ -137,7 +123,7 @@ class IncomingCallFragment : GenericCallFragment() {
}
}
binding.bottomBar.slidingButton.setOnTouchListener(slidingButtonTouchListener)
binding.bottomBar.lockedScreenBottomBar.slidingButton.setOnTouchListener(slidingButtonTouchListener)
}
override fun onResume() {

View file

@ -266,14 +266,6 @@ class CurrentCallViewModel
val isScreenLocked = MutableLiveData<Boolean>()
val slidingButtonAboveAnswer = MutableLiveData<Boolean>()
val slidingButtonAboveDecline = MutableLiveData<Boolean>()
val answerAlpha = MutableLiveData<Float>()
val declineAlpha = MutableLiveData<Float>()
lateinit var currentCall: Call
private val contactsListener = object : ContactsListener {
@ -540,8 +532,6 @@ class CurrentCallViewModel
playbackVolume.value = 0f
refreshKeyguardLockedStatus()
answerAlpha.value = 1f
declineAlpha.value = 1f
coreContext.postOnCoreThread { core ->
hideSipAddresses.postValue(corePreferences.hideSipAddresses)

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="70dp" />
<solid android:color="@color/gray_600"/>
</shape>

View file

@ -1,5 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:bind="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
@ -11,186 +12,33 @@
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="@dimen/call_main_actions_menu_height"
android:background="@drawable/shape_call_bottom_sheet_background">
android:layout_height="@dimen/call_main_actions_menu_height">
<androidx.constraintlayout.widget.Group
android:id="@+id/sliding_controls"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="@{viewModel.isScreenLocked ? View.VISIBLE : View.GONE}"
app:constraint_referenced_ids="sliding_button, decline, answer, arrow_green_1, arrow_green_2, arrow_green_3, arrow_red_1, arrow_red_2, arrow_red_3" />
<androidx.constraintlayout.widget.Group
android:id="@+id/simple_controls"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
<include
bind:viewModel="@{viewModel}"
android:id="@+id/unlock_screen_bottom_bar"
layout="@layout/call_incoming_actions_screen_unlocked"
android:layout_width="0dp"
android:layout_height="@dimen/call_main_actions_menu_height"
android:visibility="@{viewModel.isScreenLocked ? View.GONE : View.VISIBLE, default=gone}"
app:constraint_referenced_ids="hang_up, answer_call"/>
<ImageView
style="@style/default_text_style_700"
android:id="@+id/decline"
android:layout_width="@dimen/call_button_size"
android:layout_height="@dimen/call_button_size"
android:layout_marginStart="@dimen/sliding_accept_decline_call_margin"
android:padding="@dimen/call_button_icon_padding"
android:src="@drawable/phone_disconnect"
android:alpha="@{viewModel.declineAlpha}"
android:contentDescription="@null"
app:tint="?attr/color_danger_500"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/arrow_red_1"/>
<ImageView
android:id="@+id/arrow_red_1"
android:layout_width="wrap_content"
android:layout_height="28dp"
android:src="@drawable/arrow_red"
android:alpha="@{viewModel.declineAlpha}"
android:contentDescription="@null"
android:rotation="90"
app:layout_constraintTop_toTopOf="@id/decline"
app:layout_constraintBottom_toBottomOf="@id/decline"
app:layout_constraintStart_toEndOf="@id/decline"
app:layout_constraintEnd_toStartOf="@id/arrow_red_2" />
<ImageView
android:id="@+id/arrow_red_2"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="@drawable/arrow_red"
android:alpha="@{viewModel.declineAlpha}"
android:contentDescription="@null"
android:rotation="90"
app:layout_constraintTop_toTopOf="@id/decline"
app:layout_constraintBottom_toBottomOf="@id/decline"
app:layout_constraintStart_toEndOf="@id/arrow_red_1"
app:layout_constraintEnd_toStartOf="@id/arrow_red_3" />
<ImageView
android:id="@+id/arrow_red_3"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:src="@drawable/arrow_red"
android:alpha="@{viewModel.declineAlpha}"
android:contentDescription="@null"
android:rotation="90"
app:layout_constraintTop_toTopOf="@id/decline"
app:layout_constraintBottom_toBottomOf="@id/decline"
app:layout_constraintStart_toEndOf="@id/arrow_red_2"
app:layout_constraintEnd_toStartOf="@id/sliding_button"/>
<ImageView
android:id="@+id/arrow_green_1"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:src="@drawable/arrow_green"
android:alpha="@{viewModel.answerAlpha}"
android:contentDescription="@null"
android:rotation="90"
app:layout_constraintTop_toTopOf="@id/answer"
app:layout_constraintBottom_toBottomOf="@id/answer"
app:layout_constraintStart_toEndOf="@id/sliding_button"
app:layout_constraintEnd_toStartOf="@id/arrow_green_2" />
<ImageView
android:id="@+id/arrow_green_2"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="@drawable/arrow_green"
android:alpha="@{viewModel.answerAlpha}"
android:contentDescription="@null"
android:rotation="90"
app:layout_constraintTop_toTopOf="@id/answer"
app:layout_constraintBottom_toBottomOf="@id/answer"
app:layout_constraintStart_toEndOf="@id/arrow_green_1"
app:layout_constraintEnd_toStartOf="@id/arrow_green_3" />
<ImageView
android:id="@+id/arrow_green_3"
android:layout_width="wrap_content"
android:layout_height="28dp"
android:src="@drawable/arrow_green"
android:alpha="@{viewModel.answerAlpha}"
android:contentDescription="@null"
android:rotation="90"
app:layout_constraintTop_toTopOf="@id/answer"
app:layout_constraintBottom_toBottomOf="@id/answer"
app:layout_constraintStart_toEndOf="@id/arrow_green_2"
app:layout_constraintEnd_toStartOf="@id/answer" />
<ImageView
style="@style/default_text_style_700"
android:id="@+id/answer"
android:layout_width="@dimen/call_button_size"
android:layout_height="@dimen/call_button_size"
android:layout_marginEnd="@dimen/sliding_accept_decline_call_margin"
android:padding="@dimen/call_button_icon_padding"
android:src="@drawable/phone_call"
android:alpha="@{viewModel.answerAlpha}"
android:contentDescription="@null"
app:tint="?attr/color_success_500"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@id/arrow_green_3"
app:layout_constraintEnd_toEndOf="parent" />
<ImageView
android:id="@+id/sliding_button"
android:layout_width="@dimen/call_button_size"
android:layout_height="@dimen/call_button_size"
android:padding="@dimen/call_button_icon_padding"
android:background="@drawable/shape_round_in_call_button_background"
android:src="@{viewModel.slidingButtonAboveAnswer ? @drawable/phone_call : viewModel.slidingButtonAboveDecline ? @drawable/phone_disconnect : viewModel.isVideoEnabled ? @drawable/video_camera : @drawable/phone, default=@drawable/phone}"
android:contentDescription="@{viewModel.isVideoEnabled ? @string/content_description_answer_video_call : @string/content_description_answer_audio_call}"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@id/arrow_red_3"
app:layout_constraintEnd_toStartOf="@id/arrow_green_1"
app:tint="@color/bc_white"
android:backgroundTint="@{viewModel.slidingButtonAboveAnswer ? @color/green_success_500 : viewModel.slidingButtonAboveDecline ? @color/red_danger_500 : @color/gray_500, default=@color/gray_500}"/>
<ImageView
android:id="@+id/hang_up"
android:layout_width="wrap_content"
android:layout_height="@dimen/call_button_size"
android:layout_marginEnd="30dp"
android:background="@drawable/squircle_red_button_background"
android:onClick="@{() -> viewModel.hangUp()}"
android:paddingStart="30dp"
android:paddingTop="15dp"
android:paddingEnd="30dp"
android:paddingBottom="15dp"
android:src="@drawable/phone_disconnect"
android:contentDescription="@string/content_description_hang_up_call"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/answer_call"
app:layout_constraintStart_toStartOf="parent"
app:tint="@color/bc_white" />
<ImageView
android:id="@+id/answer_call"
android:layout_width="wrap_content"
android:layout_height="@dimen/call_button_size"
android:background="@drawable/squircle_green_button_background"
android:onClick="@{() -> viewModel.answer()}"
android:paddingStart="30dp"
android:paddingTop="15dp"
android:paddingEnd="30dp"
android:paddingBottom="15dp"
android:src="@{viewModel.isVideoEnabled ? @drawable/video_camera : @drawable/phone, default=@drawable/phone}"
android:contentDescription="@{viewModel.isVideoEnabled ? @string/content_description_answer_video_call : @string/content_description_answer_audio_call}"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/hang_up"
app:tint="@color/bc_white" />
app:layout_constraintBottom_toBottomOf="parent"/>
<include
bind:viewModel="@{viewModel}"
android:id="@+id/locked_screen_bottom_bar"
layout="@layout/call_incoming_actions_screen_locked"
android:layout_width="0dp"
android:layout_height="70dp"
android:layout_marginBottom="20dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:visibility="@{viewModel.isScreenLocked ? View.VISIBLE : View.GONE}"
app:layout_constraintWidth_max="@dimen/button_max_width"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

View file

@ -0,0 +1,65 @@
<?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">
<data>
<import type="android.view.View" />
<variable
name="viewModel"
type="org.linphone.ui.call.viewmodel.CurrentCallViewModel" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/sliding_controls"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="@drawable/shape_call_sliding_controls_background"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.appcompat.widget.AppCompatTextView
style="@style/default_text_style_700"
android:id="@+id/decline_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:text="@string/call_action_decline"
android:textColor="?attr/color_danger_500"
android:textSize="13sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
style="@style/default_text_style_700"
android:id="@+id/answer_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:text="@string/call_action_answer"
android:textColor="?attr/color_success_500"
android:textSize="13sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<ImageView
android:id="@+id/sliding_button"
android:layout_width="wrap_content"
android:layout_height="@dimen/call_button_size"
android:background="@drawable/squircle_green_button_background"
android:onClick="@{() -> viewModel.answer()}"
android:paddingStart="30dp"
android:paddingTop="15dp"
android:paddingEnd="30dp"
android:paddingBottom="15dp"
android:src="@{viewModel.isVideoEnabled ? @drawable/video_camera : @drawable/phone, default=@drawable/phone}"
android:contentDescription="@{viewModel.isVideoEnabled ? @string/content_description_answer_video_call : @string/content_description_answer_audio_call}"
app:tint="@color/bc_white"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

View file

@ -0,0 +1,57 @@
<?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">
<data>
<import type="android.view.View" />
<variable
name="viewModel"
type="org.linphone.ui.call.viewmodel.CurrentCallViewModel" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="@dimen/call_main_actions_menu_height"
android:background="@drawable/shape_call_bottom_sheet_background">
<ImageView
android:id="@+id/hang_up"
android:layout_width="wrap_content"
android:layout_height="@dimen/call_button_size"
android:layout_marginEnd="30dp"
android:background="@drawable/squircle_red_button_background"
android:onClick="@{() -> viewModel.hangUp()}"
android:paddingStart="30dp"
android:paddingTop="15dp"
android:paddingEnd="30dp"
android:paddingBottom="15dp"
android:src="@drawable/phone_disconnect"
android:contentDescription="@string/content_description_hang_up_call"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/answer_call"
app:layout_constraintStart_toStartOf="parent"
app:tint="@color/bc_white" />
<ImageView
android:id="@+id/answer_call"
android:layout_width="wrap_content"
android:layout_height="@dimen/call_button_size"
android:background="@drawable/squircle_green_button_background"
android:onClick="@{() -> viewModel.answer()}"
android:paddingStart="30dp"
android:paddingTop="15dp"
android:paddingEnd="30dp"
android:paddingBottom="15dp"
android:src="@{viewModel.isVideoEnabled ? @drawable/video_camera : @drawable/phone, default=@drawable/phone}"
android:contentDescription="@{viewModel.isVideoEnabled ? @string/content_description_answer_video_call : @string/content_description_answer_audio_call}"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/hang_up"
app:tint="@color/bc_white" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

View file

@ -669,6 +669,8 @@
<string name="call_action_resume_call">Reprendre</string>
<string name="call_action_record_call">Enregistrer</string>
<string name="call_action_hang_up">Raccrocher</string>
<string name="call_action_decline">Décliner</string>
<string name="call_action_answer">Décrocher</string>
<string name="call_action_change_layout">Disposition</string>
<string name="call_state_outgoing_progress">En cours</string>
<string name="call_state_outgoing_ringing">En train de sonner</string>

View file

@ -711,6 +711,8 @@
<string name="call_action_resume_call">Resume</string>
<string name="call_action_record_call">Record</string>
<string name="call_action_hang_up">Hang up</string>
<string name="call_action_decline">Decline</string>
<string name="call_action_answer">Answer</string>
<string name="call_action_change_layout">Layout</string>
<string name="call_state_outgoing_progress">In progress</string>
<string name="call_state_outgoing_ringing">Ringing</string>