[android] Various UX fixups / Improvements (#2870)

- Swap import / export icons on InstallablesFragment and GamePropertiesFragment
- Redesign AddonFragment
- Fix up colors for multiplayer bottom sheets
- Fix up padding in multiplayer lobby browser

Reviewed-on: https://git.eden-emu.dev/eden-emu/eden/pulls/2870
Reviewed-by: Lizzie <lizzie@eden-emu.dev>
Reviewed-by: crueter <crueter@eden-emu.dev>
Reviewed-by: MaranBr <maranbr@eden-emu.dev>
Co-authored-by: kleidis <kleidis1@protonmail.com>
Co-committed-by: kleidis <kleidis1@protonmail.com>

src/android/app/src/main/java/org/yuzu/yuzu_emu/adapters/AddonAdapter.kt

@@ -1,3 +1,6 @@
+// SPDX-FileCopyrightText: Copyright 2025 Eden Emulator Project
+// SPDX-License-Identifier: GPL-3.0-or-later
+
 // SPDX-FileCopyrightText: 2023 yuzu Emulator Project
 // SPDX-License-Identifier: GPL-2.0-or-later
 
@@ -20,18 +23,22 @@ class AddonAdapter(val addonViewModel: AddonViewModel) :
     inner class AddonViewHolder(val binding: ListItemAddonBinding) :
         AbstractViewHolder<Patch>(binding) {
         override fun bind(model: Patch) {
-            binding.root.setOnClickListener {
-                binding.addonCheckbox.isChecked = !binding.addonCheckbox.isChecked
+            binding.addonCard.setOnClickListener {
+                binding.addonSwitch.performClick()
             }
             binding.title.text = model.name
             binding.version.text = model.version
-            binding.addonCheckbox.setOnCheckedChangeListener { _, checked ->
+            binding.addonSwitch.isChecked = model.enabled
+
+            binding.addonSwitch.setOnCheckedChangeListener { _, checked ->
                 model.enabled = checked
             }
-            binding.addonCheckbox.isChecked = model.enabled
-            binding.buttonDelete.setOnClickListener {
+
+            val deleteAction = {
                 addonViewModel.setAddonToDelete(model)
             }
+            binding.deleteCard.setOnClickListener { deleteAction() }
+            binding.buttonDelete.setOnClickListener { deleteAction() }
         }
     }
 }

src/android/app/src/main/res/layout/dialog_chat.xml

@@ -4,7 +4,8 @@
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:padding="16dp">
+    android:padding="16dp"
+    android:background="?attr/colorSurface">
 
     <TextView
         android:id="@+id/text_title"
@@ -13,7 +14,8 @@
         android:text="@string/chat"
         android:textAppearance="?attr/textAppearanceHeadline6"
         android:gravity="center"
-        android:layout_marginBottom="16dp" />
+        android:layout_marginBottom="16dp"
+        android:textColor="?attr/colorOnSurface" />
 
     <androidx.recyclerview.widget.RecyclerView
         android:id="@+id/chat_recycler_view"
@@ -39,7 +41,9 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:inputType="text"
-                android:imeOptions="actionSend" />
+                android:imeOptions="actionSend"
+                android:textColor="?attr/colorOnSurface"
+                android:textColorHint="?attr/colorOnSurfaceVariant" />
 
         </com.google.android.material.textfield.TextInputLayout>
 
@@ -50,6 +54,7 @@
             android:layout_gravity="bottom"
             android:background="?attr/selectableItemBackgroundBorderless"
             android:src="@drawable/ic_send"
-            android:contentDescription="@string/send_message" />
+            android:contentDescription="@string/send_message"
+            app:tint="?attr/colorPrimary" />
     </LinearLayout>
 </LinearLayout>

src/android/app/src/main/res/layout/dialog_lobby_browser.xml

@@ -3,13 +3,14 @@
     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:layout_height="match_parent"
+    android:background="?attr/colorSurface">
 
     <com.google.android.material.appbar.AppBarLayout
         android:id="@+id/appbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@android:color/transparent"
+        android:background="?attr/colorSurface"
         android:elevation="0dp">
 
         <LinearLayout
@@ -37,7 +38,8 @@
                     android:layout_weight="1"
                     android:gravity="center"
                     android:text="@string/multiplayer_room_browser"
-                    android:textAppearance="@style/TextAppearance.Material3.TitleLarge" />
+                    android:textAppearance="@style/TextAppearance.Material3.TitleLarge"
+                    android:textColor="?attr/colorOnSurface" />
 
                 <FrameLayout
                     android:layout_width="48dp"
@@ -75,7 +77,8 @@
                     android:layout_marginStart="16dp"
                     android:layout_marginEnd="16dp"
                     android:layout_marginTop="12dp"
-                    app:cardCornerRadius="24dp">
+                    app:cardCornerRadius="24dp"
+                    app:cardBackgroundColor="?attr/colorSurfaceVariant">
 
                     <LinearLayout
                         android:id="@+id/search_container"
@@ -91,6 +94,7 @@
                             android:layout_gravity="center_vertical"
                             android:layout_marginEnd="16dp"
                             android:src="@drawable/ic_search"
+                            android:contentDescription="@string/home_search"
                             app:tint="?attr/colorOnSurfaceVariant" />
 
                         <EditText
@@ -101,7 +105,9 @@
                             android:hint="@string/multiplayer_search_public_lobbies"
                             android:imeOptions="flagNoFullscreen"
                             android:inputType="text"
-                            android:maxLines="1" />
+                            android:maxLines="1"
+                            android:textColor="?attr/colorOnSurface"
+                            android:autofillHints="" />
 
                     </LinearLayout>
 
@@ -113,6 +119,7 @@
                         android:layout_marginEnd="48dp"
                         android:background="?attr/selectableItemBackground"
                         android:src="@drawable/ic_clear"
+                        android:contentDescription="@string/clear"
                         android:visibility="invisible"
                         app:tint="?attr/colorOnSurfaceVariant"
                         tools:visibility="visible" />
@@ -154,19 +161,33 @@
                         android:id="@+id/chip_hide_empty"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
+                        android:layout_marginEnd="8dp"
                         android:checkable="true"
                         android:checked="false"
                         android:text="@string/multiplayer_hide_empty_rooms"
-                        app:chipCornerRadius="16dp" />
+                        app:chipCornerRadius="16dp"
+                        app:chipIconTint="?attr/colorOnSurface"
+                        app:chipIconSize="18dp"
+                        android:paddingStart="8dp"
+                        android:paddingEnd="8dp"
+                        android:paddingTop="6dp"
+                        android:paddingBottom="6dp" />
 
                     <com.google.android.material.chip.Chip
                         android:id="@+id/chip_hide_full"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
+                        android:layout_marginStart="8dp"
                         android:checkable="true"
                         android:checked="false"
                         android:text="@string/multiplayer_hide_full_rooms"
-                        app:chipCornerRadius="16dp" />
+                        app:chipCornerRadius="16dp"
+                        app:chipIconTint="?attr/colorOnSurface"
+                        app:chipIconSize="18dp"
+                        android:paddingStart="8dp"
+                        android:paddingEnd="8dp"
+                        android:paddingTop="6dp"
+                        android:paddingBottom="6dp" />
 
                 </LinearLayout>
             </HorizontalScrollView>
@@ -198,6 +219,7 @@
             android:layout_height="72dp"
             android:layout_marginBottom="16dp"
             android:src="@drawable/ic_refresh"
+            android:contentDescription="@string/refresh"
             android:alpha="0.5"
             app:tint="?attr/colorOnSurface" />
 
@@ -205,14 +227,16 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="@string/multiplayer_no_rooms_found"
-            android:textAppearance="@style/TextAppearance.Material3.TitleMedium" />
+            android:textAppearance="@style/TextAppearance.Material3.TitleMedium"
+            android:textColor="?attr/colorOnSurface" />
 
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginTop="8dp"
             android:text="@string/multiplayer_tap_refresh_to_check_again"
-            android:textAppearance="@style/TextAppearance.Material3.BodyMedium" />
+            android:textAppearance="@style/TextAppearance.Material3.BodyMedium"
+            android:textColor="?attr/colorOnSurface" />
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/empty_refresh_button"
@@ -220,7 +244,8 @@
             android:layout_height="wrap_content"
             android:layout_marginTop="16dp"
             android:text="@string/refresh"
-            app:icon="@drawable/ic_refresh" />
+            app:icon="@drawable/ic_refresh"
+            style="@style/Widget.Material3.Button.ElevatedButton" />
     </LinearLayout>
 
 </androidx.coordinatorlayout.widget.CoordinatorLayout>

src/android/app/src/main/res/layout/dialog_multiplayer_connect.xml

@@ -3,7 +3,8 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:orientation="vertical"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content">
+    android:layout_height="wrap_content"
+    android:background="@drawable/theme_dialog_background">
 
     <com.google.android.material.bottomsheet.BottomSheetDragHandleView
         android:id="@+id/drag_handle"
@@ -33,6 +34,7 @@
             android:layout_marginTop="16dp"
             android:layout_marginBottom="24dp"
             android:src="@drawable/ic_network"
+            android:contentDescription="@string/multiplayer"
             app:tint="?attr/colorPrimary" />
 
         <LinearLayout
@@ -47,13 +49,18 @@
 
             <com.google.android.material.button.MaterialButton
                 android:id="@+id/btn_lobby_browser"
-                style="@style/Widget.Material3.Button.ElevatedButton"
+                style="@style/Widget.Material3.Button.TonalButton"
                 android:layout_width="175dp"
                 android:layout_height="wrap_content"
                 android:layout_weight="1"
+                android:minHeight="56dp"
+                android:paddingTop="12dp"
+                android:paddingBottom="12dp"
+                android:layout_marginBottom="16dp"
                 android:text="@string/multiplayer_public_room"
                 app:cornerRadius="16dp"
-                app:icon="@drawable/ic_search" />
+                app:icon="@drawable/ic_search"
+                app:iconPadding="12dp" />
 
             <Space
                 android:layout_width="20dp"
@@ -74,12 +81,16 @@
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_weight="1"
+                android:minHeight="56dp"
+                android:paddingTop="12dp"
+                android:paddingBottom="12dp"
                 android:text="@string/multiplayer_join_room"
                 app:cornerRadius="16dp"
-                app:icon="@drawable/ic_install" />
+                app:icon="@drawable/ic_install"
+                app:iconPadding="12dp" />
 
             <Space
-                android:layout_width="16dp"
+                android:layout_width="24dp"
                 android:layout_height="match_parent" />
 
             <com.google.android.material.button.MaterialButton
@@ -88,9 +99,13 @@
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_weight="1"
+                android:minHeight="56dp"
+                android:paddingTop="12dp"
+                android:paddingBottom="12dp"
                 android:text="@string/multiplayer_create_room"
                 app:cornerRadius="16dp"
-                app:icon="@drawable/ic_add" />
+                app:icon="@drawable/ic_add"
+                app:iconPadding="12dp" />
 
         </LinearLayout>
 

src/android/app/src/main/res/layout/dialog_multiplayer_lobby.xml

@@ -1,7 +1,8 @@
 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="match_parent"
+    android:background="@drawable/theme_dialog_background">
 
     <LinearLayout
         android:orientation="vertical"

src/android/app/src/main/res/layout/dialog_multiplayer_room.xml

@@ -1,6 +1,7 @@
 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="match_parent"
+    android:background="@drawable/theme_dialog_background">
 
     <LinearLayout
         android:orientation="vertical"
@@ -149,6 +150,7 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="@android:string/ok"
-            android:layout_gravity="center" />
+            android:layout_gravity="center"
+            style="@style/Widget.Material3.Button.ElevatedButton" />
     </LinearLayout>
 </ScrollView>

src/android/app/src/main/res/layout/item_lobby_room.xml

@@ -8,7 +8,7 @@
     android:layout_marginBottom="24dp"
     android:layout_marginHorizontal="12dp"
     android:background="?attr/selectableItemBackground"
-    android:backgroundTint="?attr/colorSurfaceVariant"
+    app:cardBackgroundColor="?attr/colorSurfaceVariant"
     android:clickable="true"
     android:focusable="true">
 
@@ -46,6 +46,7 @@
                 android:textAlignment="viewStart"
                 android:textSize="16sp"
                 android:textStyle="bold"
+                android:textColor="?attr/colorOnSurface"
                 tools:text="Room Name" />
 
             <com.google.android.material.textview.MaterialTextView
@@ -56,6 +57,7 @@
                 android:layout_marginTop="5dp"
                 android:textAlignment="viewStart"
                 android:textSize="14sp"
+                android:textColor="?attr/colorOnSurfaceVariant"
                 tools:text="Hosted by: Owner" />
 
             <LinearLayout
@@ -70,7 +72,8 @@
                     android:layout_height="16dp"
                     android:layout_gravity="center_vertical"
                     android:contentDescription="@string/multiplayer_game"
-                    android:src="@drawable/ic_controller" />
+                    android:src="@drawable/ic_controller"
+                    app:tint="?attr/colorOnSurfaceVariant" />
 
                 <com.google.android.material.textview.MaterialTextView
                     android:id="@+id/game_name"
@@ -81,6 +84,7 @@
                     android:ellipsize="end"
                     android:singleLine="true"
                     android:textStyle="bold"
+                    android:textColor="?attr/colorOnSurface"
                     tools:text="Game Name" />
             </LinearLayout>
         </LinearLayout>
@@ -98,7 +102,7 @@
                 android:layout_height="16dp"
                 android:src="@drawable/ic_user"
                 android:contentDescription="@string/multiplayer_player_count"
-                app:tint="?attr/colorAccent" />
+                app:tint="?attr/colorPrimary" />
 
             <com.google.android.material.textview.MaterialTextView
                 android:id="@+id/player_count"
@@ -106,7 +110,7 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginStart="4dp"
-                android:textColor="?attr/colorAccent"
+                android:textColor="?attr/colorPrimary"
                 tools:text="2/4" />
         </LinearLayout>
     </androidx.constraintlayout.widget.ConstraintLayout>

src/android/app/src/main/res/layout/list_item_addon.xml

@@ -2,68 +2,109 @@
 <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:id="@+id/addon_container"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="?attr/selectableItemBackground"
-    android:focusable="false"
-    android:paddingHorizontal="20dp"
-    android:paddingVertical="16dp">
+    android:padding="8dp">
 
-    <LinearLayout
-        android:id="@+id/text_container"
+    <com.google.android.material.card.MaterialCardView
+        android:id="@+id/addon_card"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:orientation="vertical"
         android:layout_marginEnd="16dp"
-        app:layout_constraintEnd_toStartOf="@+id/addon_checkbox"
+        app:cardCornerRadius="12dp"
+        app:cardElevation="2dp"
+        android:clickable="true"
+        android:focusable="true"
+        android:foreground="?attr/selectableItemBackground"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent">
+        app:layout_constraintEnd_toStartOf="@+id/delete_card"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent">
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:paddingStart="16dp"
+            android:paddingEnd="12dp"
+            android:paddingTop="12dp"
+            android:paddingBottom="12dp">
 
             <com.google.android.material.textview.MaterialTextView
                 android:id="@+id/title"
-            style="@style/TextAppearance.Material3.HeadlineMedium"
-            android:layout_width="wrap_content"
+                style="@style/TextAppearance.Material3.HeadlineSmall"
+                android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:textAlignment="viewStart"
-            android:textSize="17sp"
-            app:lineHeight="28dp"
-            tools:text="1440p Resolution" />
+                android:textSize="16sp"
+                android:ellipsize="end"
+                android:maxLines="1"
+                app:lineHeight="20dp"
+                tools:text="1440p Resolution"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintEnd_toStartOf="@+id/addon_switch"
+                android:layout_marginEnd="8dp" />
 
             <com.google.android.material.textview.MaterialTextView
                 android:id="@+id/version"
                 style="@style/TextAppearance.Material3.BodySmall"
-            android:layout_width="wrap_content"
+                android:layout_width="0dp"
                 android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/spacing_small"
+                android:layout_marginTop="6dp"
                 android:textAlignment="viewStart"
-            tools:text="1.0.0" />
-
-    </LinearLayout>
+                android:ellipsize="end"
+                android:maxLines="1"
+                tools:text="1.0.0"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/title"
+                app:layout_constraintEnd_toStartOf="@+id/addon_switch" />
 
-    <com.google.android.material.checkbox.MaterialCheckBox
-        android:id="@+id/addon_checkbox"
+            <com.google.android.material.materialswitch.MaterialSwitch
+                android:id="@+id/addon_switch"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:focusable="true"
-        android:gravity="center"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:layout_constraintBottom_toBottomOf="parent"
+                android:layout_marginEnd="4dp" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+
+    </com.google.android.material.card.MaterialCardView>
+
+    <com.google.android.material.card.MaterialCardView
+        android:id="@+id/delete_card"
+        android:layout_width="48dp"
+        android:layout_height="0dp"
         android:layout_marginEnd="8dp"
-        app:layout_constraintTop_toTopOf="@+id/text_container"
-        app:layout_constraintBottom_toBottomOf="@+id/text_container"
-        app:layout_constraintEnd_toStartOf="@+id/button_delete" />
+        app:cardCornerRadius="10dp"
+        app:cardElevation="2dp"
+        android:clickable="true"
+        android:focusable="true"
+        android:foreground="?attr/selectableItemBackgroundBorderless"
+        app:layout_constraintStart_toEndOf="@id/addon_card"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent">
+
+        <FrameLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:foregroundGravity="center">
 
-    <Button
+            <ImageButton
                 android:id="@+id/button_delete"
-        style="@style/Widget.Material3.Button.IconButton"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_gravity="center_vertical"
-        android:contentDescription="@string/delete"
-        android:tooltipText="@string/delete"
-        app:icon="@drawable/ic_delete"
-        app:iconTint="?attr/colorControlNormal"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toTopOf="@+id/addon_checkbox"
-        app:layout_constraintBottom_toBottomOf="@+id/addon_checkbox" />
+                android:layout_width="24dp"
+                android:layout_height="24dp"
+                android:layout_gravity="center"
+                android:background="@null"
+                android:src="@drawable/ic_delete"
+                app:tint="@color/eden_border_gradient_end"
+                android:contentDescription="@string/delete" />
+
+        </FrameLayout>
+
+    </com.google.android.material.card.MaterialCardView>
 
 </androidx.constraintlayout.widget.ConstraintLayout>

src/android/app/src/main/res/values/strings.xml

@@ -200,6 +200,7 @@
     <string name="multiplayer_chat">Chat</string>
     <string name="multiplayer_more_options">More Options</string>
     <string name="chat">Chat</string>
+    <string name="clear">Clear</string>
     <string name="type_message">Type message…</string>
     <string name="send_message">Send Message</string>
     <string name="multiplayer_moderation">Moderation</string>