For #12007: Follow ux mock on Settings --> Search screen (#12177)

Co-authored-by: Hakkı Kaan Çalışkan <caliskanhkaan@gmail.com>

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

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<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="wrap_content"
+    android:background="?android:selectableItemBackground"
+    android:clickable="true"
+    android:focusable="true"
+    android:gravity="center_vertical"
+    android:layout_marginStart="@dimen/custom_checkbox_alignment_margin">
+
+    <LinearLayout
+        android:id="@android:id/widget_frame"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:gravity="center"
+        android:orientation="vertical"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <TextView
+        android:id="@android:id/title"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/radio_button_padding_vertical"
+        android:textColor="@color/state_list_text_color"
+        android:textSize="16sp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toEndOf="@android:id/widget_frame"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:text="Delete browsing data category" />
+</androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -13,12 +13,12 @@
     android:focusable="true">
     <RadioButton
         android:id="@+id/radio_button"
-        android:layout_width="@dimen/search_engine_radio_button_height"
+        android:layout_width="wrap_content"
-        android:layout_height="@dimen/search_engine_radio_button_height"
+        android:layout_height="wrap_content"
         android:importantForAccessibility="no"
         android:textAlignment="textStart"
         android:textAppearance="?android:attr/textAppearanceListItem"
-        android:layout_marginStart="@dimen/radio_button_padding_horizontal"
+        android:layout_marginStart="@dimen/search_bar_search_engine_icon_padding"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
     <TextView
@@ -26,6 +26,7 @@
         android:textColor="?primaryText"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/search_bar_search_icon_margin"
         android:layout_marginEnd="@dimen/radio_button_padding_horizontal"
         android:text="@string/search_add_custom_engine_label_other"
         app:layout_constraintStart_toEndOf="@id/radio_button"

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

@@ -7,7 +7,7 @@
     style="?android:attr/listViewStyle"
     android:layout_marginTop="16dp"
     android:textAlignment="viewStart"
-    android:layout_marginStart="16dp"
+    android:layout_marginStart="72dp"
     android:gravity="start|center_vertical"
     app:fontFamily="@font/metropolis_semibold"
     android:id="@android:id/title" />

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

@@ -17,7 +17,7 @@
         android:layout_height="wrap_content"
         android:importantForAccessibility="no"
         android:textAlignment="textStart"
-        android:layout_marginStart="20dp"
+        android:layout_marginStart="@dimen/radio_button_preference_horizontal"
         app:srcCompat="@drawable/ic_new"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
@@ -27,9 +27,10 @@
         android:textColor="?primaryText"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_marginStart="18dp"
+        android:layout_marginStart="@dimen/radio_button_drawable_padding"
         android:layout_marginEnd="@dimen/radio_button_padding_horizontal"
         android:text="@string/search_engine_add_custom_search_engine_title"
+        android:textSize="16sp"
         app:layout_constraintStart_toEndOf="@id/add_icon"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintTop_toTopOf="parent"

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

@@ -13,20 +13,20 @@
     android:focusable="true">
     <RadioButton
         android:id="@+id/radio_button"
-        android:layout_width="@dimen/search_engine_radio_button_height"
+        android:layout_width="wrap_content"
-        android:layout_height="@dimen/search_engine_radio_button_height"
+        android:layout_height="wrap_content"
         android:importantForAccessibility="no"
-        android:textAlignment="textStart"
         android:textAppearance="?android:attr/textAppearanceListItem"
-        android:layout_marginStart="@dimen/radio_button_padding_horizontal"
+        android:layout_marginStart="@dimen/search_bar_search_engine_icon_padding"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintBottom_toBottomOf="parent"/>
     <ImageView
         android:id="@+id/engine_icon"
         android:importantForAccessibility="no"
-        android:layout_width="24dp"
+        android:layout_width="@dimen/search_engine_engine_icon_height"
-        android:layout_height="24dp"
+        android:layout_height="@dimen/search_engine_engine_icon_height"
+        android:layout_marginStart="@dimen/search_bar_search_icon_margin"
         app:layout_constraintStart_toEndOf="@id/radio_button"
         app:layout_constraintTop_toTopOf="@id/radio_button"
         app:layout_constraintBottom_toBottomOf="@id/radio_button" />
@@ -38,6 +38,7 @@
         android:layout_marginStart="@dimen/radio_button_padding_horizontal"
         android:layout_marginEnd="@dimen/radio_button_padding_horizontal"
         android:textAlignment="viewStart"
+        android:textSize="16sp"
         app:layout_constraintStart_toEndOf="@id/engine_icon"
         app:layout_constraintTop_toTopOf="@id/engine_icon"
         app:layout_constraintEnd_toEndOf="parent" />

app/src/main/res/values/dimens.xml

@@ -20,7 +20,9 @@
     <dimen name="tab_corner_radius">8dp</dimen>
     <dimen name="preference_icon_drawable_size">24dp</dimen>
     <dimen name="search_bar_search_engine_icon_padding">12dp</dimen>
+    <dimen name="search_bar_search_icon_margin">28dp</dimen>
     <dimen name="search_engine_radio_button_height">48dp</dimen>
+    <dimen name="search_engine_engine_icon_height">24dp</dimen>
     <dimen name="radio_button_drawable_padding">32dp</dimen>
     <dimen name="radio_button_padding_horizontal">16dp</dimen>
     <dimen name="radio_button_padding_vertical">12dp</dimen>
@@ -35,6 +37,7 @@
     <dimen name="component_collection_creation_list_margin">16dp</dimen>
     <dimen name="exceptions_description_margin">12dp</dimen>
     <dimen name="preference_seek_bar_padding">24dp</dimen>
+    <dimen name="custom_checkbox_alignment_margin">68dp</dimen>
 
     <dimen name="context_menu_height">48dp</dimen>
     <dimen name="context_menu_x_offset">8dp</dimen>

app/src/main/res/xml/search_preferences.xml

@@ -2,7 +2,6 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-
 <PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto">
     <PreferenceCategory
@@ -28,42 +27,33 @@
         <SwitchPreference
             android:defaultValue="true"
             android:key="@string/pref_key_show_search_shortcuts"
-            android:title="@string/preferences_show_search_shortcuts"
+            android:title="@string/preferences_show_search_shortcuts" />
-            app:iconSpaceReserved="false"/>
         <SwitchPreference
             android:defaultValue="true"
             android:key="@string/pref_key_show_clipboard_suggestions"
-            android:title="@string/preferences_show_clipboard_suggestions"
+            android:title="@string/preferences_show_clipboard_suggestions" />
-            app:iconSpaceReserved="false" />
         <SwitchPreference
             android:defaultValue="true"
             android:key="@string/pref_key_search_browsing_history"
-            android:title='@string/preferences_search_browsing_history'
+            android:title='@string/preferences_search_browsing_history' />
-            app:iconSpaceReserved="false" />
         <SwitchPreference
             android:defaultValue="true"
             android:key="@string/pref_key_search_bookmarks"
-            android:title='@string/preferences_search_bookmarks'
+            android:title='@string/preferences_search_bookmarks' />
-            app:iconSpaceReserved="false" />
         <SwitchPreference
             android:defaultValue="true"
             android:key="@string/pref_key_show_voice_search"
-            android:title="@string/preferences_show_voice_search"
+            android:title="@string/preferences_show_voice_search" />
-            app:iconSpaceReserved="false"
-            app:allowDividerAbove="false"/>
         <SwitchPreference
             android:defaultValue="true"
             android:key="@string/pref_key_show_search_suggestions"
-            android:title="@string/preferences_show_search_suggestions"
+            android:title="@string/preferences_show_search_suggestions" />
-            app:iconSpaceReserved="false"
-            app:allowDividerAbove="false"/>
         <CheckBoxPreference
             android:defaultValue="false"
             android:dependency="@string/pref_key_show_search_suggestions"
             android:key="@string/pref_key_show_search_suggestions_in_private"
             android:title="@string/preferences_show_search_suggestions_in_private"
-            android:layout="@layout/checkbox_left_preference"
+            android:layout="@layout/checkbox_left_sub_preference"
-            app:allowDividerAbove="false"
+            app:iconSpaceReserved="false" />
-            app:iconSpaceReserved="true" />
     </PreferenceCategory>
 </PreferenceScreen>