Spotify app Home Screen using CollectionView

CollectionViewChallenge/CollectionViewChallenge.Android/CollectionViewChallenge.Android.csproj

@@ -15,7 +15,6 @@
     <AndroidManifest>Properties\AndroidManifest.xml</AndroidManifest>
     <MonoAndroidResourcePrefix>Resources</MonoAndroidResourcePrefix>
     <MonoAndroidAssetsPrefix>Assets</MonoAndroidAssetsPrefix>
-    <AndroidUseLatestPlatformSdk>false</AndroidUseLatestPlatformSdk>
     <TargetFrameworkVersion>v8.1</TargetFrameworkVersion>
     <AndroidEnableSGenConcurrent>true</AndroidEnableSGenConcurrent>
     <AndroidHttpClientHandlerType>Xamarin.Android.Net.AndroidClientHandler</AndroidHttpClientHandlerType>
@@ -93,18 +92,38 @@
     <AndroidResource Include="Resources\drawable\xamarin_logo.png" />
     <AndroidResource Include="Resources\drawable\tab_about.png" />
     <AndroidResource Include="Resources\drawable\tab_feed.png" />
+    <AndroidResource Include="Resources\drawable\home_icon.png" />
+    <AndroidResource Include="Resources\drawable\library_icon.png" />
+    <AndroidResource Include="Resources\drawable\search_icon.png" />
+    <AndroidResource Include="Resources\drawable\daily_mix1.jpeg" />
+    <AndroidResource Include="Resources\drawable\daily_mix2.jpeg" />
+    <AndroidResource Include="Resources\drawable\daily_mix3.jpeg" />
+    <AndroidResource Include="Resources\drawable\daily_mix4.jpeg" />
+    <AndroidResource Include="Resources\drawable\main_cover.jpg" />
+    <AndroidResource Include="Resources\drawable\recently_played1.jpeg" />
+    <AndroidResource Include="Resources\drawable\recently_played2.jpeg" />
+    <AndroidResource Include="Resources\drawable\recently_played3.jpeg" />
+    <AndroidResource Include="Resources\drawable\recently_played4.jpeg" />
+    <AndroidResource Include="Resources\drawable\sing_along1.jpeg" />
+    <AndroidResource Include="Resources\drawable\sing_along2.jpeg" />
+    <AndroidResource Include="Resources\drawable\sing_along3.jpeg" />
+    <AndroidResource Include="Resources\drawable\sing_along4.jpeg" />
   </ItemGroup>
   <ItemGroup>
     <Folder Include="Resources\drawable-hdpi\" />
     <Folder Include="Resources\drawable-xhdpi\" />
     <Folder Include="Resources\drawable-xxhdpi\" />
     <Folder Include="Resources\drawable-xxxhdpi\" />
+    <Folder Include="Assets\Fonts\" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\CollectionViewChallenge\CollectionViewChallenge.csproj">
-      <Project>{BA39825E-3CF8-4A31-B120-782B2A651542}</Project>
+      <Project>{9A9DDEE5-8C48-4274-82D7-22EB79C97206}</Project>
       <Name>CollectionViewChallenge</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <AndroidAsset Include="Assets\Fonts\Font Awesome 5 Free-Solid-900.otf" />
+  </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />
 </Project>

CollectionViewChallenge/CollectionViewChallenge.Android/Properties/AndroidManifest.xml

@@ -1,5 +1,5 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.companyname.CollectionViewChallenge">
-    <uses-sdk android:minSdkVersion="21" android:targetSdkVersion="27" />
-    <application android:label="CollectionViewChallenge.Android"></application>
-</manifest>
+	<uses-sdk android:minSdkVersion="21" android:targetSdkVersion="27" />
+	<application android:label="CollectionViewChallenge.Android"></application>
+</manifest>

CollectionViewChallenge/CollectionViewChallenge.iOS/CollectionViewChallenge.iOS.csproj

@@ -123,6 +123,23 @@
     <BundleResource Include="Resources\xamarin_logo%402x.png" />
     <BundleResource Include="Resources\xamarin_logo%403x.png" />
     <InterfaceDefinition Include="Resources\LaunchScreen.storyboard" />
+    <BundleResource Include="Resources\home_icon.png" />
+    <BundleResource Include="Resources\library_icon.png" />
+    <BundleResource Include="Resources\search_icon.png" />
+    <BundleResource Include="Resources\daily_mix1.jpeg" />
+    <BundleResource Include="Resources\daily_mix2.jpeg" />
+    <BundleResource Include="Resources\daily_mix3.jpeg" />
+    <BundleResource Include="Resources\daily_mix4.jpeg" />
+    <BundleResource Include="Resources\main_cover.jpg" />
+    <BundleResource Include="Resources\recently_played1.jpeg" />
+    <BundleResource Include="Resources\recently_played2.jpeg" />
+    <BundleResource Include="Resources\recently_played3.jpeg" />
+    <BundleResource Include="Resources\recently_played4.jpeg" />
+    <BundleResource Include="Resources\sing_along1.jpeg" />
+    <BundleResource Include="Resources\sing_along2.jpeg" />
+    <BundleResource Include="Resources\sing_along3.jpeg" />
+    <BundleResource Include="Resources\sing_along4.jpeg" />
+    <BundleResource Include="Resources\Fonts\Font Awesome 5 Free-Solid-900.otf" />
   </ItemGroup>
   <ItemGroup>
     <Reference Include="System" />
@@ -139,8 +156,11 @@
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\iOS\Xamarin.iOS.CSharp.targets" />
   <ItemGroup>
     <ProjectReference Include="..\CollectionViewChallenge\CollectionViewChallenge.csproj">
-      <Project>{BA39825E-3CF8-4A31-B120-782B2A651542}</Project>
+      <Project>{9A9DDEE5-8C48-4274-82D7-22EB79C97206}</Project>
       <Name>CollectionViewChallenge</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <Folder Include="Resources\Fonts\" />
+  </ItemGroup>
 </Project>

CollectionViewChallenge/CollectionViewChallenge.iOS/Info.plist

@@ -2,37 +2,41 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
-    <key>UIDeviceFamily</key>
-    <array>
-        <integer>1</integer>
-        <integer>2</integer>
-    </array>
-    <key>UISupportedInterfaceOrientations</key>
-    <array>
-        <string>UIInterfaceOrientationPortrait</string>
-        <string>UIInterfaceOrientationLandscapeLeft</string>
-        <string>UIInterfaceOrientationLandscapeRight</string>
-    </array>
-    <key>UISupportedInterfaceOrientations~ipad</key>
-    <array>
-        <string>UIInterfaceOrientationPortrait</string>
-        <string>UIInterfaceOrientationPortraitUpsideDown</string>
-        <string>UIInterfaceOrientationLandscapeLeft</string>
-        <string>UIInterfaceOrientationLandscapeRight</string>
-    </array>
-    <key>MinimumOSVersion</key>
-    <string>8.0</string>
-    <key>CFBundleDisplayName</key>
-    <string>CollectionViewChallenge</string>
-    <key>CFBundleIdentifier</key>
-    <string>com.companyname.CollectionViewChallenge</string>
-    <key>CFBundleVersion</key>
-    <string>1.0</string>
-    <key>UILaunchStoryboardName</key>
-    <string>LaunchScreen</string>
-    <key>CFBundleName</key>
-    <string>CollectionViewChallenge</string>
-    <key>XSAppIconAssets</key>
-    <string>Assets.xcassets/AppIcon.appiconset</string>
+	<key>UIDeviceFamily</key>
+	<array>
+		<integer>1</integer>
+		<integer>2</integer>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>MinimumOSVersion</key>
+	<string>8.0</string>
+	<key>CFBundleDisplayName</key>
+	<string>CollectionViewChallenge</string>
+	<key>CFBundleIdentifier</key>
+	<string>com.companyname.CollectionViewChallenge</string>
+	<key>CFBundleVersion</key>
+	<string>1.0</string>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>CFBundleName</key>
+	<string>CollectionViewChallenge</string>
+	<key>XSAppIconAssets</key>
+	<string>Assets.xcassets/AppIcon.appiconset</string>
+	<key>UIAppFonts</key>
+	<array>
+		<string>Fonts/Font Awesome 5 Free-Solid-900.otf</string>
+	</array>
 </dict>
 </plist>

CollectionViewChallenge/CollectionViewChallenge/App.xaml

@@ -1,8 +1,99 @@
-<?xml version="1.0" encoding="utf-8" ?>
+<?xml version="1.0" encoding="utf-8" ?>
 <Application xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="CollectionViewChallenge.App">
     <Application.Resources>
-
+        <ResourceDictionary>
+            <Color x:Key="Success">#28A745</Color>
+
+            <OnPlatform x:Key="IconFontFamily" x:TypeArguments="x:String" 
+                        iOS="Font Awesome 5 Free"
+                        Android="Fonts/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free"/>
+
+            <OnPlatform x:Key="SmallSize" x:TypeArguments="x:Double" iOS="10" Android="10"/>
+            <OnPlatform x:Key="NormalSize" x:TypeArguments="x:Double" iOS="12" Android="12"/>
+            <OnPlatform x:Key="MediumSize" x:TypeArguments="x:Double" iOS="14" Android="14"/>
+            <OnPlatform x:Key="LargeSize" x:TypeArguments="x:Double" iOS="16" Android="16"/>
+            <OnPlatform x:Key="HeaderSize" x:TypeArguments="x:Double" iOS="20" Android="20"/>
+
+            <Style x:Key="BaseLabel" TargetType="Label">
+                <Setter Property="FontSize" Value="{StaticResource SmallSize}"/>
+                <Setter Property="TextColor" Value="White"/>
+                <Setter Property="VerticalOptions" Value="Center"/>
+                <Setter Property="HorizontalOptions" Value="Center"/>
+                <Setter Property="HorizontalTextAlignment" Value="Center"/>
+            </Style>
+
+            <Style x:Key="BaseIconLabel" TargetType="Label">
+                <Setter Property="FontSize" Value="{StaticResource HeaderSize}"/>
+                <Setter Property="TextColor" Value="White"/>
+                <Setter Property="FontFamily" Value="{StaticResource IconFontFamily}"/>
+                <Setter Property="VerticalOptions" Value="Center"/>
+                <Setter Property="HorizontalOptions" Value="Center"/>
+            </Style>
+
+            <Style x:Key="BaseBoldLabel" TargetType="Label" BasedOn="{StaticResource BaseLabel}">
+                <Setter Property="FontAttributes" Value="Bold"/>
+            </Style>
+
+            <Style x:Key="MediumLabel" TargetType="Label" BasedOn="{StaticResource BaseLabel}">
+                <Setter Property="FontSize" Value="{StaticResource MediumSize}"/>
+            </Style>
+
+            <Style x:Key="LargeLabel" TargetType="Label" BasedOn="{StaticResource BaseLabel}">
+                <Setter Property="FontSize" Value="{StaticResource LargeSize}"/>
+            </Style>
+
+            <Style x:Key="MediumBoldLabel" TargetType="Label" BasedOn="{StaticResource MediumLabel}">
+                <Setter Property="FontAttributes" Value="Bold"/>
+            </Style>
+
+            <Style x:Key="LargeBoldLabel" TargetType="Label" BasedOn="{StaticResource LargeLabel}">
+                <Setter Property="FontAttributes" Value="Bold"/>
+            </Style>
+
+            <Style x:Key="BaseSpan" TargetType="Span">
+                <Setter Property="FontSize" Value="{StaticResource SmallSize}"/>
+                <Setter Property="TextColor" Value="White"/>
+            </Style>
+
+            <Style x:Key="NormalSpan" TargetType="Span" BasedOn="{StaticResource BaseSpan}">
+                <Setter Property="FontSize" Value="{StaticResource NormalSize}"/>
+            </Style>
+
+            <Style x:Key="NormalSilverSpan" TargetType="Span" BasedOn="{StaticResource NormalSpan}">
+                <Setter Property="TextColor" Value="Silver"/>
+            </Style>
+
+            <Style x:Key="BaseIconSpan" TargetType="Span" BasedOn="{StaticResource BaseSpan}">
+                <Setter Property="FontFamily" Value="{StaticResource IconFontFamily}"/>
+            </Style>
+
+            <Style x:Key="BaseCollectionView" TargetType="CollectionView">
+                <Setter Property="Margin" Value="10,0"/>
+                <Setter Property="SelectionMode" Value="None"/>
+                <Setter Property="VerticalOptions" Value="Start"/>
+            </Style>
+
+            <Style x:Key="HomeCollectionView" TargetType="CollectionView" BasedOn="{StaticResource BaseCollectionView}">
+                <Setter Property="HeightRequest" Value="250"/>
+            </Style>
+
+            <Style x:Key="RecentlyPlayedCollectionView" TargetType="CollectionView" BasedOn="{StaticResource BaseCollectionView}">
+                <Setter Property="HeightRequest" Value="210"/>
+            </Style>
+
+            <Style x:Key="BaseBoxView" TargetType="BoxView">
+                <Setter Property="Color" Value="Gray"/>
+                <Setter Property="HeightRequest" Value="3"/>
+                <Setter Property="VerticalOptions" Value="FillAndExpand"/>
+                <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
+            </Style>
+
+            <Style x:Key="ProgressBoxView" TargetType="BoxView" BasedOn="{StaticResource BaseBoxView}">
+                <Setter Property="Color" Value="White"/>
+                <Setter Property="HorizontalOptions" Value="Start"/>
+            </Style>
+        </ResourceDictionary>
     </Application.Resources>
 </Application>

CollectionViewChallenge/CollectionViewChallenge/AppShell.xaml

@@ -8,72 +8,43 @@
        FlyoutBehavior="Disabled"
        Title="CollectionViewChallenge"
        x:Class="CollectionViewChallenge.AppShell">
-
-    <!--
-        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-        XXXXXXXX|                            |XXXXXXXX
-        XXXXXXX'                              'XXXXXXX
-        XXXXXx.                                .xNXXXX
-        XXXNo.        ,ll;.        .;ll,        .oNXXX
-        XXX|.         ,OXNo.      .oNXO,          cXXX
-        XX|            'XXNx.    .xNXX'            |XX
-        X|              .xXXX.  .XXXx.              |X
-        |                .xXXOllOXXx.                |
-        |                .xXXXccXXXx.                |
-        X|              .XXXx.  .xXXX.              |X
-        XXc            ,OXNd.    .dNXO,            cXX
-        XXXl.         ;XXXo.      .oNXX;         .lXXX
-        XXXNd.        'cc,          ,cc'        .dNXXX
-        XXXXXx.                                .xXXXXX
-        XXXXXXO'                              'OXXXXXX
-        XXXXXXXX|                            |XXXXXXXX
-        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-
-        Shell is an all new way to quickly get started with your application. There are 3 levels to a Shell app:
-        * ShellItem: populates the Flyout menu along with special menu items
-        * ShellSection: groups of 1 or more ContentPage displayed as bottom tabs
-        * ShellContent: a ContentPage host. Multiple ShellContent within a ShellSection are navigable by top tabs
-
-        For more details about building apps with Shell, visit these resources:
-        * MSDN Article: https://aka.ms/xf-msdn
-        * Preview Documentation: https://aka.ms/xf-shell-docs
-        * Blog Introduction: https://aka.ms/xf-40-blog
-
-        PLEASE give us feedback on your experience: good, bad, and ugly.
-        https://www.surveymonkey.com/r/VTJNWTM
-
-        Thanks for trying out this preview! 
-
-        - David Ortinau, Senior Program Manager for Mobile Dev Tools [david.ortinau@microsoft.com]
-    -->
-
-    <!-- 
-        Styles and Resources 
-    -->
     <Shell.Resources>
         <ResourceDictionary>
-            <Color x:Key="NavigationPrimary">#2196F3</Color>
+            <OnPlatform x:Key="TabBarColor" x:TypeArguments="Color" iOS="#282828" Android="#343434"/>
+
             <Style x:Key="BaseStyle" TargetType="Element">
-                <Setter Property="Shell.ShellBackgroundColor" Value="{StaticResource NavigationPrimary}" />
-                <Setter Property="Shell.ShellForegroundColor" Value="White" />
-                <Setter Property="Shell.ShellTitleColor" Value="White" />
-                <Setter Property="Shell.ShellDisabledColor" Value="#B4FFFFFF" />
-                <Setter Property="Shell.ShellUnselectedColor" Value="#95FFFFFF" />
-                <Setter Property="Shell.ShellTabBarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
-                <Setter Property="Shell.ShellTabBarForegroundColor" Value="White"/>
-                <Setter Property="Shell.ShellTabBarUnselectedColor" Value="#95FFFFFF"/>
+                <Setter Property="Shell.ShellBackgroundColor" Value="Black"/>
+                <Setter Property="Shell.ShellForegroundColor" Value="Black"/>
+                <Setter Property="Shell.ShellTitleColor" Value="White"/>
+                <Setter Property="Shell.ShellDisabledColor" Value="#B4FFFFFF"/>
+                <Setter Property="Shell.ShellUnselectedColor" Value="#95FFFFFF"/>
+                <Setter Property="Shell.ShellTabBarBackgroundColor" Value="{StaticResource TabBarColor}"/>
+                <Setter Property="Shell.ShellTabBarForegroundColor" Value="{StaticResource TabBarColor}"/>
+                <Setter Property="Shell.ShellTabBarUnselectedColor" Value="Silver"/>
                 <Setter Property="Shell.ShellTabBarTitleColor" Value="White"/>
             </Style>
-            <Style TargetType="ShellItem" BasedOn="{StaticResource BaseStyle}" />
+
+            <Style TargetType="ShellItem" BasedOn="{StaticResource BaseStyle}"/>
         </ResourceDictionary>
     </Shell.Resources>
-
-    <!-- Your Pages -->
+
     <ShellItem>
-        <ShellSection Title="CollectionView" Icon="tab_feed.png">
-            <ShellContent Title="CollectionView">
+        <ShellSection Title="Home" Icon="home_icon.png">
+            <ShellContent>
                 <local:CollectionViewChallengePage Title="CollectionView"/>
             </ShellContent>
         </ShellSection>
+
+        <ShellSection Title="Search" Icon="search_icon.png">
+            <ShellContent>
+                <ContentPage BackgroundColor="Gray" Title="Search"/>
+            </ShellContent>
+        </ShellSection>
+
+        <ShellSection Title="Library" Icon="library_icon.png">
+            <ShellContent>
+                <ContentPage BackgroundColor="Silver" Title="Library"/>
+            </ShellContent>
+        </ShellSection>
     </ShellItem>
 </Shell>

CollectionViewChallenge/CollectionViewChallenge/CollectionViewChallenge.csproj

@@ -24,5 +24,7 @@
   <ItemGroup>
     <Folder Include="Models\" />
     <Folder Include="ViewModels\" />
+    <Folder Include="Models\Enums\" />
+    <Folder Include="Views\Templates\" />
   </ItemGroup>
 </Project>

CollectionViewChallenge/CollectionViewChallenge/Models/CollectionItemViewModel.cs

@@ -0,0 +1,12 @@
+using Xamarin.Forms;
+
+namespace CollectionViewChallenge.Models
+{
+    public class CollectionItemViewModel
+    {
+        public string Title { get; set; }
+        public string Description { get; set; }
+        public ImageSource CoverUrl { get; set; }
+        public GridLength DescRowHeight { get; set; }
+    }
+}