From 31b9836cc061de298ec8771e7584a783a90a28b4 Mon Sep 17 00:00:00 2001
From: Sylvain Berfini <sylvain.berfini@belledonne-communications.com>
Date: Mon, 16 Dec 2024 14:11:18 +0100
Subject: [PATCH] Reworked DTMFs dialpad in call to show letters

---
 .../layout-land/call_numpad_bottom_sheet.xml  | 182 +++++++++---------
 .../res/layout/call_numpad_bottom_sheet.xml   | 182 +++++++++---------
 app/src/main/res/layout/call_numpad_digit.xml |  34 ++++
 .../layout/call_numpad_digit_with_letters.xml |  54 ++++++
 app/src/main/res/values/dimen.xml             |   1 +
 app/src/main/res/values/styles.xml            |   8 -
 6 files changed, 279 insertions(+), 182 deletions(-)
 create mode 100644 app/src/main/res/layout/call_numpad_digit.xml
 create mode 100644 app/src/main/res/layout/call_numpad_digit_with_letters.xml

diff --git a/app/src/main/res/layout-land/call_numpad_bottom_sheet.xml b/app/src/main/res/layout-land/call_numpad_bottom_sheet.xml
index cc797bd9f..bb8a340db 100644
--- a/app/src/main/res/layout-land/call_numpad_bottom_sheet.xml
+++ b/app/src/main/res/layout-land/call_numpad_bottom_sheet.xml
@@ -1,7 +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:tools="http://schemas.android.com/tools">
+    xmlns:bind="http://schemas.android.com/tools"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
 
     <data>
         <import type="android.view.View" />
@@ -22,7 +22,7 @@
         app:behavior_hideable="true"
         app:behavior_peekHeight="0dp"
         app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
-        tools:ignore="HardcodedText">
+        bind:ignore="HardcodedText">
 
         <com.google.android.material.bottomsheet.BottomSheetDragHandleView
             android:id="@+id/numpad_handle"
@@ -87,125 +87,133 @@
             app:flow_maxElementsWrap="6"
             app:constraint_referenced_ids="digit_1, digit_2, digit_3, digit_4, digit_5, digit_6, digit_7, digit_8, digit_9, digit_star, digit_0, digit_sharp" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`1`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_1"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="1"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit"
+            bind:digit="@{`1`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`2`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_2"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="2"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit_with_letters"
+            bind:digit="@{`2`}"
+            bind:letters="@{`abc`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`3`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_3"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="3"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit_with_letters"
+            bind:digit="@{`3`}"
+            bind:letters="@{`def`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`4`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_4"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="4"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit_with_letters"
+            bind:digit="@{`4`}"
+            bind:letters="@{`ghi`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`5`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_5"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="5"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit_with_letters"
+            bind:digit="@{`5`}"
+            bind:letters="@{`jkl`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`6`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_6"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="6"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit_with_letters"
+            bind:digit="@{`6`}"
+            bind:letters="@{`mno`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`7`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_7"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="7"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit_with_letters"
+            bind:digit="@{`7`}"
+            bind:letters="@{`pqrs`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`8`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_8"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="8"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit_with_letters"
+            bind:digit="@{`8`}"
+            bind:letters="@{`tuv`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`9`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_9"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="9"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit_with_letters"
+            bind:digit="@{`9`}"
+            bind:letters="@{`wxyz`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`*`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_star"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="*"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit"
+            bind:digit="@{`*`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`0`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_0"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="0"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit"
+            bind:digit="@{`0`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`#`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_sharp"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="#"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit"
+            bind:digit="@{`#`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 
diff --git a/app/src/main/res/layout/call_numpad_bottom_sheet.xml b/app/src/main/res/layout/call_numpad_bottom_sheet.xml
index f67f6906a..ee2481b3f 100644
--- a/app/src/main/res/layout/call_numpad_bottom_sheet.xml
+++ b/app/src/main/res/layout/call_numpad_bottom_sheet.xml
@@ -1,7 +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:tools="http://schemas.android.com/tools">
+    xmlns:bind="http://schemas.android.com/tools"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
 
     <data>
         <import type="android.view.View" />
@@ -22,7 +22,7 @@
         app:behavior_hideable="true"
         app:behavior_peekHeight="0dp"
         app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
-        tools:ignore="HardcodedText">
+        bind:ignore="HardcodedText">
 
         <com.google.android.material.bottomsheet.BottomSheetDragHandleView
             android:id="@+id/numpad_handle"
@@ -87,125 +87,133 @@
             app:flow_maxElementsWrap="3"
             app:constraint_referenced_ids="digit_1, digit_2, digit_3, digit_4, digit_5, digit_6, digit_7, digit_8, digit_9, digit_star, digit_0, digit_sharp" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`1`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_1"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="1"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit"
+            bind:digit="@{`1`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`2`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_2"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="2"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit_with_letters"
+            bind:digit="@{`2`}"
+            bind:letters="@{`abc`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`3`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_3"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="3"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit_with_letters"
+            bind:digit="@{`3`}"
+            bind:letters="@{`def`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`4`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_4"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="4"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit_with_letters"
+            bind:digit="@{`4`}"
+            bind:letters="@{`ghi`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`5`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_5"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="5"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit_with_letters"
+            bind:digit="@{`5`}"
+            bind:letters="@{`jkl`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`6`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_6"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="6"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit_with_letters"
+            bind:digit="@{`6`}"
+            bind:letters="@{`mno`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`7`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_7"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="7"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit_with_letters"
+            bind:digit="@{`7`}"
+            bind:letters="@{`pqrs`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`8`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_8"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="8"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit_with_letters"
+            bind:digit="@{`8`}"
+            bind:letters="@{`tuv`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`9`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_9"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="9"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit_with_letters"
+            bind:digit="@{`9`}"
+            bind:letters="@{`wxyz`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`*`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_star"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="*"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit"
+            bind:digit="@{`*`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`0`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_0"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="0"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit"
+            bind:digit="@{`0`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatTextView
-            android:onClick="@{() -> model.onDigitClicked(`#`)}"
-            style="@style/call_numpad_digits_style"
+        <include
             android:id="@+id/digit_sharp"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="#"
+            android:layout_width="@dimen/call_dtmf_button_size"
+            android:layout_height="@dimen/call_dtmf_button_size"
+            layout="@layout/call_numpad_digit"
+            bind:digit="@{`#`}"
+            bind:model="@{model}"
             app:layout_constraintTop_toBottomOf="@id/numpad_handle"
-            app:layout_constraintStart_toStartOf="parent"/>
+            app:layout_constraintStart_toStartOf="parent" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 
diff --git a/app/src/main/res/layout/call_numpad_digit.xml b/app/src/main/res/layout/call_numpad_digit.xml
new file mode 100644
index 000000000..41f8a45c8
--- /dev/null
+++ b/app/src/main/res/layout/call_numpad_digit.xml
@@ -0,0 +1,34 @@
+<?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>
+        <variable
+            name="digit"
+            type="String" />
+        <variable
+            name="model"
+            type="org.linphone.ui.main.history.model.NumpadModel" />
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:onClick="@{() -> model.onDigitClicked(digit)}"
+        android:layout_width="@dimen/call_dtmf_button_size"
+        android:layout_height="@dimen/call_dtmf_button_size"
+        android:background="@drawable/in_call_button_background_red">
+
+        <androidx.appcompat.widget.AppCompatTextView
+            style="@style/default_text_style"
+            android:text="@{digit}"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:textSize="25sp"
+            android:textColor="@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>
\ No newline at end of file
diff --git a/app/src/main/res/layout/call_numpad_digit_with_letters.xml b/app/src/main/res/layout/call_numpad_digit_with_letters.xml
new file mode 100644
index 000000000..bbb333540
--- /dev/null
+++ b/app/src/main/res/layout/call_numpad_digit_with_letters.xml
@@ -0,0 +1,54 @@
+<?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>
+        <variable
+            name="digit"
+            type="String" />
+        <variable
+            name="letters"
+            type="String" />
+        <variable
+            name="model"
+            type="org.linphone.ui.main.history.model.NumpadModel" />
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:onClick="@{() -> model.onDigitClicked(digit)}"
+        android:layout_width="@dimen/call_dtmf_button_size"
+        android:layout_height="@dimen/call_dtmf_button_size"
+        android:background="@drawable/in_call_button_background_red">
+
+        <androidx.appcompat.widget.AppCompatTextView
+            style="@style/default_text_style"
+            android:id="@+id/digit_label"
+            android:text="@{digit, default=`9`}"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:textSize="25sp"
+            android:includeFontPadding="false"
+            android:textColor="@color/bc_white"
+            app:layout_constraintVertical_chainStyle="packed"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintBottom_toTopOf="@id/letters_label"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"/>
+
+        <androidx.appcompat.widget.AppCompatTextView
+            style="@style/default_text_style"
+            android:id="@+id/letters_label"
+            android:text="@{letters, default=`wxyz`}"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:textSize="14sp"
+            android:includeFontPadding="false"
+            android:textColor="@color/bc_white"
+            app:layout_constraintTop_toBottomOf="@id/digit_label"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+</layout>
\ No newline at end of file
diff --git a/app/src/main/res/values/dimen.xml b/app/src/main/res/values/dimen.xml
index b06a6763a..544eda04d 100644
--- a/app/src/main/res/values/dimen.xml
+++ b/app/src/main/res/values/dimen.xml
@@ -66,6 +66,7 @@
     <dimen name="call_pip_round_corners_texture_view_radius">5dp</dimen>
     <dimen name="call_button_size">55dp</dimen>
     <dimen name="call_button_icon_padding">15dp</dimen>
+    <dimen name="call_dtmf_button_size">65dp</dimen>
     <dimen name="call_extra_button_top_margin">30dp</dimen>
 
     <dimen name="call_video_preview_max_size">200dp</dimen>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index f3286bf11..adab3cc5b 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -170,14 +170,6 @@
         <item name="android:layout_marginTop">-10dp</item>
         <item name="android:layout_marginBottom">5dp</item>
     </style>
-    <style name="call_numpad_digits_style">
-        <item name="android:fontFamily">@font/noto_sans</item>
-        <item name="android:textColor">@color/bc_white</item>
-        <item name="android:textSize">32sp</item>
-        <item name="android:gravity">center</item>
-        <item name="android:elevation">3dp</item>
-        <item name="android:background">@drawable/in_call_button_background_red</item>
-    </style>
     <style name="in_call_extra_action_label_style">
         <item name="android:fontFamily">@font/noto_sans</item>
         <item name="android:textSize">14sp</item>