Switched to constraint layout + added currently selected tab animation

app/build.gradle

@@ -170,12 +170,13 @@ dependencies {
     implementation 'androidx.media:media:1.2.0'
     implementation 'androidx.fragment:fragment-ktx:1.2.5'
     implementation 'androidx.core:core-ktx:1.3.2'
-    implementation 'androidx.navigation:navigation-fragment-ktx:2.3.0'
+    implementation 'androidx.navigation:navigation-fragment-ktx:2.3.1'
-    implementation 'androidx.navigation:navigation-ui-ktx:2.3.0'
+    implementation 'androidx.navigation:navigation-ui-ktx:2.3.1'
     implementation 'androidx.constraintlayout:constraintlayout:2.0.2'
     implementation 'androidx.lifecycle:lifecycle-extensions:2.2.0'
     implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.2.0'
     implementation 'androidx.recyclerview:recyclerview:1.1.0'
+    implementation 'androidx.constraintlayout:constraintlayout:2.0.2'
 
     implementation 'com.google.android.material:material:1.2.1'
     implementation 'com.google.android:flexbox:2.0.0'

app/src/main/java/org/linphone/activities/main/fragments/TabsFragment.kt

@@ -23,7 +23,6 @@ import android.os.Bundle
 import androidx.lifecycle.ViewModelProvider
 import androidx.navigation.NavController
 import androidx.navigation.NavDestination
-import androidx.navigation.findNavController
 import androidx.navigation.fragment.findNavController
 import org.linphone.R
 import org.linphone.activities.GenericFragment
@@ -93,6 +92,11 @@ class TabsFragment : GenericFragment<TabsFragmentBinding>(), NavController.OnDes
         destination: NavDestination,
         arguments: Bundle?
     ) {
-        viewModel.updateTabSelection(destination.id)
+        when (destination.id) {
+            R.id.masterCallLogsFragment -> binding.selectorMotion.transitionToState(R.id.call_history)
+            R.id.masterContactsFragment -> binding.selectorMotion.transitionToState(R.id.contacts)
+            R.id.dialerFragment -> binding.selectorMotion.transitionToState(R.id.dialer)
+            R.id.masterChatRoomsFragment -> binding.selectorMotion.transitionToState(R.id.chat_rooms)
+        }
     }
 }

app/src/main/java/org/linphone/activities/main/viewmodels/TabsViewModel.kt

@@ -22,21 +22,9 @@ package org.linphone.activities.main.viewmodels
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.ViewModel
 import org.linphone.LinphoneApplication.Companion.coreContext
-import org.linphone.LinphoneApplication.Companion.corePreferences
-import org.linphone.R
 import org.linphone.core.*
 
 class TabsViewModel : ViewModel() {
-    val showHistory: Boolean = corePreferences.showHistory
-    val showContacts: Boolean = corePreferences.showContacts
-    val showDialer: Boolean = corePreferences.showDialer
-    val showChat: Boolean = corePreferences.showChat
-
-    val historySelected = MutableLiveData<Boolean>()
-    val contactsSelected = MutableLiveData<Boolean>()
-    val dialerSelected = MutableLiveData<Boolean>()
-    val chatSelected = MutableLiveData<Boolean>()
-
     val unreadMessagesCount = MutableLiveData<Int>()
     val missedCallsCount = MutableLiveData<Int>()
 
@@ -86,18 +74,4 @@ class TabsViewModel : ViewModel() {
     fun updateUnreadChatCount() {
         unreadMessagesCount.value = coreContext.core.unreadChatMessageCountFromActiveLocals
     }
-
-    fun updateTabSelection(destinationId: Int) {
-        historySelected.value = false
-        contactsSelected.value = false
-        dialerSelected.value = false
-        chatSelected.value = false
-
-        when (destinationId) {
-            R.id.masterCallLogsFragment -> historySelected.value = true
-            R.id.masterContactsFragment -> contactsSelected.value = true
-            R.id.dialerFragment -> dialerSelected.value = true
-            R.id.masterChatRoomsFragment -> chatSelected.value = true
-        }
-    }
 }

app/src/main/java/org/linphone/core/CorePreferences.kt

@@ -299,20 +299,6 @@ class CorePreferences constructor(private val context: Context) {
     val dtmfKeypadVibration: Boolean
         get() = config.getBool("app", "dtmf_keypad_vibraton", false)
 
-    /* Tabs */
-
-    val showHistory: Boolean
-        get() = config.getBool("app", "tabs_history", true)
-
-    val showContacts: Boolean
-        get() = config.getBool("app", "tabs_contacts", true)
-
-    val showDialer: Boolean
-        get() = config.getBool("app", "tabs_dialer", true)
-
-    val showChat: Boolean
-        get() = config.getBool("app", "tabs_chat", true)
-
     /* Assistant */
 
     val showCreateAccount: Boolean

app/src/main/res/layout-land/tabs_fragment.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<layout xmlns:android="http://schemas.android.com/apk/res/android">
+<layout xmlns:tools="http://schemas.android.com/tools"
+    xmlns:android="http://schemas.android.com/apk/res/android">
 
     <data>
         <import type="android.view.View"/>
@@ -20,36 +21,51 @@
             type="org.linphone.activities.main.viewmodels.TabsViewModel" />
     </data>
 
-    <LinearLayout
+    <androidx.constraintlayout.widget.ConstraintLayout
-        android:baselineAligned="false"
+        xmlns:app="http://schemas.android.com/apk/res-auto"
         android:id="@+id/footer"
         android:layout_width="60dp"
         android:layout_height="match_parent"
+        android:baselineAligned="false"
         android:orientation="vertical">
 
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guidelineTop"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal"
+            app:layout_constraintGuide_percent="0.25" />
+
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guidelineMiddle"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal"
+            app:layout_constraintGuide_percent="0.5" />
+
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guidelineBottom"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal"
+            app:layout_constraintGuide_percent="0.75" />
+
         <RelativeLayout
             android:layout_width="match_parent"
             android:layout_height="0dp"
-            android:layout_weight="1"
+            android:background="@drawable/footer_button"
-            android:onClick="@{historyClickListener}"
+            app:layout_constraintTop_toTopOf="parent"
-            android:visibility="@{viewModel.showHistory ? View.VISIBLE : View.GONE}"
+            app:layout_constraintBottom_toTopOf="@id/guidelineTop"
-            android:background="@drawable/footer_button">
+            android:onClick="@{historyClickListener}">
 
             <ImageView
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_centerInParent="true"
-                android:padding="15dp"
                 android:contentDescription="@string/content_description_menu_history"
+                android:padding="15dp"
                 android:src="@drawable/footer_history" />
 
-            <View
-                android:layout_width="5dp"
-                android:layout_height="match_parent"
-                android:layout_alignParentBottom="true"
-                android:background="?attr/accentColor"
-                android:visibility="@{viewModel.historySelected ? View.VISIBLE : View.GONE, default=gone}" />
-
             <TextView
                 style="@style/unread_count_font"
                 android:layout_width="wrap_content"
@@ -67,76 +83,55 @@
         <RelativeLayout
             android:layout_width="match_parent"
             android:layout_height="0dp"
-            android:layout_weight="1"
+            android:background="@drawable/footer_button"
-            android:onClick="@{contactsClickListener}"
+            app:layout_constraintTop_toTopOf="@id/guidelineTop"
-            android:visibility="@{viewModel.showContacts ? View.VISIBLE : View.GONE}"
+            app:layout_constraintBottom_toTopOf="@id/guidelineMiddle"
-            android:background="@drawable/footer_button">
+            android:onClick="@{contactsClickListener}">
 
             <ImageView
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_centerInParent="true"
-                android:padding="15dp"
                 android:contentDescription="@string/content_description_menu_contacts"
+                android:padding="15dp"
                 android:src="@drawable/footer_contacts" />
 
-            <View
-                android:layout_width="5dp"
-                android:layout_height="match_parent"
-                android:layout_alignParentBottom="true"
-                android:background="?attr/accentColor"
-                android:visibility="@{viewModel.contactsSelected ? View.VISIBLE : View.GONE, default=gone}" />
-
         </RelativeLayout>
 
         <RelativeLayout
             android:layout_width="match_parent"
             android:layout_height="0dp"
-            android:layout_weight="1"
+            android:background="@drawable/footer_button"
-            android:onClick="@{dialerClickListener}"
+            app:layout_constraintTop_toTopOf="@id/guidelineMiddle"
-            android:visibility="@{viewModel.showDialer ? View.VISIBLE : View.GONE}"
+            app:layout_constraintBottom_toTopOf="@id/guidelineBottom"
-            android:background="@drawable/footer_button">
+            android:onClick="@{dialerClickListener}">
 
             <ImageView
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_centerInParent="true"
-                android:padding="15dp"
                 android:contentDescription="@string/content_description_menu_dialer"
+                android:padding="15dp"
                 android:src="@drawable/footer_dialer" />
 
-            <View
-                android:layout_width="5dp"
-                android:layout_height="match_parent"
-                android:layout_alignParentBottom="true"
-                android:background="?attr/accentColor"
-                android:visibility="@{viewModel.dialerSelected ? View.VISIBLE : View.GONE, default=visible}" />
-
         </RelativeLayout>
 
         <RelativeLayout
             android:layout_width="match_parent"
             android:layout_height="0dp"
-            android:layout_weight="1"
+            android:background="@drawable/footer_button"
-            android:onClick="@{chatClickListener}"
+            app:layout_constraintTop_toTopOf="@id/guidelineBottom"
-            android:visibility="@{viewModel.showChat ? View.VISIBLE : View.GONE}"
+            app:layout_constraintBottom_toBottomOf="parent"
-            android:background="@drawable/footer_button">
+            android:onClick="@{chatClickListener}">
 
             <ImageView
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_centerInParent="true"
-                android:padding="15dp"
                 android:contentDescription="@string/content_description_menu_chat"
+                android:padding="15dp"
                 android:src="@drawable/footer_chat" />
 
-            <View
-                android:layout_width="5dp"
-                android:layout_height="match_parent"
-                android:layout_alignParentBottom="true"
-                android:background="?attr/accentColor"
-                android:visibility="@{viewModel.chatSelected ? View.VISIBLE : View.GONE, default=gone}" />
-
             <TextView
                 style="@style/unread_count_font"
                 android:layout_width="wrap_content"
@@ -151,6 +146,35 @@
 
         </RelativeLayout>
 
-    </LinearLayout>
+        <androidx.constraintlayout.motion.widget.MotionLayout
+            android:id="@+id/selectorMotion"
+            android:layout_width="5dp"
+            android:layout_height="match_parent"
+            app:layoutDescription="@xml/tabs_land"
+            app:layout_constraintRight_toRightOf="parent">
+
+            <androidx.constraintlayout.widget.Guideline
+                android:id="@+id/gTop"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal"
+                app:layout_constraintGuide_percent="0.25" />
+
+            <androidx.constraintlayout.widget.Guideline
+                android:id="@+id/gMiddle"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal"
+                app:layout_constraintGuide_percent="0.5" />
+
+            <View
+                android:id="@+id/selector"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:background="?attr/accentColor" />
+
+        </androidx.constraintlayout.motion.widget.MotionLayout>
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
 
 </layout>

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

@@ -48,6 +48,7 @@
                         android:layout_height="match_parent"
                         android:layout_above="@id/tabs_fragment"
                         app:defaultNavHost="true"
+                        tools:layout="@layout/dialer_fragment"
                         app:navGraph="@navigation/main_nav_graph" />
 
                     <androidx.fragment.app.FragmentContainerView

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

@@ -20,19 +20,39 @@
             type="org.linphone.activities.main.viewmodels.TabsViewModel" />
     </data>
 
-    <LinearLayout
+    <androidx.constraintlayout.widget.ConstraintLayout
-        android:baselineAligned="false"
+        xmlns:app="http://schemas.android.com/apk/res-auto"
         android:id="@+id/footer"
         android:layout_width="match_parent"
-        android:layout_height="60dp"
+        android:layout_height="60dp">
-        android:orientation="horizontal">
+
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guidelineLeft"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:orientation="vertical"
+            app:layout_constraintGuide_percent="0.25" />
+
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guidelineMiddle"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:orientation="vertical"
+            app:layout_constraintGuide_percent="0.5" />
+
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guidelineRight"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:orientation="vertical"
+            app:layout_constraintGuide_percent="0.75" />
 
         <RelativeLayout
             android:layout_width="0dp"
             android:layout_height="match_parent"
-            android:layout_weight="1"
             android:onClick="@{historyClickListener}"
-            android:visibility="@{viewModel.showHistory ? View.VISIBLE : View.GONE}"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="@id/guidelineLeft"
             android:background="@drawable/footer_button">
 
             <ImageView
@@ -43,13 +63,6 @@
                 android:contentDescription="@string/content_description_menu_history"
                 android:src="@drawable/footer_history" />
 
-            <View
-                android:layout_width="match_parent"
-                android:layout_height="5dp"
-                android:layout_alignParentBottom="true"
-                android:background="?attr/accentColor"
-                android:visibility="@{viewModel.historySelected ? View.VISIBLE : View.GONE, default=gone}" />
-
             <TextView
                 style="@style/unread_count_font"
                 android:layout_width="wrap_content"
@@ -65,9 +78,9 @@
         <RelativeLayout
             android:layout_width="0dp"
             android:layout_height="match_parent"
-            android:layout_weight="1"
             android:onClick="@{contactsClickListener}"
-            android:visibility="@{viewModel.showContacts ? View.VISIBLE : View.GONE}"
+            app:layout_constraintStart_toStartOf="@id/guidelineLeft"
+            app:layout_constraintEnd_toEndOf="@id/guidelineMiddle"
             android:background="@drawable/footer_button">
 
             <ImageView
@@ -78,21 +91,14 @@
                 android:contentDescription="@string/content_description_menu_contacts"
                 android:src="@drawable/footer_contacts" />
 
-            <View
-                android:layout_width="match_parent"
-                android:layout_height="5dp"
-                android:layout_alignParentBottom="true"
-                android:background="?attr/accentColor"
-                android:visibility="@{viewModel.contactsSelected ? View.VISIBLE : View.GONE, default=gone}" />
-
         </RelativeLayout>
 
         <RelativeLayout
             android:layout_width="0dp"
             android:layout_height="match_parent"
-            android:layout_weight="1"
             android:onClick="@{dialerClickListener}"
-            android:visibility="@{viewModel.showDialer ? View.VISIBLE : View.GONE}"
+            app:layout_constraintStart_toStartOf="@id/guidelineMiddle"
+            app:layout_constraintEnd_toEndOf="@id/guidelineRight"
             android:background="@drawable/footer_button">
 
             <ImageView
@@ -103,21 +109,14 @@
                 android:contentDescription="@string/content_description_menu_dialer"
                 android:src="@drawable/footer_dialer" />
 
-            <View
-                android:layout_width="match_parent"
-                android:layout_height="5dp"
-                android:layout_alignParentBottom="true"
-                android:background="?attr/accentColor"
-                android:visibility="@{viewModel.dialerSelected ? View.VISIBLE : View.GONE, default=visible}" />
-
         </RelativeLayout>
 
         <RelativeLayout
             android:layout_width="0dp"
             android:layout_height="match_parent"
-            android:layout_weight="1"
             android:onClick="@{chatClickListener}"
-            android:visibility="@{viewModel.showChat ? View.VISIBLE : View.GONE}"
+            app:layout_constraintStart_toStartOf="@id/guidelineRight"
+            app:layout_constraintEnd_toEndOf="parent"
             android:background="@drawable/footer_button">
 
             <ImageView
@@ -128,13 +127,6 @@
                 android:contentDescription="@string/content_description_menu_chat"
                 android:src="@drawable/footer_chat" />
 
-            <View
-                android:layout_width="match_parent"
-                android:layout_height="5dp"
-                android:layout_alignParentBottom="true"
-                android:background="?attr/accentColor"
-                android:visibility="@{viewModel.chatSelected ? View.VISIBLE : View.GONE, default=gone}" />
-
             <TextView
                 style="@style/unread_count_font"
                 android:layout_width="wrap_content"
@@ -147,6 +139,35 @@
 
         </RelativeLayout>
 
-    </LinearLayout>
+        <androidx.constraintlayout.motion.widget.MotionLayout
+            android:id="@+id/selectorMotion"
+            android:layout_width="match_parent"
+            android:layout_height="5dp"
+            app:layoutDescription="@xml/tabs"
+            app:layout_constraintBottom_toBottomOf="parent">
+
+            <androidx.constraintlayout.widget.Guideline
+                android:id="@+id/gLeft"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:orientation="vertical"
+                app:layout_constraintGuide_percent="0.25" />
+
+            <androidx.constraintlayout.widget.Guideline
+                android:id="@+id/gMiddle"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:orientation="vertical"
+                app:layout_constraintGuide_percent="0.5" />
+
+            <View
+                android:id="@+id/selector"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:background="?attr/accentColor" />
+
+        </androidx.constraintlayout.motion.widget.MotionLayout>
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
 
 </layout>

app/src/main/res/xml/tabs.xml

@@ -0,0 +1,72 @@
+<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:motion="http://schemas.android.com/apk/res-auto">
+
+    <Transition
+        motion:constraintSetStart="@+id/dialer"
+        motion:constraintSetEnd="@+id/chat_rooms"/>
+
+    <Transition
+        motion:constraintSetStart="@+id/call_history"
+        motion:constraintSetEnd="@+id/contacts"/>
+
+    <Transition
+        motion:constraintSetStart="@+id/call_history"
+        motion:constraintSetEnd="@+id/dialer"/>
+
+    <Transition
+        motion:constraintSetStart="@+id/call_history"
+        motion:constraintSetEnd="@+id/chat_rooms"/>
+
+    <Transition
+        motion:constraintSetStart="@+id/contacts"
+        motion:constraintSetEnd="@+id/dialer"/>
+
+    <Transition
+        motion:constraintSetStart="@+id/contacts"
+        motion:constraintSetEnd="@+id/chat_rooms"/>
+
+    <ConstraintSet android:id="@+id/call_history">
+
+        <Constraint
+            android:id="@id/selector"
+            android:layout_height="wrap_content"
+            motion:layout_constraintWidth_percent=".25"
+            motion:layout_constraintBottom_toBottomOf="parent"
+            motion:layout_constraintLeft_toLeftOf="parent" />
+
+    </ConstraintSet>
+
+    <ConstraintSet android:id="@+id/contacts">
+
+        <Constraint
+            android:id="@id/selector"
+            android:layout_height="wrap_content"
+            motion:layout_constraintWidth_percent=".25"
+            motion:layout_constraintBottom_toBottomOf="parent"
+            motion:layout_constraintLeft_toLeftOf="@id/gLeft" />
+
+    </ConstraintSet>
+
+    <ConstraintSet android:id="@+id/dialer">
+
+        <Constraint
+            android:id="@id/selector"
+            android:layout_height="wrap_content"
+            motion:layout_constraintWidth_percent=".25"
+            motion:layout_constraintBottom_toBottomOf="parent"
+            motion:layout_constraintLeft_toLeftOf="@id/gMiddle" />
+
+    </ConstraintSet>
+
+    <ConstraintSet android:id="@+id/chat_rooms">
+
+        <Constraint
+            android:id="@id/selector"
+            android:layout_height="wrap_content"
+            motion:layout_constraintWidth_percent=".25"
+            motion:layout_constraintBottom_toBottomOf="parent"
+            motion:layout_constraintRight_toRightOf="parent" />
+
+    </ConstraintSet>
+
+</MotionScene>

app/src/main/res/xml/tabs_land.xml

@@ -0,0 +1,72 @@
+<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:motion="http://schemas.android.com/apk/res-auto">
+
+    <Transition
+        motion:constraintSetStart="@+id/dialer"
+        motion:constraintSetEnd="@+id/chat_rooms"/>
+
+    <Transition
+        motion:constraintSetStart="@+id/call_history"
+        motion:constraintSetEnd="@+id/contacts"/>
+
+    <Transition
+        motion:constraintSetStart="@+id/call_history"
+        motion:constraintSetEnd="@+id/dialer"/>
+
+    <Transition
+        motion:constraintSetStart="@+id/call_history"
+        motion:constraintSetEnd="@+id/chat_rooms"/>
+
+    <Transition
+        motion:constraintSetStart="@+id/contacts"
+        motion:constraintSetEnd="@+id/dialer"/>
+
+    <Transition
+        motion:constraintSetStart="@+id/contacts"
+        motion:constraintSetEnd="@+id/chat_rooms"/>
+
+    <ConstraintSet android:id="@+id/call_history">
+
+        <Constraint
+            android:id="@id/selector"
+            android:layout_width="wrap_content"
+            motion:layout_constraintHeight_percent=".25"
+            motion:layout_constraintRight_toRightOf="parent"
+            motion:layout_constraintTop_toTopOf="parent" />
+
+    </ConstraintSet>
+
+    <ConstraintSet android:id="@+id/contacts">
+
+        <Constraint
+            android:id="@id/selector"
+            android:layout_width="wrap_content"
+            motion:layout_constraintHeight_percent=".25"
+            motion:layout_constraintRight_toRightOf="parent"
+            motion:layout_constraintTop_toTopOf="@id/gTop" />
+
+    </ConstraintSet>
+
+    <ConstraintSet android:id="@+id/dialer">
+
+        <Constraint
+            android:id="@id/selector"
+            android:layout_width="wrap_content"
+            motion:layout_constraintHeight_percent=".25"
+            motion:layout_constraintRight_toRightOf="parent"
+            motion:layout_constraintTop_toTopOf="@id/gMiddle" />
+
+    </ConstraintSet>
+
+    <ConstraintSet android:id="@+id/chat_rooms">
+
+        <Constraint
+            android:id="@id/selector"
+            android:layout_width="wrap_content"
+            motion:layout_constraintHeight_percent=".25"
+            motion:layout_constraintRight_toRightOf="parent"
+            motion:layout_constraintBottom_toBottomOf="parent" />
+
+    </ConstraintSet>
+
+</MotionScene>