Merge pull request #2850 from nextcloud/bugfix/noid/fixCallButtonLayouting

Fix horizontal (=landscape) call design button layouting/sizing
This commit is contained in:
Marcel Hibbe 2023-03-17 11:49:08 +01:00 committed by GitHub
commit 1e42ccc07c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 129 additions and 101 deletions

View file

@ -1,9 +1,12 @@
<?xml version="1.0" encoding="utf-8"?><!-- <?xml version="1.0" encoding="utf-8"?>
<!--
~ Nextcloud Talk application ~ Nextcloud Talk application
~ ~
~ @author Andy Scherzinger
~ @author Mario Danic ~ @author Mario Danic
~ @author Marcel Hibbe ~ @author Marcel Hibbe
~ @author Tim Krüger ~ @author Tim Krüger
~ Copyright (C) 2023 Andy Scherzinger <
~ Copyright (C) 2022 Tim Krüger <t@timkrueger.me> ~ Copyright (C) 2022 Tim Krüger <t@timkrueger.me>
~ Copyright (C) 2021 Marcel Hibbe <dev@mhibbe.de> ~ Copyright (C) 2021 Marcel Hibbe <dev@mhibbe.de>
~ Copyright (C) 2017-2018 Mario Danic <mario@lovelyhq.com> ~ Copyright (C) 2017-2018 Mario Danic <mario@lovelyhq.com>
@ -54,7 +57,8 @@
android:gravity="center" android:gravity="center"
android:numColumns="2" android:numColumns="2"
android:scrollbars="vertical" android:scrollbars="vertical"
android:stretchMode="columnWidth" /> android:stretchMode="columnWidth"
tools:listitem="@layout/call_item" />
<FrameLayout <FrameLayout
android:id="@+id/selfVideoViewWrapper" android:id="@+id/selfVideoViewWrapper"
@ -77,8 +81,8 @@
android:layout_height="40dp" android:layout_height="40dp"
android:layout_gravity="center_horizontal|bottom" android:layout_gravity="center_horizontal|bottom"
android:layout_marginBottom="20dp" 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 <ProgressBar
android:id="@+id/selfVideoViewProgressBar" android:id="@+id/selfVideoViewProgressBar"
@ -98,16 +102,16 @@
android:background="@android:color/transparent" android:background="@android:color/transparent"
android:orientation="horizontal" android:orientation="horizontal"
android:weightSum="1"> android:weightSum="1">
<ImageView <ImageView
android:id="@+id/call_recording_indicator" android:id="@+id/call_recording_indicator"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:src="@drawable/record_stop"
android:contentDescription="@null" android:contentDescription="@null"
android:visibility="gone" android:src="@drawable/record_stop"
android:translationZ="2dp" android:translationZ="2dp"
tools:visibility="visible"> android:visibility="gone"
</ImageView> tools:visibility="visible"></ImageView>
</LinearLayout> </LinearLayout>
<LinearLayout <LinearLayout
@ -160,111 +164,130 @@
android:layout_alignTop="@id/verticalCenter" android:layout_alignTop="@id/verticalCenter"
android:layout_marginTop="-50dp" /> android:layout_marginTop="-50dp" />
<ImageButton
android:id="@+id/lower_hand_button"
android:layout_width="@dimen/min_size_clickable_area"
android:layout_height="@dimen/min_size_clickable_area"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="150dp"
android:layout_marginEnd="20dp"
android:contentDescription="@string/lower_hand"
android:background="@drawable/shape_oval"
android:backgroundTint="@color/call_buttons_background"
android:visibility="gone"
tools:visibility="visible"
app:srcCompat="@drawable/ic_baseline_do_not_touch_24" />
</RelativeLayout> </RelativeLayout>
</LinearLayout> </LinearLayout>
<LinearLayout <LinearLayout
android:id="@+id/callControls" android:layout_width="match_parent"
android:layout_height="@dimen/call_controls_height" android:layout_height="wrap_content"
android:layout_width="450dp"
android:layout_centerHorizontal="true"
android:paddingHorizontal="@dimen/call_controls_padding_horizontal"
android:layout_alignBottom="@id/linearWrapperLayout" android:layout_alignBottom="@id/linearWrapperLayout"
android:gravity="center_vertical"
android:orientation="vertical">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/lower_hand_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
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="30dp"
android:animateLayoutChanges="true" android:animateLayoutChanges="true"
android:background="@android:color/transparent" android:background="@android:color/transparent"
android:gravity="center" android:gravity="center"
android:minHeight="@dimen/call_controls_height"
android:orientation="horizontal" android:orientation="horizontal"
android:weightSum="6"> 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:id="@+id/pictureInPictureButton"
android:layout_width="0dp" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:adjustViewBounds="true" android:layout_margin="@dimen/standard_quarter_margin"
android:layout_marginHorizontal="@dimen/call_controls_margin_horizontal" android:contentDescription="@string/nc_call_button_content_description_pip"
android:layout_weight="1" app:backgroundTint="@color/call_buttons_background"
android:background="@drawable/shape_oval" app:borderWidth="0dp"
android:backgroundTint="@color/call_buttons_background" app:fabCustomSize="@dimen/fab_small"
app:shapeAppearance="@style/fab_3_rounded"
app:srcCompat="@drawable/ic_baseline_picture_in_picture_alt_24" app:srcCompat="@drawable/ic_baseline_picture_in_picture_alt_24"
android:contentDescription="@string/nc_call_button_content_description_pip" /> app:tint="@color/white" />
<ImageButton <com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/audioOutputButton" android:id="@+id/audioOutputButton"
android:layout_width="0dp" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:adjustViewBounds="true" android:layout_margin="@dimen/standard_quarter_margin"
android:layout_marginHorizontal="@dimen/call_controls_margin_horizontal" android:contentDescription="@string/nc_call_button_content_description_audio_output"
android:layout_weight="1" app:backgroundTint="@color/call_buttons_background"
android:background="@drawable/shape_oval" app:borderWidth="0dp"
android:backgroundTint="@color/call_buttons_background" app:fabCustomSize="40dp"
app:shapeAppearance="@style/fab_3_rounded"
app:srcCompat="@drawable/ic_volume_mute_white_24dp" app:srcCompat="@drawable/ic_volume_mute_white_24dp"
android:contentDescription="@string/nc_call_button_content_description_audio_output" /> app:tint="@color/white" />
<ImageButton <com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/cameraButton" android:id="@+id/cameraButton"
android:layout_width="0dp" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:adjustViewBounds="true" android:layout_margin="@dimen/standard_quarter_margin"
android:layout_marginHorizontal="@dimen/call_controls_margin_horizontal"
android:layout_weight="1"
android:alpha="0.7" android:alpha="0.7"
android:background="@drawable/shape_oval" android:contentDescription="@string/nc_call_button_content_description_camera"
android:backgroundTint="@color/call_buttons_background" 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:srcCompat="@drawable/ic_videocam_white_24px"
android:contentDescription="@string/nc_call_button_content_description_camera" /> app:tint="@color/white" />
<ImageButton <com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/microphoneButton" android:id="@+id/microphoneButton"
android:layout_width="0dp" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:adjustViewBounds="true" android:layout_margin="@dimen/standard_quarter_margin"
android:layout_marginHorizontal="@dimen/call_controls_margin_horizontal"
android:layout_weight="1"
android:alpha="0.7" android:alpha="0.7"
android:background="@drawable/shape_oval" android:contentDescription="@string/nc_call_button_content_description_microphone"
android:backgroundTint="@color/call_buttons_background" 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:srcCompat="@drawable/ic_mic_off_white_24px"
android:contentDescription="@string/nc_call_button_content_description_microphone" /> app:tint="@color/white" />
<ImageButton <com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/more_call_actions" android:id="@+id/more_call_actions"
android:layout_width="0dp" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:adjustViewBounds="true" android:layout_margin="@dimen/standard_quarter_margin"
android:layout_marginHorizontal="@dimen/call_controls_margin_horizontal" android:contentDescription="@string/nc_call_button_content_description_microphone"
android:layout_weight="1" app:backgroundTint="@color/call_buttons_background"
android:background="@drawable/shape_oval" app:borderWidth="0dp"
android:backgroundTint="@color/call_buttons_background" app:fabCustomSize="40dp"
app:shapeAppearance="@style/fab_3_rounded"
app:srcCompat="@drawable/ic_dots_horizontal_white" app:srcCompat="@drawable/ic_dots_horizontal_white"
android:contentDescription="@string/nc_call_button_content_description_microphone" /> app:tint="@color/white" />
<ImageButton <com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/hangupButton" android:id="@+id/hangupButton"
android:layout_width="0dp" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:adjustViewBounds="true" android:layout_margin="@dimen/standard_quarter_margin"
android:layout_marginHorizontal="@dimen/call_controls_margin_horizontal" android:contentDescription="@string/nc_call_button_content_description_microphone"
android:layout_weight="1" app:backgroundTint="@color/nc_darkRed"
android:background="@drawable/shape_oval" app:borderWidth="0dp"
android:backgroundTint="@color/nc_darkRed" app:fabCustomSize="40dp"
app:shapeAppearance="@style/fab_3_rounded"
app:srcCompat="@drawable/ic_call_end_white_24px" app:srcCompat="@drawable/ic_call_end_white_24px"
android:contentDescription="@string/nc_call_button_content_description_hangup" /> app:tint="@color/white" />
</com.google.android.flexbox.FlexboxLayout>
</LinearLayout> </LinearLayout>
<LinearLayout <LinearLayout

View file

@ -69,8 +69,6 @@
<dimen name="call_self_video_short_side_length">80dp</dimen> <dimen name="call_self_video_short_side_length">80dp</dimen>
<dimen name="call_grid_item_min_height">180dp</dimen> <dimen name="call_grid_item_min_height">180dp</dimen>
<dimen name="call_controls_height">110dp</dimen> <dimen name="call_controls_height">110dp</dimen>
<dimen name="call_controls_padding_horizontal">10dp</dimen>
<dimen name="call_controls_margin_horizontal">10dp</dimen>
<dimen name="call_participant_progress_bar_size">48dp</dimen> <dimen name="call_participant_progress_bar_size">48dp</dimen>
<dimen name="call_self_participant_progress_bar_size">48dp</dimen> <dimen name="call_self_participant_progress_bar_size">48dp</dimen>
<dimen name="zero">0dp</dimen> <dimen name="zero">0dp</dimen>
@ -89,5 +87,6 @@
<dimen name="poll_buttons_min_width">150dp</dimen> <dimen name="poll_buttons_min_width">150dp</dimen>
<dimen name="fab_small">40dp</dimen>
</resources> </resources>

View file

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