Improved UI on large tablets

This commit is contained in:
Sylvain Berfini 2025-06-13 12:03:16 +02:00
parent 8148354901
commit 61be1d21d5
20 changed files with 395 additions and 5 deletions

View file

@ -20,6 +20,7 @@ Group changes to describe their impact on the project, as follows:
- Added a setting to let app auto-answer call with video sending already enabled
### Changed
- Improved UI on tablets with screen sw600dp and higher, will look more like our desktop app
- Reworked some settings (moved calls related ones from advanced settings to advanced calls settings)
## [6.0.9] - 2025-06-06

View file

@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="256"
android:viewportHeight="256">
<path
android:pathData="M160,112a24,24 0,1 1,-24 -24A24,24 0,0 1,160 112ZM224,40L224,216a16,16 0,0 1,-16 16L64,232a16,16 0,0 1,-16 -16L48,192L32,192a8,8 0,0 1,0 -16L48,176L48,136L32,136a8,8 0,0 1,0 -16L48,120L48,80L32,80a8,8 0,0 1,0 -16L48,64L48,40A16,16 0,0 1,64 24L208,24A16,16 0,0 1,224 40ZM190.4,163.2A67.88,67.88 0,0 0,163 141.51a40,40 0,1 0,-53.94 0A67.88,67.88 0,0 0,81.6 163.2a8,8 0,1 0,12.8 9.6,52 52,0 0,1 83.2,0 8,8 0,1 0,12.8 -9.6Z"
android:fillColor="#4e6074"/>
</vector>

View file

@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="256"
android:viewportHeight="256">
<path
android:pathData="M132,24A100.11,100.11 0,0 0,32 124v84a16,16 0,0 0,16 16h84a100,100 0,0 0,0 -200ZM164,152L96,152a8,8 0,0 1,0 -16h68a8,8 0,0 1,0 16ZM164,120L96,120a8,8 0,0 1,0 -16h68a8,8 0,0 1,0 16Z"
android:fillColor="#4e6074"/>
</vector>

View file

@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="256"
android:viewportHeight="256">
<path
android:pathData="M231.88,175.08A56.26,56.26 0,0 1,176 224C96.6,224 32,159.4 32,80A56.26,56.26 0,0 1,80.92 24.12a16,16 0,0 1,16.62 9.52l21.12,47.15 0,0.12A16,16 0,0 1,117.39 96c-0.18,0.27 -0.37,0.52 -0.57,0.77L96,121.45c7.49,15.22 23.41,31 38.83,38.51l24.34,-20.71a8.12,8.12 0,0 1,0.75 -0.56,16 16,0 0,1 15.17,-1.4l0.13,0.06 47.11,21.11A16,16 0,0 1,231.88 175.08Z"
android:fillColor="#4e6074"/>
</vector>

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:topRightRadius="30dp" />
<solid android:color="?attr/color_main1_500"/>
</shape>

View file

@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="256"
android:viewportHeight="256">
<path
android:pathData="M204,88a12,12 0,1 1,-12 -12A12,12 0,0 1,204 88ZM192,156a12,12 0,1 0,12 12A12,12 0,0 0,192 156ZM96,104a16,16 0,1 0,16 16A16,16 0,0 0,96 104ZM232,56L232,200a16,16 0,0 1,-16 16L40,216a16,16 0,0 1,-16 -16L24,56A16,16 0,0 1,40 40L216,40A16,16 0,0 1,232 56ZM168,120h48L216,56L168,56ZM135.75,166a39.76,39.76 0,0 0,-17.19 -23.34,32 32,0 1,0 -45.12,0A39.84,39.84 0,0 0,56.25 166a8,8 0,0 0,15.5 4c2.64,-10.25 13.06,-18 24.25,-18s21.62,7.73 24.25,18a8,8 0,1 0,15.5 -4ZM216,200L216,136L168,136v64h48Z"
android:fillColor="#4e6074"/>
</vector>

View file

@ -54,6 +54,8 @@
android:id="@+id/missed_calls"
android:layout_width="@dimen/unread_count_indicator_size"
android:layout_height="@dimen/unread_count_indicator_size"
android:layout_marginEnd="1dp"
android:layout_marginTop="-12dp"
android:text="@{String.valueOf(viewModel.missedCallsCount), default=`1`}"
android:visibility="@{viewModel.missedCallsCount > 0 ? View.VISIBLE : View.GONE}"
app:layout_constraintTop_toTopOf="@id/calls"
@ -81,6 +83,8 @@
android:id="@+id/unread_messages"
android:layout_width="@dimen/unread_count_indicator_size"
android:layout_height="@dimen/unread_count_indicator_size"
android:layout_marginEnd="1dp"
android:layout_marginTop="-12dp"
android:text="@{String.valueOf(viewModel.unreadMessages), default=`100`}"
android:visibility="@{viewModel.unreadMessages > 0 &amp;&amp; !viewModel.hideConversations ? View.VISIBLE : View.GONE}"
app:layout_constraintTop_toTopOf="@id/conversations"

View file

@ -148,6 +148,12 @@
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<include
layout="@layout/sliding_pane_separator"
android:layout_width="1dp"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

View file

@ -80,7 +80,7 @@
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="20dp"
android:layout_marginTop="10dp"
android:text="@string/contacts_list_favourites_title"
android:drawableEnd="@{viewModel.showFavourites ? @drawable/caret_up : @drawable/caret_down, default=@drawable/caret_up}"
android:drawableTint="@color/gray_main2_600"/>
@ -186,6 +186,12 @@
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<include
layout="@layout/sliding_pane_separator"
android:layout_width="1dp"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

View file

@ -158,6 +158,12 @@
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<include
layout="@layout/sliding_pane_separator"
android:layout_width="1dp"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

View file

@ -101,6 +101,12 @@
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<include
layout="@layout/sliding_pane_separator"
android:layout_width="1dp"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<include

View file

@ -0,0 +1,142 @@
<?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:bind="http://schemas.android.com/tools">
<data>
<import type="android.view.View" />
<import type="org.linphone.ui.NotoSansFont" />
<variable
name="viewModel"
type="org.linphone.ui.main.viewmodel.AbstractMainViewModel" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/bottom_nav_bar"
android:layout_width="@dimen/landscape_nav_bar_width"
android:layout_height="match_parent"
android:background="?attr/color_main2_000"
android:paddingTop="20dp">
<View
android:id="@+id/background_shape"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/shape_desktop_nav_back_background" />
<include
android:id="@+id/avatar"
android:onClick="@{() -> viewModel.openDrawerMenu()}"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
layout="@layout/contact_avatar"
bind:model="@{viewModel.account}"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintVertical_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@id/contacts"/>
<androidx.appcompat.widget.AppCompatTextView
style="@style/bottom_nav_bar_label_style"
android:id="@+id/contacts"
android:onClick="@{() -> viewModel.navigateToContacts()}"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:textColor="?attr/color_on_main"
android:drawableTop="@{viewModel.contactsSelected ? @drawable/address_book_fill : @drawable/address_book, default=@drawable/address_book}"
android:drawablePadding="10dp"
android:drawableTint="?attr/color_on_main"
android:text="@string/bottom_navigation_contacts_label"
textFont="@{viewModel.contactsSelected ? NotoSansFont.NotoSansBold : NotoSansFont.NotoSansRegular}"
app:layout_constraintBottom_toTopOf="@id/calls"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/avatar" />
<androidx.appcompat.widget.AppCompatTextView
style="@style/bottom_nav_bar_label_style"
android:id="@+id/calls"
android:onClick="@{() -> viewModel.navigateToHistory()}"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:textColor="?attr/color_on_main"
android:drawableTop="@{viewModel.callsSelected ? @drawable/phone_fill : @drawable/phone, default=@drawable/phone}"
android:drawableTint="?attr/color_on_main"
android:drawablePadding="10dp"
android:text="@string/bottom_navigation_calls_label"
textFont="@{viewModel.callsSelected ? NotoSansFont.NotoSansBold : NotoSansFont.NotoSansRegular}"
app:layout_constraintBottom_toTopOf="@id/conversations"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/contacts" />
<androidx.appcompat.widget.AppCompatTextView
style="@style/unread_count_text_style"
android:id="@+id/missed_calls"
android:layout_width="@dimen/unread_count_indicator_size"
android:layout_height="@dimen/unread_count_indicator_size"
android:layout_marginEnd="1dp"
android:layout_marginTop="-12dp"
android:text="@{String.valueOf(viewModel.missedCallsCount), default=`1`}"
android:visibility="@{viewModel.missedCallsCount > 0 ? View.VISIBLE : View.GONE}"
app:layout_constraintTop_toTopOf="@id/calls"
app:layout_constraintEnd_toEndOf="@id/calls"/>
<androidx.appcompat.widget.AppCompatTextView
style="@style/bottom_nav_bar_label_style"
android:id="@+id/conversations"
android:onClick="@{() -> viewModel.navigateToConversations()}"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:textColor="?attr/color_on_main"
android:drawableTop="@{viewModel.conversationsSelected ? @drawable/chat_teardrop_text_fill : @drawable/chat_teardrop_text, default=@drawable/chat_teardrop_text}"
android:drawablePadding="10dp"
android:drawableTint="?attr/color_on_main"
android:text="@string/bottom_navigation_conversations_label"
android:visibility="@{viewModel.hideConversations ? View.GONE : View.VISIBLE}"
textFont="@{viewModel.conversationsSelected ? NotoSansFont.NotoSansBold : NotoSansFont.NotoSansRegular}"
app:layout_constraintBottom_toTopOf="@id/meetings"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/calls" />
<androidx.appcompat.widget.AppCompatTextView
style="@style/unread_count_text_style"
android:id="@+id/unread_messages"
android:layout_width="@dimen/unread_count_indicator_size"
android:layout_height="@dimen/unread_count_indicator_size"
android:layout_marginEnd="1dp"
android:layout_marginTop="-12dp"
android:text="@{String.valueOf(viewModel.unreadMessages), default=`100`}"
android:visibility="@{viewModel.unreadMessages > 0 &amp;&amp; !viewModel.hideConversations ? View.VISIBLE : View.GONE}"
app:layout_constraintTop_toTopOf="@id/conversations"
app:layout_constraintEnd_toEndOf="@id/conversations"/>
<androidx.appcompat.widget.AppCompatTextView
style="@style/bottom_nav_bar_label_style"
android:id="@+id/meetings"
android:onClick="@{() -> viewModel.navigateToMeetings()}"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:textColor="?attr/color_on_main"
android:drawableTop="@{viewModel.meetingsSelected ? @drawable/video_conference_fill : @drawable/video_conference, default=@drawable/video_conference}"
android:drawablePadding="10dp"
android:drawableTint="?attr/color_on_main"
android:text="@string/bottom_navigation_meetings_label"
android:visibility="@{viewModel.hideMeetings ? View.GONE : View.VISIBLE}"
textFont="@{viewModel.meetingsSelected ? NotoSansFont.NotoSansBold : NotoSansFont.NotoSansRegular}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/conversations" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

View file

@ -0,0 +1,159 @@
<?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:bind="http://schemas.android.com/tools">
<data>
<import type="android.view.View" />
<variable
name="enableExtraAction"
type="Boolean" />
<variable
name="extraActionClickListener"
type="View.OnClickListener" />
<variable
name="extraActionIcon"
type="android.graphics.drawable.Drawable" />
<variable
name="extraActionContentDescription"
type="String" />
<variable
name="viewModel"
type="org.linphone.ui.main.viewmodel.AbstractMainViewModel" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="@dimen/top_bar_height"
android:background="?attr/color_main2_000">
<androidx.constraintlayout.widget.Group
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="title, search_toggle"
android:visibility="@{viewModel.searchBarVisible ? View.GONE : View.VISIBLE}" />
<androidx.constraintlayout.widget.Group
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="cancel_search, search, clear_field"
android:visibility="@{viewModel.searchBarVisible ? View.VISIBLE : View.GONE, default=gone}" />
<androidx.constraintlayout.widget.Barrier
android:id="@+id/background_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="title, search"
app:barrierDirection="bottom" />
<androidx.appcompat.widget.AppCompatTextView
style="@style/default_text_style_800"
android:id="@+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginEnd="10dp"
android:gravity="center_vertical"
android:text="@{viewModel.title, default=`Title`}"
android:textColor="?attr/color_text"
android:textSize="28sp"
app:layout_constraintVertical_bias="1"
app:layout_constraintEnd_toStartOf="@id/search_toggle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<ImageView
android:id="@+id/search_toggle"
android:onClick="@{() -> viewModel.openSearchBar()}"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="5dp"
android:paddingStart="15dp"
android:paddingEnd="15dp"
android:src="@drawable/magnifying_glass"
android:contentDescription="@string/content_description_open_filter"
app:layout_constraintBottom_toBottomOf="@id/title"
app:layout_constraintEnd_toStartOf="@id/extra_action"
app:layout_constraintTop_toTopOf="@id/title"
app:tint="?attr/color_main2_600" />
<ImageView
android:id="@+id/extra_action"
android:onClick="@{extraActionClickListener}"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="5dp"
android:paddingStart="15dp"
android:paddingEnd="15dp"
android:src="@{extraActionIcon, default=@drawable/dots_three_vertical}"
android:contentDescription="@{extraActionContentDescription}"
android:visibility="@{enableExtraAction ? View.VISIBLE : View.GONE, default=gone}"
app:layout_constraintBottom_toBottomOf="@id/title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/title"
app:tint="?attr/color_main2_600" />
<ImageView
android:id="@+id/cancel_search"
android:onClick="@{() -> viewModel.closeSearchBar()}"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="5dp"
android:paddingStart="15dp"
android:paddingEnd="15dp"
android:src="@drawable/caret_left"
android:contentDescription="@string/content_description_cancel_filter"
app:layout_constraintBottom_toBottomOf="@id/search"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/search"
app:tint="?attr/color_main2_600" />
<com.google.android.material.textfield.TextInputLayout
style="?attr/textInputFilledStyle"
android:id="@+id/search"
android:layout_width="0dp"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:textColorHint="?attr/color_hint_text"
app:hintEnabled="false"
app:hintAnimationEnabled="false"
app:hintTextColor="?attr/color_hint_text"
app:boxStrokeWidth="0dp"
app:boxStrokeWidthFocused="0dp"
app:layout_constraintEnd_toStartOf="@id/clear_field"
app:layout_constraintStart_toEndOf="@id/cancel_search"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textCursorDrawable="@null"
android:textColor="?attr/color_text"
android:textSize="16sp"
android:inputType="text"
android:paddingVertical="1dp"
android:imeOptions="actionSearch"
android:text="@={viewModel.searchFilter}"
android:background="@android:color/transparent" />
</com.google.android.material.textfield.TextInputLayout>
<ImageView
android:id="@+id/clear_field"
android:onClick="@{() -> viewModel.clearFilter()}"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="5dp"
android:paddingStart="15dp"
android:paddingEnd="15dp"
android:src="@drawable/x"
android:contentDescription="@string/content_description_clear_filter"
app:layout_constraintBottom_toBottomOf="@id/search"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/search"
app:tint="?attr/color_main2_600" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<View xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="?attr/color_separator">
</View>

View file

@ -80,7 +80,7 @@
android:padding="5dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:layout_marginTop="10dp"
android:text="@string/contacts_list_favourites_title"
android:drawableEnd="@{viewModel.showFavourites ? @drawable/caret_up : @drawable/caret_down, default=@drawable/caret_up}"
android:drawableTint="?attr/color_main2_600" />

View file

@ -397,12 +397,15 @@
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="@dimen/screen_bottom_margin"
android:text="@string/help_troubleshooting_subtitle"
android:textSize="14sp"
android:textColor="?attr/color_main2_600"
app:layout_constraintVertical_bias="0"
app:layout_constraintTop_toBottomOf="@id/debug_title"
app:layout_constraintStart_toEndOf="@id/debug_icon"
app:layout_constraintEnd_toEndOf="parent" />
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<View xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="1dp"
android:layout_height="match_parent">
</View>

View file

@ -2,4 +2,6 @@
<resources>
<dimen name="welcome_icon_size">150dp</dimen>
<dimen name="text_input_max_width">600dp</dimen>
<dimen name="landscape_nav_bar_width">90dp</dimen>
<dimen name="sliding_pane_left_fragment_width">500dp</dimen>
</resources>

View file

@ -5,7 +5,8 @@
<dimen name="screen_bottom_margin">10dp</dimen>
<dimen name="landscape_nav_bar_width">75dp</dimen>
<dimen name="landscape_nav_bar_width">80dp</dimen>
<dimen name="bottom_nav_bar_text_size">12sp</dimen>
<dimen name="sliding_pane_left_fragment_width">350dp</dimen>
<dimen name="sliding_pane_right_fragment_width">300dp</dimen>

View file

@ -99,7 +99,7 @@
</style>
<style name="bottom_nav_bar_label_style">
<item name="android:fontFamily">@font/noto_sans</item>
<item name="android:textSize">11sp</item>
<item name="android:textSize">@dimen/bottom_nav_bar_text_size</item>
<item name="android:textColor">?attr/color_text</item>
<item name="android:gravity">center</item>
<item name="android:maxLines">1</item>