For #13765 - Fix TopSites layout and item sizes (#14278)

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

@@ -3,18 +3,28 @@
    - 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.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
+<!--LinearLayout is used here because we are forced by the view pager
+to keep layout_width="match_parent"-->
+<LinearLayout
+    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/top_sites_list"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:layout_gravity="center_horizontal"
+    android:gravity="center_horizontal">
-    android:layout_marginBottom="8dp"
+
-    android:clipChildren="false"
+    <androidx.recyclerview.widget.RecyclerView
-    android:clipToPadding="false"
+        android:id="@+id/top_sites_list"
-    android:overScrollMode="never"
+        android:layout_width="wrap_content"
-    android:nestedScrollingEnabled="false"
+        android:minWidth="448dp"
-    app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
+        android:layout_height="match_parent"
-    app:spanCount="4"
+        android:layout_gravity="center_horizontal"
-    tools:listitem="@layout/top_site_item" />
+        android:layout_marginBottom="8dp"
+        android:clipChildren="false"
+        android:clipToPadding="false"
+        android:overScrollMode="never"
+        android:nestedScrollingEnabled="false"
+        app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
+        app:spanCount="4"
+        tools:listitem="@layout/top_site_item" />
+</LinearLayout>

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

@@ -5,25 +5,27 @@
 <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/top_site_item"
-    android:layout_width="64dp"
+    android:layout_width="match_parent"
-    android:layout_height="wrap_content"
+    android:layout_height="@dimen/top_sites_item_size"
-    android:padding="8dp"
+    android:layout_marginBottom="@dimen/top_sites_item_margin_top"
     android:orientation="vertical">
 
+
     <ImageView
         android:id="@+id/favicon_image"
-        style="@style/Mozac.Widgets.Favicon"
+        style="@style/TopSite.Favicon"
         android:layout_gravity="center"
         android:importantForAccessibility="no" />
 
     <TextView
         android:id="@+id/top_site_title"
-        android:layout_width="match_parent"
+        android:layout_width="64dp"
         android:layout_height="wrap_content"
         android:gravity="center"
         android:singleLine="true"
+        android:layout_gravity="center_horizontal"
         android:textColor="@color/top_site_title_text"
         android:textSize="10sp"
-        android:layout_marginTop="8dp" />
+        android:layout_marginTop="@dimen/top_sites_text_margin_top" />
 
 </LinearLayout>

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

@@ -169,6 +169,13 @@
     <dimen name="saved_logins_item_margin_start">16dp</dimen>
     <dimen name="saved_logins_item_margin_end">48dp</dimen>
 
+    <!-- Top sites  -->
+    <dimen name="top_sites_favicon_size">40dp</dimen>
+    <dimen name="top_sites_favicon_padding">4dp</dimen>
+    <dimen name="top_sites_item_size">64dp</dimen>
+    <dimen name="top_sites_item_margin_top">12dp</dimen>
+    <dimen name="top_sites_text_margin_top">8dp</dimen>
+
     <!-- a11y -->
     <dimen name="accessibility_min_height">48dp</dimen>
 

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

@@ -622,6 +622,14 @@
         <item name="behavior_halfExpandedRatio">0.4</item>
     </style>
 
+    <style name="TopSite.Favicon" parent="Mozac.Widgets.Favicon">
+        <item name="android:layout_width">@dimen/top_sites_favicon_size</item>
+        <item name="android:layout_height">@dimen/top_sites_favicon_size</item>
+        <item name="android:scaleType">fitCenter</item>
+        <item name="android:padding">@dimen/top_sites_favicon_padding</item>
+        <item name="android:background">@drawable/mozac_widget_favicon_background</item>
+    </style>
+
     <style name="TabTrayFab" parent="Widget.MaterialComponents.ExtendedFloatingActionButton">
         <item name="elevation">90dp</item>
         <item name="android:stateListAnimator">@null</item>