Skip to content

Commit f12422e

Browse files
Episode 25: UI Redesign Preparations
Prepare new assets and fonts, colors, styles, and the SkiaSharp base views
1 parent 43cf4c1 commit f12422e

File tree

11 files changed

+192
-18
lines changed

11 files changed

+192
-18
lines changed

TimeTrackerTutorial.Android/Resources/values/colors.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
<resources>
33
<color name="launcher_background">#FFFFFF</color>
44
<color name="colorPrimary">#3F51B5</color>
5-
<color name="colorPrimaryDark">#303F9F</color>
5+
<color name="colorPrimaryDark">#FFF</color>
66
<color name="colorAccent">#FF4081</color>
77
</resources>

TimeTrackerTutorial.Android/Resources/values/styles.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<!-- colorPrimary is used for the default action bar background -->
1414
<item name="colorPrimary">#2196F3</item>
1515
<!-- colorPrimaryDark is used for the status bar -->
16-
<item name="colorPrimaryDark">#1976D2</item>
16+
<item name="colorPrimaryDark">#00BFFF</item>
1717
<!-- colorAccent is used as the default value for colorControlActivated
1818
which is used to tint widgets -->
1919
<item name="colorAccent">#FF4081</item>

TimeTrackerTutorial.Android/TimeTrackerTutorial.Android.csproj

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@
5353
<Reference Include="System.Numerics.Vectors" />
5454
</ItemGroup>
5555
<ItemGroup>
56-
<PackageReference Include="Xamarin.Forms" Version="4.4.0.991265" />
57-
<PackageReference Include="Xamarin.Essentials" Version="1.5.3.2" />
56+
<PackageReference Include="Xamarin.Forms" Version="4.8.0.1821" />
57+
<PackageReference Include="Xamarin.Essentials" Version="1.6.0" />
5858
<PackageReference Include="Xamarin.Build.Download">
5959
<Version>0.10.0</Version>
6060
</PackageReference>
@@ -110,6 +110,18 @@
110110
<AndroidResource Include="Resources\mipmap-xxhdpi\launcher_foreground.png" />
111111
<AndroidResource Include="Resources\mipmap-xxxhdpi\icon.png" />
112112
<AndroidResource Include="Resources\mipmap-xxxhdpi\launcher_foreground.png" />
113+
<AndroidResource Include="Resources\drawable\arrow.png">
114+
<SubType></SubType>
115+
<Generator></Generator>
116+
</AndroidResource>
117+
<AndroidResource Include="Resources\drawable\history.png">
118+
<SubType></SubType>
119+
<Generator></Generator>
120+
</AndroidResource>
121+
<AndroidResource Include="Resources\drawable\user.png">
122+
<SubType></SubType>
123+
<Generator></Generator>
124+
</AndroidResource>
113125
</ItemGroup>
114126
<ItemGroup>
115127
<Folder Include="Resources\drawable\" />

TimeTrackerTutorial.iOS/TimeTrackerTutorial.iOS.csproj

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,8 @@
136136
<Reference Include="System.Numerics.Vectors" />
137137
</ItemGroup>
138138
<ItemGroup>
139-
<PackageReference Include="Xamarin.Forms" Version="4.4.0.991265" />
140-
<PackageReference Include="Xamarin.Essentials" Version="1.3.1" />
139+
<PackageReference Include="Xamarin.Forms" Version="4.8.0.1821" />
140+
<PackageReference Include="Xamarin.Essentials" Version="1.6.0" />
141141
<PackageReference Include="Xamarin.Firebase.iOS.Auth">
142142
<Version>6.2.1.2</Version>
143143
</PackageReference>
@@ -171,5 +171,8 @@
171171
</ItemGroup>
172172
<ItemGroup>
173173
<BundleResource Include="GoogleService-Info.plist" />
174+
<BundleResource Include="Resources\arrow.png" />
175+
<BundleResource Include="Resources\history.png" />
176+
<BundleResource Include="Resources\user.png" />
174177
</ItemGroup>
175178
</Project>

TimeTrackerTutorial/App.xaml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,7 @@
77
<Application.Resources>
88
<!-- Colors -->
99
<Color x:Key="PrimaryHeaderColor">#01A9DB</Color>
10+
<Color x:Key="GradientStartColor">#00BFFF</Color>
11+
<Color x:Key="GradientEndColor">#086A87</Color>
1012
</Application.Resources>
1113
</Application>

TimeTrackerTutorial/AssemblyInfo.cs

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
1+
using Xamarin.Forms;
12
using Xamarin.Forms.Xaml;
23

3-
[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
4+
[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
5+
6+
[assembly: ExportFont("Nunito-Black.ttf")]
7+
[assembly: ExportFont("Nunito-BlackItalic.ttf")]
8+
[assembly: ExportFont("Nunito-Bold.ttf")]
9+
[assembly: ExportFont("Nunito-BoldItalic.ttf")]
10+
[assembly: ExportFont("Nunito-ExtraBold.ttf")]
11+
[assembly: ExportFont("Nunito-ExtraBoldItalic.ttf")]
12+
[assembly: ExportFont("Nunito-ExtraLight.ttf")]
13+
[assembly: ExportFont("Nunito-ExtraLightItalic.ttf")]
14+
[assembly: ExportFont("Nunito-Italic.ttf")]
15+
[assembly: ExportFont("Nunito-Light.ttf")]
16+
[assembly: ExportFont("Nunito-LightItalic.ttf")]
17+
[assembly: ExportFont("Nunito-Regular.ttf")]
18+
[assembly: ExportFont("Nunito-SemiBold.ttf")]
19+
[assembly: ExportFont("Nunito-SemiBoldItalic.ttf")]

TimeTrackerTutorial/Pages/LoginPage.xaml

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,26 @@
44
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
55
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
66
xmlns:views="clr-namespace:TimeTrackerTutorial.Views" mc:Ignorable="d"
7+
NavigationPage.HasNavigationBar="False"
8+
xmlns:skViews="clr-namespace:TimeTrackerTutorial.Views.SKViews"
79
x:Class="TimeTrackerTutorial.Pages.LoginPage">
810
<ContentPage.Content>
9-
<StackLayout>
10-
<!-- App Icon -->
11-
<Image WidthRequest="200" Aspect="AspectFit"
12-
HorizontalOptions="Center" Margin="20"
13-
Source="{Binding Icon}" />
14-
<!-- Login Options -->
15-
<views:LoginOptionView BindingContext="{Binding LoginEmailViewModel}" />
16-
<views:LoginOptionView BindingContext="{Binding LoginPhoneViewModel}" />
17-
</StackLayout>
11+
<Grid>
12+
<skViews:RectGradientView StartColor="{StaticResource GradientStartColor}"
13+
EndColor="{StaticResource GradientEndColor}"
14+
VerticalOptions="FillAndExpand" />
15+
<StackLayout>
16+
<!-- App Icon -->
17+
<Image WidthRequest="200" Aspect="AspectFit"
18+
HorizontalOptions="Center" Margin="20,80,20,20"
19+
Source="history" />
20+
<!-- Login Options -->
21+
<Entry BackgroundColor="Transparent" TextColor="White"
22+
PlaceholderColor="#6FFF" Opacity="0.6"
23+
Placeholder="email" FontFamily="Nunito-Regular" />
24+
<views:LoginOptionView BindingContext="{Binding LoginEmailViewModel}" />
25+
<views:LoginOptionView BindingContext="{Binding LoginPhoneViewModel}" />
26+
</StackLayout>
27+
</Grid>
1828
</ContentPage.Content>
1929
</ContentPage>

TimeTrackerTutorial/TimeTrackerTutorial.csproj

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@
1111
</PropertyGroup>
1212

1313
<ItemGroup>
14-
<PackageReference Include="Xamarin.Forms" Version="4.4.0.991265" />
15-
<PackageReference Include="Xamarin.Essentials" Version="1.3.1" />
14+
<PackageReference Include="Xamarin.Forms" Version="4.8.0.1821" />
15+
<PackageReference Include="Xamarin.Essentials" Version="1.6.0" />
16+
<PackageReference Include="SkiaSharp.Views.Forms" Version="2.80.2" />
1617
</ItemGroup>
1718

1819
<ItemGroup>
@@ -21,8 +22,28 @@
2122
<Folder Include="Services\Work\" />
2223
<Folder Include="Services\Statement\" />
2324
<Folder Include="Views\Labels\" />
25+
<Folder Include="Fonts\" />
26+
<Folder Include="Views\SKViews\" />
27+
<Folder Include="Views\SKViews\Base\" />
28+
<Folder Include="Views\Entries\" />
2429
</ItemGroup>
2530

31+
<ItemGroup>
32+
<EmbeddedResource Include="Fonts\Nunito-Black.ttf" />
33+
<EmbeddedResource Include="Fonts\Nunito-BlackItalic.ttf" />
34+
<EmbeddedResource Include="Fonts\Nunito-Bold.ttf" />
35+
<EmbeddedResource Include="Fonts\Nunito-BoldItalic.ttf" />
36+
<EmbeddedResource Include="Fonts\Nunito-ExtraBold.ttf" />
37+
<EmbeddedResource Include="Fonts\Nunito-ExtraBoldItalic.ttf" />
38+
<EmbeddedResource Include="Fonts\Nunito-ExtraLight.ttf" />
39+
<EmbeddedResource Include="Fonts\Nunito-ExtraLightItalic.ttf" />
40+
<EmbeddedResource Include="Fonts\Nunito-Italic.ttf" />
41+
<EmbeddedResource Include="Fonts\Nunito-Light.ttf" />
42+
<EmbeddedResource Include="Fonts\Nunito-LightItalic.ttf" />
43+
<EmbeddedResource Include="Fonts\Nunito-Regular.ttf" />
44+
<EmbeddedResource Include="Fonts\Nunito-SemiBold.ttf" />
45+
<EmbeddedResource Include="Fonts\Nunito-SemiBoldItalic.ttf" />
46+
</ItemGroup>
2647
<ItemGroup>
2748
<EmbeddedResource Update="Pages\DashboardPage.xaml">
2849
<Generator>MSBuild:UpdateDesignTimeXaml</Generator>
@@ -46,4 +67,20 @@
4667
<Generator>MSBuild:UpdateDesignTimeXaml</Generator>
4768
</EmbeddedResource>
4869
</ItemGroup>
70+
<ItemGroup>
71+
<None Remove="Fonts\Nunito-Black.ttf" />
72+
<None Remove="Fonts\Nunito-BlackItalic.ttf" />
73+
<None Remove="Fonts\Nunito-Bold.ttf" />
74+
<None Remove="Fonts\Nunito-BoldItalic.ttf" />
75+
<None Remove="Fonts\Nunito-ExtraBold.ttf" />
76+
<None Remove="Fonts\Nunito-ExtraBoldItalic.ttf" />
77+
<None Remove="Fonts\Nunito-ExtraLight.ttf" />
78+
<None Remove="Fonts\Nunito-ExtraLightItalic.ttf" />
79+
<None Remove="Fonts\Nunito-Italic.ttf" />
80+
<None Remove="Fonts\Nunito-Light.ttf" />
81+
<None Remove="Fonts\Nunito-LightItalic.ttf" />
82+
<None Remove="Fonts\Nunito-Regular.ttf" />
83+
<None Remove="Fonts\Nunito-SemiBold.ttf" />
84+
<None Remove="Fonts\Nunito-SemiBoldItalic.ttf" />
85+
</ItemGroup>
4986
</Project>
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
using System;
2+
using SkiaSharp;
3+
using SkiaSharp.Views.Forms;
4+
using Xamarin.Forms;
5+
6+
namespace TimeTrackerTutorial.Views.SKViews.Base
7+
{
8+
public abstract class GradientViewBase : SKViewBase
9+
{
10+
public static readonly BindableProperty StartColorProperty = BindableProperty.Create(
11+
nameof(StartColor), typeof(Color), typeof(GradientViewBase), Color.White);
12+
public static readonly BindableProperty EndColorProperty = BindableProperty.Create(
13+
nameof(EndColor), typeof(Color), typeof(GradientViewBase), Color.White);
14+
15+
public Color StartColor
16+
{
17+
get => (Color)GetValue(StartColorProperty);
18+
set => SetValue(StartColorProperty, value);
19+
}
20+
21+
public Color EndColor
22+
{
23+
get => (Color)GetValue(EndColorProperty);
24+
set => SetValue(EndColorProperty, value);
25+
}
26+
27+
public GradientViewBase()
28+
{
29+
}
30+
31+
protected override void OnPaintSurface(SKImageInfo info, SKCanvas canvas, SKPaint paint)
32+
{
33+
paint.Shader = SKShader.CreateLinearGradient(
34+
new SKPoint(info.Width / 2, 0), // start point (top middle)
35+
new SKPoint(info.Width / 2, info.Height), // end point (bottom middle)
36+
new SKColor[] { StartColor.ToSKColor(), EndColor.ToSKColor() },
37+
new float[] { 0, 1 },
38+
SKShaderTileMode.Repeat);
39+
40+
DrawGradient(info, canvas, paint);
41+
}
42+
43+
protected abstract void DrawGradient(SKImageInfo info, SKCanvas canvas, SKPaint paint);
44+
}
45+
}
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
using System;
2+
using SkiaSharp;
3+
using SkiaSharp.Views.Forms;
4+
using Xamarin.Forms;
5+
6+
namespace TimeTrackerTutorial.Views.SKViews.Base
7+
{
8+
public abstract class SKViewBase : ContentView
9+
{
10+
public SKViewBase()
11+
{
12+
var canvas = new SKCanvasView();
13+
canvas.PaintSurface += Canvas_PaintSurface;
14+
Content = canvas;
15+
}
16+
17+
protected abstract void OnPaintSurface(SKImageInfo info, SKCanvas canvas, SKPaint paint);
18+
19+
private void Canvas_PaintSurface(object sender, SKPaintSurfaceEventArgs e)
20+
{
21+
SKImageInfo info = e.Info;
22+
SKCanvas canvas = e.Surface.Canvas;
23+
24+
canvas.Clear();
25+
26+
using (var paint = new SKPaint())
27+
{
28+
OnPaintSurface(info, canvas, paint);
29+
}
30+
}
31+
}
32+
}

0 commit comments

Comments
 (0)