Merge pull request #474 from Naveen3Singh/call_ui_improvements

Minor call UI improvements

app/src/main/kotlin/com/simplemobiletools/dialer/activities/CallActivity.kt

@@ -17,6 +17,8 @@ import android.telecom.CallAudioState
 import android.view.MotionEvent
 import android.view.View
 import android.view.WindowManager
+import android.view.animation.AccelerateDecelerateInterpolator
+import android.view.animation.OvershootInterpolator
 import android.widget.ImageView
 import androidx.core.view.children
 import com.simplemobiletools.commons.extensions.*
@@ -35,7 +37,6 @@ import kotlin.math.min
 
 class CallActivity : SimpleActivity() {
     companion object {
-        private const val ANIMATION_DURATION = 250L
         fun getStartIntent(context: Context): Intent {
             val openAppIntent = Intent(context, CallActivity::class.java)
             openAppIntent.flags = Intent.FLAG_ACTIVITY_BROUGHT_TO_FRONT or Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_REORDER_TO_FRONT
@@ -44,7 +45,7 @@ class CallActivity : SimpleActivity() {
     }
 
     private var isSpeakerOn = false
-    private var isMicrophoneOn = true
+    private var isMicrophoneOff = false
     private var isCallEnded = false
     private var callContact: CallContact? = null
     private var proximityWakeLock: PowerManager.WakeLock? = null
@@ -55,6 +56,7 @@ class CallActivity : SimpleActivity() {
     private var dragDownX = 0f
     private var stopAnimation = false
     private var viewsUnderDialpad = arrayListOf<Pair<View, Float>>()
+    private var dialpadHeight = 0f
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -185,13 +187,20 @@ class CallActivity : SimpleActivity() {
         dialpad_hashtag_holder.setOnClickListener { dialpadPressed('#') }
 
         dialpad_wrapper.setBackgroundColor(getProperBackgroundColor())
-        arrayOf(
-            call_toggle_microphone, call_toggle_speaker, call_dialpad, dialpad_close,
-            call_sim_image, call_toggle_hold, call_add, call_swap, call_merge, call_manage
-        ).forEach {
+        arrayOf(dialpad_close, call_sim_image).forEach {
             it.applyColorFilter(getProperTextColor())
         }
 
+        val bgColor = getProperBackgroundColor()
+        val inactiveColor = getInactiveButtonColor()
+        arrayOf(
+            call_toggle_microphone, call_toggle_speaker, call_dialpad,
+            call_toggle_hold, call_add, call_swap, call_merge, call_manage
+        ).forEach {
+            it.applyColorFilter(bgColor.getContrastColor())
+            it.background.applyColorFilter(inactiveColor)
+        }
+
         arrayOf(
             call_toggle_microphone, call_toggle_speaker, call_dialpad,
             call_toggle_hold, call_add, call_swap, call_merge, call_manage
@@ -206,6 +215,10 @@ class CallActivity : SimpleActivity() {
 
         call_sim_id.setTextColor(getProperTextColor().getContrastColor())
         dialpad_input.disableKeyboard()
+
+        dialpad_wrapper.onGlobalLayout {
+            dialpadHeight = dialpad_wrapper.height.toFloat()
+        }
     }
 
     @SuppressLint("ClickableViewAccessibility")
@@ -371,8 +384,8 @@ class CallActivity : SimpleActivity() {
 
     private fun toggleSpeaker() {
         isSpeakerOn = !isSpeakerOn
-        val drawable = if (isSpeakerOn) R.drawable.ic_speaker_on_vector else R.drawable.ic_speaker_off_vector
-        call_toggle_speaker.setImageDrawable(getDrawable(drawable))
+        toggleButtonColor(call_toggle_speaker, isSpeakerOn)
+
         audioManager.isSpeakerphoneOn = isSpeakerOn
 
         val newRoute = if (isSpeakerOn) CallAudioState.ROUTE_SPEAKER else CallAudioState.ROUTE_EARPIECE
@@ -387,12 +400,11 @@ class CallActivity : SimpleActivity() {
     }
 
     private fun toggleMicrophone() {
-        isMicrophoneOn = !isMicrophoneOn
-        val drawable = if (isMicrophoneOn) R.drawable.ic_microphone_vector else R.drawable.ic_microphone_off_vector
-        call_toggle_microphone.setImageDrawable(getDrawable(drawable))
-        audioManager.isMicrophoneMute = !isMicrophoneOn
-        CallManager.inCallService?.setMuted(!isMicrophoneOn)
-        call_toggle_microphone.contentDescription = getString(if (isMicrophoneOn) R.string.turn_microphone_off else R.string.turn_microphone_on)
+        isMicrophoneOff = !isMicrophoneOff
+        toggleButtonColor(call_toggle_microphone, isMicrophoneOff)
+        audioManager.isMicrophoneMute = isMicrophoneOff
+        CallManager.inCallService?.setMuted(isMicrophoneOff)
+        call_toggle_microphone.contentDescription = getString(if (isMicrophoneOff) R.string.turn_microphone_on else R.string.turn_microphone_off)
     }
 
     private fun toggleDialpadVisibility() {
@@ -404,31 +416,48 @@ class CallActivity : SimpleActivity() {
     }
 
     private fun showDialpad() {
-        dialpad_wrapper.animate().withStartAction { dialpad_wrapper.beVisible() }.alpha(1f)
+        dialpad_wrapper.apply {
+            translationY = dialpadHeight
+            alpha = 0f
+            animate()
+                .withStartAction { beVisible() }
+                .setInterpolator(AccelerateDecelerateInterpolator())
+                .setDuration(200L)
+                .alpha(1f)
+                .translationY(0f)
+                .start()
+        }
+
         viewsUnderDialpad.clear()
         viewsUnderDialpad.addAll(findVisibleViewsUnderDialpad())
         viewsUnderDialpad.forEach { (view, _) ->
             view.run {
-                animate().scaleX(0f).alpha(0f).withEndAction { beGone() }.duration = ANIMATION_DURATION
-                animate().scaleY(0f).alpha(0f).withEndAction { beGone() }.duration = ANIMATION_DURATION
+                animate().scaleX(0f).alpha(0f).withEndAction { beGone() }.duration = 250L
+                animate().scaleY(0f).alpha(0f).withEndAction { beGone() }.duration = 250L
             }
         }
     }
 
     private fun hideDialpad() {
-        dialpad_wrapper.animate().alpha(0f).withEndAction { dialpad_wrapper.beGone() }
+        dialpad_wrapper.animate()
+            .withEndAction { dialpad_wrapper.beGone() }
+            .setInterpolator(AccelerateDecelerateInterpolator())
+            .setDuration(200L)
+            .alpha(0f)
+            .translationY(dialpadHeight)
+            .start()
+
         viewsUnderDialpad.forEach { (view, alpha) ->
             view.run {
-                animate().withStartAction { beVisible() }.scaleX(1f).alpha(alpha).duration = ANIMATION_DURATION
-                animate().withStartAction { beVisible() }.scaleY(1f).alpha(alpha).duration = ANIMATION_DURATION
+                animate().withStartAction { beVisible() }.setInterpolator(OvershootInterpolator()).scaleX(1f).alpha(alpha).duration = 250L
+                animate().withStartAction { beVisible() }.setInterpolator(OvershootInterpolator()).scaleY(1f).alpha(alpha).duration = 250L
             }
         }
     }
 
     private fun toggleHold() {
         val isOnHold = CallManager.toggleHold()
-        val drawable = if (isOnHold) R.drawable.ic_pause_crossed_vector else R.drawable.ic_pause_vector
-        call_toggle_hold.setImageDrawable(getDrawable(drawable))
+        toggleButtonColor(call_toggle_hold, isOnHold)
         call_toggle_hold.contentDescription = getString(if (isOnHold) R.string.resume_call else R.string.hold_call)
         hold_status_label.beVisibleIf(isOnHold)
     }
@@ -689,4 +718,19 @@ class CallActivity : SimpleActivity() {
             alpha = if (enabled) 1.0f else LOWER_ALPHA
         }
     }
+
+    private fun getActiveButtonColor() = getProperPrimaryColor()
+
+    private fun getInactiveButtonColor() = getProperTextColor().adjustAlpha(0.10f)
+
+    private fun toggleButtonColor(view: ImageView, enabled: Boolean) {
+        if (enabled) {
+            val color = getActiveButtonColor()
+            view.background.applyColorFilter(color)
+            view.applyColorFilter(color.getContrastColor())
+        } else {
+            view.background.applyColorFilter(getInactiveButtonColor())
+            view.applyColorFilter(getProperBackgroundColor().getContrastColor())
+        }
+    }
 }

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

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+    android:color="?attr/colorControlHighlight">
+    <item android:id="@+id/button_background_holder">
+        <layer-list>
+            <item android:id="@+id/button_background_shape">
+                <shape android:shape="oval">
+                    <solid android:color="?attr/colorPrimary" />
+                    <corners android:radius="@dimen/material_button_corner_radius" />
+                </shape>
+            </item>
+        </layer-list>
+    </item>
+</ripple>

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

@@ -1,3 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24">
-    <path android:pathData="M3.63 3.63c-0.39 0.39-0.39 1.02 0 1.41L7.29 8.7 7 9H4c-0.55 0-1 0.45-1 1v4c0 0.55 0.45 1 1 1h3l3.29 3.29c0.63 0.63 1.71 0.18 1.71-0.71v-4.17l4.18 4.18c-0.49 0.37-1.02 0.68-1.6 0.91-0.36 0.15-0.58 0.53-0.58 0.92 0 0.72 0.73 1.18 1.39 0.91 0.8-0.33 1.55-0.77 2.22-1.31l1.34 1.34c0.39 0.39 1.02 0.39 1.41 0 0.39-0.39 0.39-1.02 0-1.41L5.05 3.63c-0.39-0.39-1.02-0.39-1.42 0zM19 12c0 0.82-0.15 1.61-0.41 2.34l1.53 1.53C20.68 14.7 21 13.39 21 12c0-3.83-2.4-7.11-5.78-8.4C14.63 3.37 14 3.83 14 4.46v0.19c0 0.38 0.25 0.71 0.61 0.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-0.17 0.17L12 7.76V6.41c0-0.89-1.08-1.33-1.71-0.7zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v1.79l2.48 2.48c0.01-0.08 0.02-0.16 0.02-0.24z" android:fillColor="#FFFFFF"/>
-</vector>

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

@@ -163,10 +163,10 @@
             android:id="@+id/call_toggle_microphone"
             android:layout_width="@dimen/dialpad_button_size"
             android:layout_height="@dimen/dialpad_button_size"
-            android:background="?attr/selectableItemBackgroundBorderless"
+            android:background="@drawable/circle_background"
             android:contentDescription="@string/turn_microphone_off"
-            android:padding="@dimen/medium_margin"
-            android:src="@drawable/ic_microphone_vector"
+            android:padding="@dimen/activity_margin"
+            android:src="@drawable/ic_microphone_off_vector"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toStartOf="@+id/call_toggle_speaker"
             app:layout_constraintStart_toStartOf="parent"
@@ -177,10 +177,10 @@
             android:id="@+id/call_toggle_speaker"
             android:layout_width="@dimen/dialpad_button_size"
             android:layout_height="@dimen/dialpad_button_size"
-            android:background="?attr/selectableItemBackgroundBorderless"
+            android:background="@drawable/circle_background"
             android:contentDescription="@string/turn_speaker_on"
-            android:padding="@dimen/medium_margin"
-            android:src="@drawable/ic_speaker_off_vector"
+            android:padding="@dimen/activity_margin"
+            android:src="@drawable/ic_speaker_on_vector"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toStartOf="@+id/call_dialpad"
             app:layout_constraintStart_toEndOf="@+id/call_toggle_microphone"
@@ -191,9 +191,9 @@
             android:id="@+id/call_dialpad"
             android:layout_width="@dimen/dialpad_button_size"
             android:layout_height="@dimen/dialpad_button_size"
-            android:background="?attr/selectableItemBackgroundBorderless"
+            android:background="@drawable/circle_button_background_ripple"
             android:contentDescription="@string/show_dialpad"
-            android:padding="@dimen/medium_margin"
+            android:padding="@dimen/activity_margin"
             android:src="@drawable/ic_dialpad_vector"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
@@ -205,10 +205,10 @@
             android:id="@+id/call_toggle_hold"
             android:layout_width="@dimen/dialpad_button_size"
             android:layout_height="@dimen/dialpad_button_size"
-            android:layout_marginTop="@dimen/bigger_margin"
-            android:background="?attr/selectableItemBackgroundBorderless"
+            android:layout_marginTop="@dimen/big_margin"
+            android:background="@drawable/circle_background"
             android:contentDescription="@string/hold_call"
-            android:padding="10dp"
+            android:padding="@dimen/activity_margin"
             android:src="@drawable/ic_pause_vector"
             app:layout_constraintEnd_toEndOf="@+id/call_toggle_microphone"
             app:layout_constraintStart_toStartOf="@+id/call_toggle_microphone"
@@ -218,10 +218,10 @@
             android:id="@+id/call_add"
             android:layout_width="@dimen/dialpad_button_size"
             android:layout_height="@dimen/dialpad_button_size"
-            android:layout_marginTop="@dimen/bigger_margin"
-            android:background="?attr/selectableItemBackgroundBorderless"
+            android:layout_marginTop="@dimen/big_margin"
+            android:background="@drawable/circle_button_background_ripple"
             android:contentDescription="@string/call_add"
-            android:padding="10dp"
+            android:padding="@dimen/activity_margin"
             android:src="@drawable/ic_add_call_vector"
             app:layout_constraintEnd_toEndOf="@+id/call_toggle_speaker"
             app:layout_constraintStart_toStartOf="@+id/call_toggle_speaker"
@@ -231,10 +231,10 @@
             android:id="@+id/call_manage"
             android:layout_width="@dimen/dialpad_button_size"
             android:layout_height="@dimen/dialpad_button_size"
-            android:layout_marginTop="@dimen/bigger_margin"
-            android:background="?attr/selectableItemBackgroundBorderless"
+            android:layout_marginTop="@dimen/big_margin"
+            android:background="@drawable/circle_button_background_ripple"
             android:contentDescription="@string/conference_manage"
-            android:padding="10dp"
+            android:padding="@dimen/activity_margin"
             android:src="@drawable/ic_people_vector"
             android:visibility="gone"
             app:layout_constraintEnd_toEndOf="@+id/call_dialpad"
@@ -246,10 +246,10 @@
             android:id="@+id/call_swap"
             android:layout_width="@dimen/dialpad_button_size"
             android:layout_height="@dimen/dialpad_button_size"
-            android:layout_marginTop="@dimen/bigger_margin"
-            android:background="?attr/selectableItemBackgroundBorderless"
+            android:layout_marginTop="@dimen/big_margin"
+            android:background="@drawable/circle_button_background_ripple"
             android:contentDescription="@string/call_swap"
-            android:padding="@dimen/medium_margin"
+            android:padding="@dimen/activity_margin"
             android:src="@drawable/ic_call_swap_vector"
             app:layout_constraintEnd_toEndOf="@+id/call_toggle_microphone"
             app:layout_constraintHorizontal_bias="0.5"
@@ -260,10 +260,10 @@
             android:id="@+id/call_merge"
             android:layout_width="@dimen/dialpad_button_size"
             android:layout_height="@dimen/dialpad_button_size"
-            android:layout_marginTop="@dimen/bigger_margin"
-            android:background="?attr/selectableItemBackgroundBorderless"
+            android:layout_marginTop="@dimen/big_margin"
+            android:background="@drawable/circle_button_background_ripple"
             android:contentDescription="@string/call_merge"
-            android:padding="@dimen/medium_margin"
+            android:padding="@dimen/activity_margin"
             android:src="@drawable/ic_call_merge_vector"
             app:layout_constraintEnd_toEndOf="@+id/call_toggle_speaker"
             app:layout_constraintHorizontal_bias="0.5"
@@ -428,8 +428,9 @@
         android:id="@+id/dialpad_wrapper"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:elevation="@dimen/medium_margin"
         android:orientation="vertical"
-        android:visibility="gone"
+        android:visibility="invisible"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent">
 

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

@@ -26,6 +26,7 @@
             android:layout_marginEnd="@dimen/small_margin"
             android:padding="@dimen/small_margin"
             android:src="@drawable/ic_person_vector"
+            app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 
@@ -33,7 +34,8 @@
             android:id="@+id/item_recents_name"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginEnd="0dp"
+            android:layout_marginStart="@dimen/small_margin"
+            android:layout_marginEnd="@dimen/small_margin"
             android:ellipsize="end"
             android:maxLines="1"
             android:textSize="@dimen/bigger_text_size"
@@ -44,8 +46,9 @@
 
         <ImageView
             android:id="@+id/item_recents_sim_image"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
+            android:layout_width="@dimen/activity_margin"
+            android:layout_height="@dimen/activity_margin"
+            android:layout_marginStart="@dimen/small_margin"
             android:alpha="0.6"
             android:paddingTop="@dimen/tiny_margin"
             android:paddingBottom="@dimen/tiny_margin"
@@ -53,7 +56,8 @@
             android:visibility="gone"
             app:layout_constraintBottom_toBottomOf="@+id/item_recents_date_time"
             app:layout_constraintStart_toEndOf="@+id/item_recents_image"
-            app:layout_constraintTop_toTopOf="@+id/item_recents_date_time" />
+            app:layout_constraintTop_toTopOf="@+id/item_recents_date_time"
+            tools:visibility="visible" />
 
         <TextView
             android:id="@+id/item_recents_sim_id"
@@ -71,11 +75,10 @@
 
         <ImageView
             android:id="@+id/item_recents_type"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
+            android:layout_width="@dimen/activity_margin"
+            android:layout_height="@dimen/activity_margin"
+            android:layout_marginStart="@dimen/small_margin"
             android:alpha="0.6"
-            android:paddingTop="@dimen/one_dp"
-            android:paddingBottom="@dimen/one_dp"
             android:scaleType="fitStart"
             android:src="@drawable/ic_incoming_call_vector"
             app:layout_constraintBottom_toBottomOf="@+id/item_recents_date_time"
@@ -86,11 +89,14 @@
             android:id="@+id/item_recents_date_time"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/small_margin"
             android:alpha="0.6"
             android:maxLines="1"
             android:textSize="@dimen/normal_text_size"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toStartOf="@+id/item_recents_duration"
+            app:layout_constraintHorizontal_bias="0"
             app:layout_constraintStart_toEndOf="@+id/item_recents_type"
-            app:layout_constraintTop_toBottomOf="@+id/item_recents_name"
             tools:text="0123 456 789" />
 
         <TextView
@@ -98,7 +104,7 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_below="@+id/item_recents_name"
-            android:layout_marginEnd="0dp"
+            android:layout_marginEnd="@dimen/small_margin"
             android:alpha="0.6"
             android:gravity="end"
             android:textSize="@dimen/normal_text_size"

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

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <dimen name="dialpad_button_size">60dp</dimen>
+    <dimen name="dialpad_button_size">72dp</dimen>
     <dimen name="dialpad_button_size_small">50dp</dimen>
     <dimen name="incoming_call_arrow_size">50dp</dimen>
     <dimen name="incoming_call_button_size">72dp</dimen>