[fenix] For https://github.com/mozilla-mobile/fenix/issues/10329 - Implement tab tray divider

app/src/main/java/org/mozilla/fenix/HomeActivity.kt

@@ -15,6 +15,7 @@ import androidx.annotation.IdRes
 import androidx.annotation.VisibleForTesting
 import androidx.annotation.VisibleForTesting.PROTECTED
 import androidx.appcompat.app.ActionBar
+import androidx.appcompat.content.res.AppCompatResources
 import androidx.appcompat.widget.Toolbar
 import androidx.core.view.doOnPreDraw
 import androidx.lifecycle.lifecycleScope
@@ -23,6 +24,7 @@ import androidx.navigation.NavDirections
 import androidx.navigation.fragment.NavHostFragment
 import androidx.navigation.ui.AppBarConfiguration
 import androidx.navigation.ui.NavigationUI
+import androidx.recyclerview.widget.DividerItemDecoration
 import androidx.recyclerview.widget.LinearLayoutManager
 import kotlinx.android.synthetic.main.activity_home.*
 import kotlinx.coroutines.CoroutineScope
@@ -221,6 +223,16 @@ open class HomeActivity : LocaleAwareAppCompatActivity() {
         TabsTray::class.java.name -> {
             val layout = LinearLayoutManager(context)
             val adapter = TabsAdapter { parentView, tabsTray ->
+                val decoration = DividerItemDecoration(
+                    context,
+                    DividerItemDecoration.VERTICAL
+                )
+                val drawable = AppCompatResources.getDrawable(context, R.drawable.tab_tray_divider)
+                drawable?.let {
+                    decoration.setDrawable(it)
+                    tabsTray.addItemDecoration(decoration)
+                }
+
                 DefaultTabViewHolder(
                     LayoutInflater.from(parentView.context).inflate(
                         R.layout.tab_tray_item,

app/src/main/res/drawable/tab_tray_divider.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Do this along with adding your values and values-ldrtl dimensions. -->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+    android:insetLeft="@dimen/tab_tray_divider_margin_start"
+    android:insetRight="@dimen/tab_tray_divider_margin_end">
+
+    <shape>
+        <size android:height="1dp"/>
+        <solid android:color="?tabTrayItemDivider" />
+    </shape>
+
+</inset>

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

@@ -5,4 +5,8 @@
 <resources>
     <!--  Onboarding  -->
     <dimen name="onboarding_dual_pane_radio_button_translation_x">7dp</dimen>
+
+    <!-- Tabs Tray -->
+    <dimen name="tab_tray_divider_margin_start">0dp</dimen>
+    <dimen name="tab_tray_divider_margin_end">124dp</dimen>
 </resources>

app/src/main/res/values-night/colors.xml

@@ -49,6 +49,7 @@
     <color name="tab_tray_item_background_normal_theme">@color/tab_tray_item_background_dark_theme</color>
     <color name="tab_tray_item_selected_background_normal_theme">@color/tab_tray_item_selected_background_dark_theme</color>
     <color name="tab_tray_toolbar_background_normal_theme">@color/tab_tray_toolbar_background_dark_theme</color>
+    <color name="tab_tray_item_divider_normal_theme">@color/tab_tray_item_divider_dark_theme</color>
 
     <!-- Collection icons-->
     <color name="collection_icon_color_violet">@color/collection_icon_color_violet_dark_theme</color>

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

@@ -57,6 +57,7 @@
     <attr name="tabTrayItemBackground" format="reference" />
     <attr name="tabTrayItemSelectedBackground" format="reference" />
     <attr name="tabTrayToolbarBackground" format="reference" />
+    <attr name="tabTrayItemDivider" format="reference" />
 
     <declare-styleable name="LibraryListItem">
         <attr name="listItemTitle" format="reference" />

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

@@ -63,6 +63,7 @@
     <color name="tab_tray_item_background_light_theme">@color/light_grey_10</color>
     <color name="tab_tray_item_selected_background_light_theme">@color/violet_70_12a</color>
     <color name="tab_tray_toolbar_background_light_theme">@color/light_grey_10</color>
+    <color name="tab_tray_item_divider_light_theme">@color/light_grey_30</color>
 
     <!-- Dark theme color palette -->
     <color name="primary_text_dark_theme">#FBFBFE</color>
@@ -109,6 +110,7 @@
     <color name="tab_tray_item_background_dark_theme">@color/dark_grey_80</color>
     <color name="tab_tray_item_selected_background_dark_theme">@color/violet_50_32a</color>
     <color name="tab_tray_toolbar_background_dark_theme">@color/dark_grey_50</color>
+    <color name="tab_tray_item_divider_dark_theme">@color/dark_grey_10</color>
 
     <!-- Private theme color palette -->
     <color name="primary_text_private_theme">#FBFBFE</color>
@@ -154,6 +156,7 @@
     <color name="tab_tray_item_background_private_theme">@color/ink_90</color>
     <color name="tab_tray_item_selected_background_private_theme">@color/violet_50_32a</color>
     <color name="tab_tray_toolbar_background_private_theme">@color/ink_50</color>
+    <color name="tab_tray_item_divider_private_theme">@color/dark_grey_10</color>
 
     <!-- Normal theme colors for light mode -->
     <color name="primary_text_normal_theme">@color/primary_text_light_theme</color>
@@ -198,6 +201,7 @@
     <color name="tab_tray_item_background_normal_theme">@color/tab_tray_item_background_light_theme</color>
     <color name="tab_tray_item_selected_background_normal_theme">@color/tab_tray_item_selected_background_light_theme</color>
     <color name="tab_tray_toolbar_background_normal_theme">@color/tab_tray_toolbar_background_light_theme</color>
+    <color name="tab_tray_item_divider_normal_theme">@color/tab_tray_item_divider_light_theme</color>
 
     <!-- Bookmark buttons -->
     <color name="bookmark_favicon_background">#DFDFE3</color>

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

@@ -143,4 +143,8 @@
     <dimen name="addon_details_rating_view_margin_start">6dp</dimen>
     <dimen name="addon_details_rating_view_margin_end">6dp</dimen>
 
+    <!-- Tabs Tray -->
+    <dimen name="tab_tray_divider_margin_start">124dp</dimen>
+    <dimen name="tab_tray_divider_margin_end">0dp</dimen>
+
 </resources>

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

@@ -79,6 +79,7 @@
         <item name="tabTrayItemBackground">@color/tab_tray_item_background_normal_theme</item>
         <item name="tabTrayItemSelectedBackground">@color/tab_tray_item_selected_background_normal_theme</item>
         <item name="tabTrayToolbarBackground">@color/tab_tray_toolbar_background_normal_theme</item>
+        <item name="tabTrayItemDivider">@color/tab_tray_item_divider_normal_theme</item>
 
         <!-- Drawables -->
         <item name="fenixLogo">@drawable/ic_logo_wordmark_normal</item>
@@ -202,6 +203,7 @@
         <item name="tabTrayItemBackground">@color/tab_tray_item_background_private_theme</item>
         <item name="tabTrayItemSelectedBackground">@color/tab_tray_item_selected_background_private_theme</item>
         <item name="tabTrayToolbarBackground">@color/tab_tray_toolbar_background_private_theme</item>
+        <item name="tabTrayItemDivider">@color/tab_tray_item_divider_private_theme</item>
 
         <!-- Drawables -->
         <item name="fenixLogo">@drawable/ic_logo_wordmark_private</item>