Replace ImageButtons with FABs

Signed-off-by: Andy Scherzinger <info@andy-scherzinger.de>

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

@@ -1,9 +1,12 @@
-<?xml version="1.0" encoding="utf-8"?><!--
+<?xml version="1.0" encoding="utf-8"?>
+<!--
   ~ Nextcloud Talk application
   ~
+  ~ @author Andy Scherzinger
   ~ @author Mario Danic
   ~ @author Marcel Hibbe
   ~ @author Tim Krüger
+  ~ Copyright (C) 2023 Andy Scherzinger <
   ~ Copyright (C) 2022 Tim Krüger <t@timkrueger.me>
   ~ Copyright (C) 2021 Marcel Hibbe <dev@mhibbe.de>
   ~ Copyright (C) 2017-2018 Mario Danic <mario@lovelyhq.com>
@@ -55,7 +58,7 @@
                 android:numColumns="2"
                 android:scrollbars="vertical"
                 android:stretchMode="columnWidth"
-                tools:listitem="@layout/call_item"/>
+                tools:listitem="@layout/call_item" />
 
             <FrameLayout
                 android:id="@+id/selfVideoViewWrapper"
@@ -78,8 +81,8 @@
                     android:layout_height="40dp"
                     android:layout_gravity="center_horizontal|bottom"
                     android:layout_marginBottom="20dp"
-                    app:srcCompat="@drawable/ic_switch_video_white_24px"
-                    android:contentDescription="@string/nc_call_button_content_description_switch_to_self_vide"/>
+                    android:contentDescription="@string/nc_call_button_content_description_switch_to_self_vide"
+                    app:srcCompat="@drawable/ic_switch_video_white_24px" />
 
                 <ProgressBar
                     android:id="@+id/selfVideoViewProgressBar"
@@ -99,16 +102,16 @@
                 android:background="@android:color/transparent"
                 android:orientation="horizontal"
                 android:weightSum="1">
+
                 <ImageView
                     android:id="@+id/call_recording_indicator"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    android:src="@drawable/record_stop"
                     android:contentDescription="@null"
-                    android:visibility="gone"
+                    android:src="@drawable/record_stop"
                     android:translationZ="2dp"
-                    tools:visibility="visible">
-                </ImageView>
+                    android:visibility="gone"
+                    tools:visibility="visible"></ImageView>
             </LinearLayout>
 
             <LinearLayout
@@ -172,101 +175,118 @@
         android:gravity="center_vertical"
         android:orientation="vertical">
 
-        <ImageButton
+        <com.google.android.material.floatingactionbutton.FloatingActionButton
             android:id="@+id/lower_hand_button"
-            android:layout_width="@dimen/min_size_clickable_area"
-            android:layout_height="@dimen/min_size_clickable_area"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
             android:layout_gravity="end"
-            android:layout_marginEnd="20dp"
-            android:background="@drawable/shape_oval"
-            android:backgroundTint="@color/call_buttons_background"
+            android:layout_marginEnd="@dimen/standard_margin"
+            android:layout_marginBottom="@dimen/standard_half_margin"
             android:contentDescription="@string/lower_hand"
             android:visibility="gone"
+            app:backgroundTint="@color/call_buttons_background"
+            app:borderWidth="0dp"
+            app:fabCustomSize="40dp"
+            app:shapeAppearance="@style/fab_3_rounded"
             app:srcCompat="@drawable/ic_baseline_do_not_touch_24"
+            app:tint="@color/white"
             tools:visibility="visible" />
 
         <com.google.android.flexbox.FlexboxLayout
             android:id="@+id/callControls"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginBottom="@dimen/standard_half_margin"
+            android:layout_marginBottom="30dp"
             android:animateLayoutChanges="true"
             android:background="@android:color/transparent"
             android:gravity="center"
             android:minHeight="@dimen/call_controls_height"
             android:orientation="horizontal"
-            android:padding="@dimen/standard_half_padding"
+            android:paddingStart="@dimen/standard_half_padding"
+            android:paddingEnd="@dimen/standard_half_padding"
             app:alignItems="center"
             app:flexWrap="wrap"
             app:justifyContent="center">
 
-            <ImageButton
+            <com.google.android.material.floatingactionbutton.FloatingActionButton
                 android:id="@+id/pictureInPictureButton"
-                android:layout_width="@dimen/min_size_clickable_area"
-                android:layout_height="@dimen/min_size_clickable_area"
-                android:layout_margin="@dimen/standard_half_margin"
-                android:adjustViewBounds="true"
-                android:background="@drawable/shape_oval"
-                android:backgroundTint="@color/call_buttons_background"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_margin="@dimen/standard_quarter_margin"
                 android:contentDescription="@string/nc_call_button_content_description_pip"
-                app:srcCompat="@drawable/ic_baseline_picture_in_picture_alt_24" />
+                app:backgroundTint="@color/call_buttons_background"
+                app:borderWidth="0dp"
+                app:fabCustomSize="@dimen/fab_small"
+                app:shapeAppearance="@style/fab_3_rounded"
+                app:srcCompat="@drawable/ic_baseline_picture_in_picture_alt_24"
+                app:tint="@color/white" />
 
-            <ImageButton
+            <com.google.android.material.floatingactionbutton.FloatingActionButton
                 android:id="@+id/audioOutputButton"
-                android:layout_width="@dimen/min_size_clickable_area"
-                android:layout_height="@dimen/min_size_clickable_area"
-                android:layout_margin="@dimen/standard_half_margin"
-                android:adjustViewBounds="true"
-                android:background="@drawable/shape_oval"
-                android:backgroundTint="@color/call_buttons_background"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_margin="@dimen/standard_quarter_margin"
                 android:contentDescription="@string/nc_call_button_content_description_audio_output"
-                app:srcCompat="@drawable/ic_volume_mute_white_24dp" />
+                app:backgroundTint="@color/call_buttons_background"
+                app:borderWidth="0dp"
+                app:fabCustomSize="40dp"
+                app:shapeAppearance="@style/fab_3_rounded"
+                app:srcCompat="@drawable/ic_volume_mute_white_24dp"
+                app:tint="@color/white" />
 
-            <ImageButton
+            <com.google.android.material.floatingactionbutton.FloatingActionButton
                 android:id="@+id/cameraButton"
-                android:layout_width="@dimen/min_size_clickable_area"
-                android:layout_height="@dimen/min_size_clickable_area"
-                android:layout_margin="@dimen/standard_half_margin"
-                android:adjustViewBounds="true"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_margin="@dimen/standard_quarter_margin"
                 android:alpha="0.7"
-                android:background="@drawable/shape_oval"
-                android:backgroundTint="@color/call_buttons_background"
                 android:contentDescription="@string/nc_call_button_content_description_camera"
-                app:srcCompat="@drawable/ic_videocam_white_24px" />
+                app:backgroundTint="@color/call_buttons_background"
+                app:borderWidth="0dp"
+                app:fabCustomSize="40dp"
+                app:shapeAppearance="@style/fab_3_rounded"
+                app:srcCompat="@drawable/ic_videocam_white_24px"
+                app:tint="@color/white" />
 
-            <ImageButton
+            <com.google.android.material.floatingactionbutton.FloatingActionButton
                 android:id="@+id/microphoneButton"
-                android:layout_width="@dimen/min_size_clickable_area"
-                android:layout_height="@dimen/min_size_clickable_area"
-                android:layout_margin="@dimen/standard_half_margin"
-                android:adjustViewBounds="true"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_margin="@dimen/standard_quarter_margin"
                 android:alpha="0.7"
-                android:background="@drawable/shape_oval"
-                android:backgroundTint="@color/call_buttons_background"
                 android:contentDescription="@string/nc_call_button_content_description_microphone"
-                app:srcCompat="@drawable/ic_mic_off_white_24px" />
+                app:backgroundTint="@color/call_buttons_background"
+                app:borderWidth="0dp"
+                app:fabCustomSize="40dp"
+                app:shapeAppearance="@style/fab_3_rounded"
+                app:srcCompat="@drawable/ic_mic_off_white_24px"
+                app:tint="@color/white" />
 
-            <ImageButton
+            <com.google.android.material.floatingactionbutton.FloatingActionButton
                 android:id="@+id/more_call_actions"
-                android:layout_width="@dimen/min_size_clickable_area"
-                android:layout_height="@dimen/min_size_clickable_area"
-                android:layout_margin="@dimen/standard_half_margin"
-                android:adjustViewBounds="true"
-                android:background="@drawable/shape_oval"
-                android:backgroundTint="@color/call_buttons_background"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_margin="@dimen/standard_quarter_margin"
                 android:contentDescription="@string/nc_call_button_content_description_microphone"
-                app:srcCompat="@drawable/ic_dots_horizontal_white" />
+                app:backgroundTint="@color/call_buttons_background"
+                app:borderWidth="0dp"
+                app:fabCustomSize="40dp"
+                app:shapeAppearance="@style/fab_3_rounded"
+                app:srcCompat="@drawable/ic_dots_horizontal_white"
+                app:tint="@color/white" />
 
-            <ImageButton
+            <com.google.android.material.floatingactionbutton.FloatingActionButton
                 android:id="@+id/hangupButton"
-                android:layout_width="@dimen/min_size_clickable_area"
-                android:layout_height="@dimen/min_size_clickable_area"
-                android:layout_margin="@dimen/standard_half_margin"
-                android:adjustViewBounds="true"
-                android:background="@drawable/shape_oval"
-                android:backgroundTint="@color/nc_darkRed"
-                android:contentDescription="@string/nc_call_button_content_description_hangup"
-                app:srcCompat="@drawable/ic_call_end_white_24px" />
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_margin="@dimen/standard_quarter_margin"
+                android:contentDescription="@string/nc_call_button_content_description_microphone"
+                app:backgroundTint="@color/nc_darkRed"
+                app:borderWidth="0dp"
+                app:fabCustomSize="40dp"
+                app:shapeAppearance="@style/fab_3_rounded"
+                app:srcCompat="@drawable/ic_call_end_white_24px"
+                app:tint="@color/white" />
         </com.google.android.flexbox.FlexboxLayout>
     </LinearLayout>
 

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

@@ -87,5 +87,6 @@
 
     <dimen name="poll_buttons_min_width">150dp</dimen>
 
+    <dimen name="fab_small">40dp</dimen>
 
 </resources>

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

@@ -289,4 +289,10 @@
         <item name="android:textAllCaps">false</item>
     </style>
 
+    <style name="fab_3_rounded">
+        <item name="cornerFamily">rounded</item>
+        <item name="cornerSize">50%</item>
+    </style>
+
+
 </resources>