Improve design

Signed-off-by: Joris Bodin <joris.bodin@infomaniak.com>

src/main/java/com/nextcloud/ui/ChooseAccountDialogFragment.kt

@@ -20,6 +20,8 @@
 
 package com.nextcloud.ui
 
+import android.annotation.SuppressLint
+import android.app.Dialog
 import android.graphics.drawable.Drawable
 import android.os.Bundle
 import android.view.LayoutInflater
@@ -28,6 +30,7 @@ import android.view.ViewGroup
 import android.widget.ImageView
 import androidx.core.content.ContextCompat
 import androidx.fragment.app.DialogFragment
+import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import com.nextcloud.client.account.User
 import com.nextcloud.client.account.UserAccountManager
 import com.owncloud.android.R
@@ -37,6 +40,7 @@ import com.owncloud.android.ui.adapter.UserListAdapter
 import com.owncloud.android.ui.adapter.UserListItem
 import com.owncloud.android.utils.DisplayUtils
 import com.owncloud.android.utils.DisplayUtils.AvatarGenerationListener
+import com.owncloud.android.utils.ThemeUtils
 import kotlinx.android.synthetic.main.account_item.*
 import kotlinx.android.synthetic.main.dialog_choose_account.*
 import java.util.ArrayList
@@ -44,6 +48,7 @@ import java.util.ArrayList
 private const val ARG_CURRENT_USER_PARAM = "currentUser"
 
 class ChooseAccountDialogFragment : DialogFragment(), AvatarGenerationListener, UserListAdapter.ClickListener {
+    private lateinit var dialogView: View
     private var currentUser: User? = null
     private lateinit var accountManager: UserAccountManager
 
@@ -54,6 +59,14 @@ class ChooseAccountDialogFragment : DialogFragment(), AvatarGenerationListener,
         }
     }
 
+    @SuppressLint("InflateParams")
+    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
+        dialogView = LayoutInflater.from(requireContext()).inflate(R.layout.dialog_choose_account, null)
+        return MaterialAlertDialogBuilder(requireContext())
+            .setView(dialogView)
+            .create()
+    }
+
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
         accountManager = (activity as BaseActivity).userAccountManager
@@ -75,7 +88,9 @@ class ChooseAccountDialogFragment : DialogFragment(), AvatarGenerationListener,
             account.text = user.accountName
 
             // Defining user right indicator
-            account_menu.setImageDrawable(ContextCompat.getDrawable(requireContext(), R.drawable.ic_check_circle))
+            val icon = ThemeUtils.tintDrawable(ContextCompat.getDrawable(requireContext(), R.drawable.ic_check_circle),
+                ThemeUtils.primaryColor(requireContext(), true))
+            account_menu.setImageDrawable(icon)
 
             // Creating adapter for accounts list
             val adapter = UserListAdapter(activity as BaseActivity,
@@ -126,7 +141,7 @@ class ChooseAccountDialogFragment : DialogFragment(), AvatarGenerationListener,
     }
 
     override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
-        return inflater.inflate(R.layout.dialog_choose_account, container, false)
+        return dialogView
     }
 
     override fun shouldCallGeneratedCallback(tag: String?, callContext: Any?): Boolean {

src/main/res/layout/account_item.xml

@@ -1,5 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
+<?xml version="1.0" encoding="utf-8"?><!--
   Nextcloud Android client application
 
   Copyright (C) 2016 Andy Scherzinger
@@ -20,94 +19,102 @@
   You should have received a copy of the GNU Affero General Public
   License along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
-
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<com.google.android.material.card.MaterialCardView 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"
     android:layout_width="match_parent"
     android:layout_height="@dimen/account_item_layout_height"
-    android:background="?attr/selectableItemBackground"
+    android:layout_margin="@dimen/standard_quarter_margin"
     android:orientation="horizontal"
-    tools:ignore="UnusedAttribute">
+    app:cardBackgroundColor="@color/transparent"
+    app:cardElevation="0dp">
 
-    <FrameLayout
-        android:id="@+id/avatar_container"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_alignParentStart="true"
-        android:layout_centerVertical="true">
+    <RelativeLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:orientation="horizontal"
+        tools:ignore="UnusedAttribute">
 
-        <ImageView
-            android:id="@+id/user_icon"
-            android:layout_width="@dimen/user_icon_size"
-            android:layout_height="@dimen/user_icon_size"
-            android:layout_gravity="top|start"
-            android:layout_marginStart="@dimen/account_item_layout_user_image_left_start_margin"
-            android:layout_marginTop="@dimen/account_item_layout_user_image_margin"
-            android:layout_marginEnd="@dimen/account_item_layout_user_image_margin"
-            android:layout_marginBottom="@dimen/account_item_layout_user_image_margin"
-            android:contentDescription="@string/avatar"
-            android:src="@drawable/folder" />
+        <FrameLayout
+            android:id="@+id/avatar_container"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_alignParentStart="true"
+            android:layout_centerVertical="true">
 
-        <ImageView
-            android:id="@+id/ticker"
-            android:layout_width="18dp"
-            android:layout_height="18dp"
-            android:layout_gravity="bottom|end"
-            android:background="@drawable/round_bgnd"
-            android:contentDescription="@string/active_user"
-            android:src="@drawable/account_circle_white" />
-    </FrameLayout>
+            <ImageView
+                android:id="@+id/user_icon"
+                android:layout_width="@dimen/user_icon_size"
+                android:layout_height="@dimen/user_icon_size"
+                android:layout_gravity="top|start"
+                android:layout_marginStart="@dimen/account_item_layout_user_image_left_start_margin"
+                android:layout_marginTop="@dimen/account_item_layout_user_image_margin"
+                android:layout_marginEnd="@dimen/account_item_layout_user_image_margin"
+                android:layout_marginBottom="@dimen/account_item_layout_user_image_margin"
+                android:contentDescription="@string/avatar"
+                android:src="@drawable/folder" />
 
+            <ImageView
+                android:id="@+id/ticker"
+                android:layout_width="18dp"
+                android:layout_height="18dp"
+                android:layout_gravity="bottom|end"
+                android:background="@drawable/round_bgnd"
+                android:contentDescription="@string/active_user"
+                android:src="@drawable/account_circle_white" />
+        </FrameLayout>
 
-    <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_centerInParent="true"
-        android:layout_marginEnd="25dp"
-        android:layout_toEndOf="@id/avatar_container"
-        android:orientation="vertical"
-        android:paddingStart="3dp"
-        android:paddingEnd="@dimen/zero">
 
-        <TextView
-            android:id="@+id/user_name"
+        <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/standard_half_margin"
-            android:layout_marginTop="@dimen/standard_quarter_margin"
-            android:layout_marginEnd="@dimen/standard_double_margin"
-            android:ellipsize="end"
-            android:gravity="bottom"
-            android:maxLines="1"
-            android:text="@string/placeholder_filename"
-            android:textAppearance="?android:attr/textAppearanceListItem" />
+            android:layout_centerInParent="true"
+            android:layout_marginEnd="25dp"
+            android:layout_toEndOf="@id/avatar_container"
+            android:orientation="vertical"
+            android:paddingStart="3dp"
+            android:paddingEnd="@dimen/zero">
 
-        <TextView
-            android:id="@+id/account"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/standard_half_margin"
-            android:layout_marginEnd="@dimen/standard_double_margin"
-            android:layout_marginBottom="@dimen/standard_quarter_margin"
-            android:ellipsize="end"
-            android:gravity="top"
-            android:maxLines="1"
-            android:text="@string/placeholder_sentence"
-            android:textColor="?android:attr/textColorSecondary" />
+            <TextView
+                android:id="@+id/user_name"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="@dimen/standard_half_margin"
+                android:layout_marginTop="@dimen/standard_quarter_margin"
+                android:layout_marginEnd="@dimen/standard_double_margin"
+                android:ellipsize="end"
+                android:gravity="bottom"
+                android:maxLines="1"
+                android:text="@string/placeholder_filename"
+                android:textAppearance="?android:attr/textAppearanceListItem" />
 
-    </LinearLayout>
+            <TextView
+                android:id="@+id/account"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="@dimen/standard_half_margin"
+                android:layout_marginEnd="@dimen/standard_double_margin"
+                android:layout_marginBottom="@dimen/standard_quarter_margin"
+                android:ellipsize="end"
+                android:gravity="top"
+                android:maxLines="1"
+                android:text="@string/placeholder_sentence"
+                android:textColor="?android:attr/textColorSecondary" />
 
-    <ImageView
-        android:id="@+id/account_menu"
-        android:layout_width="wrap_content"
-        android:layout_height="match_parent"
-        android:layout_alignParentEnd="true"
-        android:layout_centerVertical="true"
-        android:clickable="true"
-        android:contentDescription="@string/overflow_menu"
-        android:focusable="true"
-        android:paddingStart="@dimen/standard_half_padding"
-        android:paddingEnd="@dimen/alternate_padding"
-        android:src="@drawable/ic_dots_vertical" />
+        </LinearLayout>
+
+        <ImageView
+            android:id="@+id/account_menu"
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            android:layout_alignParentEnd="true"
+            android:layout_centerVertical="true"
+            android:clickable="true"
+            android:contentDescription="@string/overflow_menu"
+            android:focusable="true"
+            android:paddingStart="@dimen/standard_half_padding"
+            android:paddingEnd="@dimen/alternate_padding"
+            android:src="@drawable/ic_dots_vertical" />
 
-</RelativeLayout>
+    </RelativeLayout>
+</com.google.android.material.card.MaterialCardView>

src/main/res/layout/dialog_choose_account.xml

@@ -15,30 +15,34 @@
   You should have received a copy of the GNU General Public License
   along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
-
 <androidx.constraintlayout.widget.ConstraintLayout 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"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:background="@color/bg_default"
     android:orientation="vertical"
-    android:padding="5dp"
     tools:context="com.nextcloud.ui.ChooseAccountDialogFragment">
 
     <include
         android:id="@+id/current_account"
         layout="@layout/account_item"
-        app:layout_constraintBottom_toTopOf="@id/separator_line"
-        app:layout_constraintStart_toStartOf="parent" />
+        android:layout_width="0dp"
+        android:layout_height="@dimen/account_item_layout_height"
+        android:layout_margin="@dimen/standard_quarter_margin"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
 
     <View
         android:id="@+id/separator_line"
         android:layout_width="0dp"
         android:layout_height="1dp"
-        android:background="@color/account_separator"
-        app:layout_constraintBottom_toBottomOf="@+id/current_account"
+        android:layout_marginTop="@dimen/standard_quarter_margin"
+        android:background="@color/list_divider_background"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent" />
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/current_account" />
 
     <androidx.recyclerview.widget.RecyclerView
         android:id="@+id/accounts_list"
@@ -57,8 +61,8 @@
         style="@style/Widget.MaterialComponents.Button.TextButton.Icon"
         android:layout_width="0dp"
         android:layout_height="@dimen/account_action_button_height"
-        android:layout_marginStart="@dimen/standard_half_margin"
-        android:layout_marginEnd="@dimen/standard_half_margin"
+        android:layout_marginStart="@dimen/account_action_button_margin"
+        android:layout_marginEnd="@dimen/account_action_button_margin"
         android:paddingStart="10dp"
         android:paddingEnd="0dp"
         android:text="@string/prefs_add_account"
@@ -78,8 +82,9 @@
         style="@style/Widget.MaterialComponents.Button.TextButton.Icon"
         android:layout_width="0dp"
         android:layout_height="@dimen/account_action_button_height"
-        android:layout_marginStart="@dimen/standard_half_margin"
-        android:layout_marginEnd="@dimen/standard_half_margin"
+        android:layout_marginStart="@dimen/account_action_button_margin"
+        android:layout_marginEnd="@dimen/account_action_button_margin"
+        android:layout_marginBottom="@dimen/account_action_button_margin"
         android:paddingStart="12dp"
         android:paddingEnd="0dp"
         android:text="@string/prefs_manage_accounts"

src/main/res/values/dims.xml

@@ -143,6 +143,7 @@
     <dimen name="button_corner_radius">24dp</dimen>
     <integer name="media_grid_width">4</integer>
     <dimen name="copy_internal_link_padding">10dp</dimen>
+    <dimen name="account_action_button_margin">12dp</dimen>
     <dimen name="account_action_button_height">50dp</dimen>
     <dimen name="account_action_button_vertical_margin">10dp</dimen>
 </resources>