Closes #378 - Creates Library Fragment UI and adds resources

app/build.gradle

@@ -130,6 +130,9 @@ dependencies {
     implementation Deps.mozilla_feature_findinpage
     implementation Deps.mozilla_support_ktx
 
+    implementation Deps.mozilla_ui_colors
+    implementation Deps.mozilla_ui_icons
+
     implementation Deps.mozilla_lib_crash
 
     testImplementation Deps.junit

app/src/main/java/org/mozilla/fenix/library/LibraryFragment.kt

+/* 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/. */
+
+package org.mozilla.fenix.library
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.fragment.app.Fragment
+import org.mozilla.fenix.R
+
+class LibraryFragment : Fragment() {
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        return inflater.inflate(R.layout.fragment_library, container, false)
+    }
+}

app/src/main/java/org/mozilla/fenix/library/LibraryListItem.kt

+/* 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/. */
+
+package org.mozilla.fenix.library
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.LayoutInflater
+import androidx.constraintlayout.widget.ConstraintLayout
+import kotlinx.android.synthetic.main.library_list_item.view.*
+import org.mozilla.fenix.R
+
+class LibraryListItem @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = 0
+) : ConstraintLayout(context, attrs, defStyleAttr) {
+    init {
+        LayoutInflater.from(context).inflate(R.layout.library_list_item, this, true)
+        attrs.let {
+            context.theme.obtainStyledAttributes(
+                it,
+                R.styleable.LibraryListItem,
+                0, 0
+            ).apply {
+                try {
+                    val id = getResourceId(
+                        R.styleable.LibraryListItem_listItemIcon,
+                        R.drawable.library_icon_logins_circle_background
+                    )
+                    libraryIcon?.background = resources.getDrawable(id, context.theme)
+                    libraryItemTitle?.text = resources.getString(
+                        getResourceId(
+                            R.styleable.LibraryListItem_listItemTitle,
+                            R.string.browser_menu_library
+                        )
+                    )
+                } finally {
+                    recycle()
+                }
+            }
+        }
+    }
+}

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

+<?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/. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M6.749,21.248C6.4234,21.2471 6.1142,21.1054 5.9008,20.8595C5.6875,20.6136 5.5909,20.2874 5.636,19.965L6.414,14.4L2.674,10.38C2.3928,10.0785 2.2991,9.6474 2.4296,9.2564C2.5601,8.8654 2.8941,8.5771 3.3,8.505L8.529,7.57L10.993,2.624C11.1833,2.242 11.5733,2.0006 12,2.0006C12.4267,2.0006 12.8167,2.242 13.007,2.624L15.471,7.57L20.7,8.5C21.1057,8.5724 21.4394,8.8608 21.5697,9.2518C21.7,9.6427 21.6062,10.0737 21.325,10.375L17.586,14.4L18.364,19.968C18.4229,20.3853 18.2434,20.8005 17.8991,21.0434C17.5547,21.2864 17.1034,21.3164 16.73,21.121L12,18.654L7.269,21.119C7.1087,21.2035 6.9302,21.2478 6.749,21.248Z"
+      android:strokeWidth="1"
+      android:fillColor="#202340"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+</vector>

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

+<?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/. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#202340"
+        android:fillType="evenOdd"
+        android:pathData="M11.293,17.707L5.293,11.707C4.914,11.3146 4.9194,10.6909 5.3052,10.3052C5.6909,9.9194 6.3146,9.914 6.707,10.293L11,14.586L11,3C11,2.4477 11.4477,2 12,2C12.5523,2 13,2.4477 13,3L13,14.586L17.293,10.293C17.6854,9.914 18.3091,9.9194 18.6948,10.3052C19.0806,10.6909 19.086,11.3146 18.707,11.707L12.707,17.707C12.3165,18.0974 11.6835,18.0974 11.293,17.707ZM18,20C18.5523,20 19,20.4477 19,21C19,21.5523 18.5523,22 18,22L6,22C5.4477,22 5,21.5523 5,21C5,20.4477 5.4477,20 6,20L18,20Z"
+        android:strokeWidth="1"
+        android:strokeColor="#00000000" />
+</vector>

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

+<?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/. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,22C6.4772,22 2,17.5228 2,12C2,6.4772 6.4772,2 12,2C17.5228,2 22,6.4772 22,12C21.9939,17.5203 17.5203,21.9939 12,22L12,22ZM12,4C7.5817,4 4,7.5817 4,12C4,16.4183 7.5817,20 12,20C16.4183,20 20,16.4183 20,12C19.995,7.5838 16.4162,4.005 12,4ZM16.5,13L11.5,13C11.2239,13 11,12.7761 11,12.5L11,7.5C11,7.2239 11.2239,7 11.5,7C11.7761,7 12,7.2239 12,7.5L12,12L16.5,12C16.7761,12 17,12.2239 17,12.5C17,12.7761 16.7761,13 16.5,13Z"
+      android:strokeWidth="1"
+      android:fillColor="#202340"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+</vector>

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

+<?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/. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M6,7.1707C7.1652,7.5825 8,8.6938 8,10C8,10.2312 7.9738,10.4563 7.9243,10.6725L10.4097,12.5843L14.9445,9.4447C16.0797,8.6588 17.6371,8.942 18.423,10.0772L7.9279,17.3431C7.9751,17.5545 8,17.7743 8,18C8,19.6569 6.6569,21 5,21C3.3431,21 2,19.6569 2,18C2,16.3431 3.3431,15 5,15C5.5103,15 5.9909,15.1274 6.4116,15.3522L8.2516,14.0783L6.4,12.654C5.9821,12.8749 5.5056,13 5,13C3.3431,13 2,11.6569 2,10C2,8.6938 2.8348,7.5825 4,7.1707L4,6L6,6L6,7.1707ZM6,2L6,4L4,4C4,2.8954 4.8954,2 6,2ZM8,2L10,2L10,4L8,4L8,2ZM12,2L14,2L14,4L12,4L12,2ZM16,2L18,2L18,4L16,4L16,2ZM20,2C21.1046,2 22,2.8954 22,4L20,4L20,2ZM20,6L22,6L22,8L20,8L20,6ZM20,10L22,10L22,12L20,12L20,10ZM20,14L22,14C22,15.1046 21.1046,16 20,16L20,14ZM13.648,15.0753L18.7621,19.0092C17.9203,20.1036 16.3507,20.3083 15.2563,19.4665L11.49,16.5693L13.648,15.0753ZM5,11C5.5523,11 6,10.5523 6,10C6,9.4477 5.5523,9 5,9C4.4477,9 4,9.4477 4,10C4,10.5523 4.4477,11 5,11ZM5,19C5.5523,19 6,18.5523 6,18C6,17.4477 5.5523,17 5,17C4.4477,17 4,17.4477 4,18C4,18.5523 4.4477,19 5,19Z"
+      android:strokeWidth="1"
+      android:fillColor="#202340"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+</vector>

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

+<?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/. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M10.5859,21L7,21C5.3431,21 4,19.6569 4,18L4,5C4,3.3431 5.3431,2 7,2L17,2C18.6569,2 20,3.3431 20,5L20,18C20,19.6569 18.6569,21 17,21C16.4477,21 16,20.5523 16,20C16,19.4477 16.4477,19 17,19C17.5523,19 18,18.5523 18,18L18,5C18,4.4477 17.5523,4 17,4L7,4C6.4477,4 6,4.4477 6,5L6,18C6,18.5523 6.4477,19 7,19L10.5858,19L9.2929,17.7071C8.9024,17.3166 8.9024,16.6834 9.2929,16.2929C9.6834,15.9024 10.3166,15.9024 10.7071,16.2929L13.7071,19.2929C14.0976,19.6834 14.0976,20.3165 13.7071,20.7071L10.7074,23.7071C10.3169,24.0976 9.6837,24.0976 9.2932,23.7071C8.9026,23.3166 8.9026,22.6835 9.2931,22.2929L10.5859,21Z"
+      android:strokeWidth="1"
+      android:fillColor="#202340"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+</vector>

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

+<?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/. -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="oval">
+            <size
+                android:width="48dp"
+                android:height="48dp" />
+            <solid android:color="@color/library_downloads_icon_background" />
+        </shape>
+    </item>
+    <item
+        android:bottom="8dp"
+        android:left="8dp"
+        android:right="8dp"
+        android:top="8dp">
+        <vector
+            android:width="24dp"
+            android:height="24dp"
+            android:viewportWidth="24"
+            android:viewportHeight="24">
+            <path
+                android:fillColor="@color/library_downloads_icon"
+                android:fillType="evenOdd"
+                android:pathData="M11.293,17.707L5.293,11.707C4.914,11.3146 4.9194,10.6909 5.3052,10.3052C5.6909,9.9194 6.3146,9.914 6.707,10.293L11,14.586L11,3C11,2.4477 11.4477,2 12,2C12.5523,2 13,2.4477 13,3L13,14.586L17.293,10.293C17.6854,9.914 18.3091,9.9194 18.6948,10.3052C19.0806,10.6909 19.086,11.3146 18.707,11.707L12.707,17.707C12.3165,18.0974 11.6835,18.0974 11.293,17.707ZM18,20C18.5523,20 19,20.4477 19,21C19,21.5523 18.5523,22 18,22L6,22C5.4477,22 5,21.5523 5,21C5,20.4477 5.4477,20 6,20L18,20Z"
+                android:strokeWidth="1"
+                android:strokeColor="#00000000" />
+        </vector>
+    </item>
+</layer-list>

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

+<?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/. -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="oval">
+            <size
+                android:width="48dp"
+                android:height="48dp" />
+            <solid android:color="@color/library_favorites_icon_background" />
+        </shape>
+    </item>
+    <item
+        android:bottom="8dp"
+        android:left="8dp"
+        android:right="8dp"
+        android:top="8dp">
+        <vector
+            android:width="24dp"
+            android:height="24dp"
+            android:viewportWidth="24"
+            android:viewportHeight="24">
+            <path
+                android:fillColor="@color/library_favorites_icon"
+                android:fillType="evenOdd"
+                android:pathData="M6.749,21.248C6.4234,21.2471 6.1142,21.1054 5.9008,20.8595C5.6875,20.6136 5.5909,20.2874 5.636,19.965L6.414,14.4L2.674,10.38C2.3928,10.0785 2.2991,9.6474 2.4296,9.2564C2.5601,8.8654 2.8941,8.5771 3.3,8.505L8.529,7.57L10.993,2.624C11.1833,2.242 11.5733,2.0006 12,2.0006C12.4267,2.0006 12.8167,2.242 13.007,2.624L15.471,7.57L20.7,8.5C21.1057,8.5724 21.4394,8.8608 21.5697,9.2518C21.7,9.6427 21.6062,10.0737 21.325,10.375L17.586,14.4L18.364,19.968C18.4229,20.3853 18.2434,20.8005 17.8991,21.0434C17.5547,21.2864 17.1034,21.3164 16.73,21.121L12,18.654L7.269,21.119C7.1087,21.2035 6.9302,21.2478 6.749,21.248Z"
+                android:strokeWidth="1"
+                android:strokeColor="#00000000" />
+        </vector>
+    </item>
+</layer-list>

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

+<?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/. -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="oval">
+            <size
+                android:width="48dp"
+                android:height="48dp" />
+            <solid android:color="@color/library_history_icon_background" />
+        </shape>
+    </item>
+    <item
+        android:bottom="8dp"
+        android:left="8dp"
+        android:right="8dp"
+        android:top="8dp">
+        <vector
+            android:width="24dp"
+            android:height="24dp"
+            android:viewportWidth="24"
+            android:viewportHeight="24">
+            <path
+                android:fillColor="@color/library_history_icon"
+                android:fillType="evenOdd"
+                android:pathData="M12,22C6.4772,22 2,17.5228 2,12C2,6.4772 6.4772,2 12,2C17.5228,2 22,6.4772 22,12C21.9939,17.5203 17.5203,21.9939 12,22L12,22ZM12,4C7.5817,4 4,7.5817 4,12C4,16.4183 7.5817,20 12,20C16.4183,20 20,16.4183 20,12C19.995,7.5838 16.4162,4.005 12,4ZM16.5,13L11.5,13C11.2239,13 11,12.7761 11,12.5L11,7.5C11,7.2239 11.2239,7 11.5,7C11.7761,7 12,7.2239 12,7.5L12,12L16.5,12C16.7761,12 17,12.2239 17,12.5C17,12.7761 16.7761,13 16.5,13Z"
+                android:strokeWidth="1"
+                android:strokeColor="#00000000" />
+        </vector>
+    </item>
+</layer-list>

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

+<?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/. -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="oval">
+            <size
+                android:width="48dp"
+                android:height="48dp" />
+            <solid android:color="@color/library_key_icon_background" />
+        </shape>
+    </item>
+    <item
+        android:bottom="8dp"
+        android:left="8dp"
+        android:right="8dp"
+        android:top="8dp">
+        <vector
+            android:width="24dp"
+            android:height="24dp"
+            android:viewportWidth="24"
+            android:viewportHeight="24">
+            <path
+                android:fillColor="@color/library_key_icon"
+                android:fillType="evenOdd"
+                android:pathData="M11.377,4.842c-1.045,1.18 -1.531,2.752 -1.334,4.315L9,10.2c-0.144,0.174 -0.144,0.426 0,0.6 0.115,0.206 0.26,0.393 0.429,0.557 0.216,0.19 0.408,0.406 0.571,0.643l-7,7v1.7c-0.002,0.08 0.03,0.157 0.086,0.214 0.057,0.057 0.134,0.088 0.214,0.086H7v-1h1v-1.5h1V18h1v-2h1l1.6,-1.6h0.3l0.6,0.6c0.3,0.3 0.3,0.3 0.469,0.3 0.134,-0.01 0.26,-0.068 0.354,-0.163l0.9,-1.151c0.093,0 0.185,0.014 0.279,0.014 3.038,0 5.5,-2.462 5.5,-5.5S18.54,3 15.502,3c-1.578,-0.008 -3.08,0.663 -4.125,1.842zM17.5,8c-0.828,0 -1.5,-0.672 -1.5,-1.5S16.672,5 17.5,5s1.5,0.672 1.5,1.5S18.328,8 17.5,8z" />
+        </vector>
+    </item>
+</layer-list>
\ No newline at end of file

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

+<?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/. -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="oval">
+            <size
+                android:width="48dp"
+                android:height="48dp" />
+            <solid android:color="@color/library_screenshots_icon_background" />
+        </shape>
+    </item>
+    <item
+        android:bottom="8dp"
+        android:left="8dp"
+        android:right="8dp"
+        android:top="8dp">
+        <vector
+            android:width="24dp"
+            android:height="24dp"
+            android:viewportWidth="24"
+            android:viewportHeight="24">
+            <path
+                android:fillColor="@color/library_screenshots_icon"
+                android:fillType="evenOdd"
+                android:pathData="M6,7.1707C7.1652,7.5825 8,8.6938 8,10C8,10.2312 7.9738,10.4563 7.9243,10.6725L10.4097,12.5843L14.9445,9.4447C16.0797,8.6588 17.6371,8.942 18.423,10.0772L7.9279,17.3431C7.9751,17.5545 8,17.7743 8,18C8,19.6569 6.6569,21 5,21C3.3431,21 2,19.6569 2,18C2,16.3431 3.3431,15 5,15C5.5103,15 5.9909,15.1274 6.4116,15.3522L8.2516,14.0783L6.4,12.654C5.9821,12.8749 5.5056,13 5,13C3.3431,13 2,11.6569 2,10C2,8.6938 2.8348,7.5825 4,7.1707L4,6L6,6L6,7.1707ZM6,2L6,4L4,4C4,2.8954 4.8954,2 6,2ZM8,2L10,2L10,4L8,4L8,2ZM12,2L14,2L14,4L12,4L12,2ZM16,2L18,2L18,4L16,4L16,2ZM20,2C21.1046,2 22,2.8954 22,4L20,4L20,2ZM20,6L22,6L22,8L20,8L20,6ZM20,10L22,10L22,12L20,12L20,10ZM20,14L22,14C22,15.1046 21.1046,16 20,16L20,14ZM13.648,15.0753L18.7621,19.0092C17.9203,20.1036 16.3507,20.3083 15.2563,19.4665L11.49,16.5693L13.648,15.0753ZM5,11C5.5523,11 6,10.5523 6,10C6,9.4477 5.5523,9 5,9C4.4477,9 4,9.4477 4,10C4,10.5523 4.4477,11 5,11ZM5,19C5.5523,19 6,18.5523 6,18C6,17.4477 5.5523,17 5,17C4.4477,17 4,17.4477 4,18C4,18.5523 4.4477,19 5,19Z"
+                android:strokeWidth="1"
+                android:strokeColor="#00000000" />
+        </vector>
+    </item>
+</layer-list>

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

+<?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/. -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="oval">
+            <size
+                android:width="48dp"
+                android:height="48dp" />
+            <solid android:color="@color/library_sessions_icon_background" />
+        </shape>
+    </item>
+    <item
+        android:bottom="8dp"
+        android:left="8dp"
+        android:right="8dp"
+        android:top="8dp">
+        <vector
+            android:width="24dp"
+            android:height="24dp"
+            android:viewportWidth="24"
+            android:viewportHeight="24">
+            <path
+                android:fillColor="@color/library_sessions_icon"
+                android:fillType="evenOdd"
+                android:pathData="M10.5859,21L7,21C5.3431,21 4,19.6569 4,18L4,5C4,3.3431 5.3431,2 7,2L17,2C18.6569,2 20,3.3431 20,5L20,18C20,19.6569 18.6569,21 17,21C16.4477,21 16,20.5523 16,20C16,19.4477 16.4477,19 17,19C17.5523,19 18,18.5523 18,18L18,5C18,4.4477 17.5523,4 17,4L7,4C6.4477,4 6,4.4477 6,5L6,18C6,18.5523 6.4477,19 7,19L10.5858,19L9.2929,17.7071C8.9024,17.3166 8.9024,16.6834 9.2929,16.2929C9.6834,15.9024 10.3166,15.9024 10.7071,16.2929L13.7071,19.2929C14.0976,19.6834 14.0976,20.3165 13.7071,20.7071L10.7074,23.7071C10.3169,24.0976 9.6837,24.0976 9.2932,23.7071C8.9026,23.3166 8.9026,22.6835 9.2931,22.2929L10.5859,21Z"
+                android:strokeWidth="1"
+                android:strokeColor="#00000000" />
+        </vector>
+
+    </item>
+</layer-list>

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

+<?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/. -->
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/photonGrey30"/>
+</shape>
\ No newline at end of file

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

+<?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/. -->
+<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:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="vertical"
+    tools:context="org.mozilla.fenix.library.LibraryFragment">
+
+    <org.mozilla.fenix.library.LibraryListItem
+        android:id="@+id/librarySessions"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:contentDescription="@string/library_sessions"
+        app:listItemIcon="@drawable/library_icon_sessions_circle_background"
+        app:listItemTitle="@string/library_sessions" />
+
+    <org.mozilla.fenix.library.LibraryListItem
+        android:id="@+id/libraryScreenshots"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:contentDescription="@string/library_screenshots"
+        app:listItemIcon="@drawable/library_icon_screenshots_circle_background"
+        app:listItemTitle="@string/library_screenshots" />
+
+    <org.mozilla.fenix.library.LibraryListItem
+        android:id="@+id/libraryDownloads"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:contentDescription="@string/library_downloads"
+        app:listItemIcon="@drawable/library_icon_downloads_circle_background"
+        app:listItemTitle="@string/library_downloads" />
+
+    <org.mozilla.fenix.library.LibraryListItem
+        android:id="@+id/libraryFavorites"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:contentDescription="@string/library_favorites"
+        app:listItemIcon="@drawable/library_icon_favorites_circle_background"
+        app:listItemTitle="@string/library_favorites" />
+
+    <org.mozilla.fenix.library.LibraryListItem
+        android:id="@+id/libraryHistory"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:listItemIcon="@drawable/library_icon_history_circle_background"
+        app:listItemTitle="@string/library_history" />
+
+    <org.mozilla.fenix.library.LibraryListItem
+        android:id="@+id/libraryLogins"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:contentDescription="@string/library_logins"
+        app:listItemIcon="@drawable/library_icon_logins_circle_background"
+        app:listItemTitle="@string/library_logins" />
+
+</LinearLayout>

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

+<?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"
+    android:layout_width="match_parent"
+    android:layout_height="@dimen/library_item_height"
+    android:background="?android:attr/selectableItemBackground"
+    android:clickable="true"
+    android:focusable="true">
+
+    <ImageView
+        android:id="@+id/libraryIcon"
+        android:layout_width="@dimen/library_item_icon_height"
+        android:layout_height="@dimen/library_item_icon_height"
+        android:layout_margin="@dimen/library_item_icon_margin"
+        android:background="@drawable/library_icon_logins_circle_background"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <TextView
+        android:id="@+id/libraryItemTitle"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="16dp"
+        android:layout_marginTop="8dp"
+        android:layout_marginBottom="8dp"
+        android:gravity="center_vertical"
+        android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@id/libraryIcon"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <View
+        android:layout_width="0dp"
+        android:layout_height="1dp"
+        android:background="@drawable/library_separator"
+        app:layout_constraintStart_toStartOf="@id/libraryItemTitle"
+        app:layout_constraintTop_toBottomOf="@id/libraryIcon" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file

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

+<?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/. -->
+<resources>
+    <declare-styleable name="LibraryListItem">
+        <attr name="listItemTitle" format="reference" />
+        <attr name="listItemIcon" format="reference" />
+    </declare-styleable>
+</resources>

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

@@ -22,4 +22,22 @@
 
     <color name="searchPillBackground">#FAFAFC</color>
     <color name="searchPillPrimary">#202340</color>
+
+    <color name="library_sessions_icon_background">#C0EBFF</color>
+    <color name="library_sessions_icon">#094490</color>
+
+    <color name="library_screenshots_icon_background">#A3FFFF</color>
+    <color name="library_screenshots_icon">#09616A</color>
+
+    <color name="library_downloads_icon_background">#D6CEFF</color>
+    <color name="library_downloads_icon">#1E1562</color>
+
+    <color name="library_favorites_icon_background">#FDD4FF</color>
+    <color name="library_favorites_icon">#6E006E</color>
+
+    <color name="library_history_icon_background">#FFDAEC</color>
+    <color name="library_history_icon">#720028</color>
+
+    <color name="library_key_icon_background">#FFF4C3</color>
+    <color name="library_key_icon">#C13905</color>
 </resources>

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

@@ -7,4 +7,7 @@
     <dimen name="glyph_button_width">48dp</dimen>
     <dimen name="mozac_browser_menu_corner_radius">14dp</dimen>
     <dimen name="toolbar_elevation">7dp</dimen>
+    <dimen name="library_item_height">56dp</dimen>
+    <dimen name="library_item_icon_height">40dp</dimen>
+    <dimen name="library_item_icon_margin">16dp</dimen>
 </resources>
\ No newline at end of file