Skip to content

Commit f3f5602

Browse files
davidortinaudavidortinau
committed
challenge setup, readme, let's do this!
1 parent aac45f9 commit f3f5602

File tree

74 files changed

+13289
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+13289
-2
lines changed

‎.gitignore‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Autosave files
2+
*~
3+
4+
# build
5+
[Oo]bj/
6+
[Bb]in/
7+
packages/
8+
TestResults/
9+
10+
# globs
11+
Makefile.in
12+
*.DS_Store
13+
*.sln.cache
14+
*.suo
15+
*.cache
16+
*.pidb
17+
*.userprefs
18+
*.usertasks
19+
config.log
20+
config.make
21+
config.status
22+
aclocal.m4
23+
install-sh
24+
autom4te.cache/
25+
*.user
26+
*.tar.gz
27+
tarballs/
28+
test-results/
29+
Thumbs.db
30+
.vs/
31+
32+
# Mac bundle stuff
33+
*.dmg
34+
*.app
35+
36+
# resharper
37+
*_Resharper.*
38+
*.Resharper
39+
40+
# dotCover
41+
*.dotCover

‎README.md‎

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,53 @@
1-
# VisualChallenge
2-
Use the new Xamarin.Forms View.Visual to implement a single page
1+
# Visual Challenge
2+
3+
To take a single page design from a previous project that should look the same on iOS and Android, and attempt to recreate it using the latest Visual feature of Xamarin.Forms.
4+
5+
## Challenge Quick Start
6+
7+
This is testing **Visual**, not your prowess as a mobile developer. I want to learn how successful you are when using this new feature. Or not.
8+
9+
1. Fork this repository
10+
2. Choose a single page design from a previous or current project to recreate from scratch. The more real world the better. Plus, you can reuse assets.
11+
3. Open `VisualChallengePage.xaml`. Take an hour (or more if you really want to) and build that screen. Making it super functional doesn't matter, just how it looks and feels.
12+
4. Submit a pull request of your progress back to this repository. Include:
13+
- a screenshot of iOS and Android
14+
- your feedback on what went well, and what didn't
15+
- what you would like to see us doing differently in support of this goal: same design on iOS and Android
16+
17+
18+
# What is Visual?
19+
20+
Visual is a new way to declare the "visual" design system you want rendering your native controls. By default, controls are renderered the way Apple and Google created them. With Visual, you can choose Material as the design system that will then render the same on iOS and Android.
21+
22+
For example, this sample app sets the Visual preference on the application `Shell` and it is propogated to all controls in the application.
23+
24+
```
25+
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
26+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
27+
xmlns:local="clr-namespace:VisualChallenge"
28+
RouteHost="companyname.com"
29+
RouteScheme="app"
30+
Route="VisualChallenge"
31+
FlyoutBehavior="Disabled"
32+
Title="VisualChallenge"
33+
x:Class="VisualChallenge.AppShell"
34+
Visual="Material">
35+
```
36+
37+
Any control may override this propogation by delcaring its own Visual preference:
38+
39+
```
40+
<Button Visual="Default" ... />
41+
```
42+
43+
> **More than Styles:** Visual goes beyond styling the controls, to also unifying behavior and layout. This is work you may often do yourself when achieving the same look and feel between iOS and Android.
44+
45+
46+
Read more about this at [https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual).
47+
48+
## What is Material?
49+
50+
Material is Google's modern design system that is popular not only on Android, but has lately found its way to iOS and the Web also. Google publishes a package of Material controls for iOS, and that's the starting point for the Xamarin.Forms native control renderers when you selected `Visual="Material"`.
51+
52+
For more information, visit [material.io](https://material.io/).
53+

‎VisualChallenge.sln‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 16
4+
VisualStudioVersion = 16.0.28527.54
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "VisualChallenge.Android", "VisualChallenge\VisualChallenge.Android\VisualChallenge.Android.csproj", "{164F8568-3F55-464E-BF3F-43E085FB0BEF}"
7+
EndProject
8+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "VisualChallenge.iOS", "VisualChallenge\VisualChallenge.iOS\VisualChallenge.iOS.csproj", "{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}"
9+
EndProject
10+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "VisualChallenge", "VisualChallenge\VisualChallenge\VisualChallenge.csproj", "{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}"
11+
EndProject
12+
Global
13+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
14+
Debug|Any CPU = Debug|Any CPU
15+
Debug|iPhone = Debug|iPhone
16+
Debug|iPhoneSimulator = Debug|iPhoneSimulator
17+
Release|Any CPU = Release|Any CPU
18+
Release|iPhone = Release|iPhone
19+
Release|iPhoneSimulator = Release|iPhoneSimulator
20+
EndGlobalSection
21+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
22+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
23+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Debug|Any CPU.Build.0 = Debug|Any CPU
24+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
25+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Debug|iPhone.ActiveCfg = Debug|Any CPU
26+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Debug|iPhone.Build.0 = Debug|Any CPU
27+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Debug|iPhone.Deploy.0 = Debug|Any CPU
28+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Debug|iPhoneSimulator.ActiveCfg = Debug|Any CPU
29+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Debug|iPhoneSimulator.Build.0 = Debug|Any CPU
30+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Debug|iPhoneSimulator.Deploy.0 = Debug|Any CPU
31+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Release|Any CPU.ActiveCfg = Release|Any CPU
32+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Release|Any CPU.Build.0 = Release|Any CPU
33+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Release|Any CPU.Deploy.0 = Release|Any CPU
34+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Release|iPhone.ActiveCfg = Release|Any CPU
35+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Release|iPhone.Build.0 = Release|Any CPU
36+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Release|iPhone.Deploy.0 = Release|Any CPU
37+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Release|iPhoneSimulator.ActiveCfg = Release|Any CPU
38+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Release|iPhoneSimulator.Build.0 = Release|Any CPU
39+
{164F8568-3F55-464E-BF3F-43E085FB0BEF}.Release|iPhoneSimulator.Deploy.0 = Release|Any CPU
40+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Debug|Any CPU.ActiveCfg = Debug|iPhoneSimulator
41+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Debug|Any CPU.Build.0 = Debug|iPhoneSimulator
42+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Debug|Any CPU.Deploy.0 = Debug|iPhoneSimulator
43+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Debug|iPhone.ActiveCfg = Debug|iPhone
44+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Debug|iPhone.Build.0 = Debug|iPhone
45+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Debug|iPhone.Deploy.0 = Debug|iPhone
46+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Debug|iPhoneSimulator.ActiveCfg = Debug|iPhoneSimulator
47+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Debug|iPhoneSimulator.Build.0 = Debug|iPhoneSimulator
48+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Debug|iPhoneSimulator.Deploy.0 = Debug|iPhoneSimulator
49+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Release|Any CPU.ActiveCfg = Release|iPhone
50+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Release|Any CPU.Build.0 = Release|iPhone
51+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Release|Any CPU.Deploy.0 = Release|iPhone
52+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Release|iPhone.ActiveCfg = Release|iPhone
53+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Release|iPhone.Build.0 = Release|iPhone
54+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Release|iPhone.Deploy.0 = Release|iPhone
55+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Release|iPhoneSimulator.ActiveCfg = Release|iPhoneSimulator
56+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Release|iPhoneSimulator.Build.0 = Release|iPhoneSimulator
57+
{728A2889-2E6F-4B3D-B2AC-57151FF2BC0F}.Release|iPhoneSimulator.Deploy.0 = Release|iPhoneSimulator
58+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
59+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Debug|Any CPU.Build.0 = Debug|Any CPU
60+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
61+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Debug|iPhone.ActiveCfg = Debug|Any CPU
62+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Debug|iPhone.Build.0 = Debug|Any CPU
63+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Debug|iPhone.Deploy.0 = Debug|Any CPU
64+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Debug|iPhoneSimulator.ActiveCfg = Debug|Any CPU
65+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Debug|iPhoneSimulator.Build.0 = Debug|Any CPU
66+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Debug|iPhoneSimulator.Deploy.0 = Debug|Any CPU
67+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Release|Any CPU.ActiveCfg = Release|Any CPU
68+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Release|Any CPU.Build.0 = Release|Any CPU
69+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Release|Any CPU.Deploy.0 = Release|Any CPU
70+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Release|iPhone.ActiveCfg = Release|Any CPU
71+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Release|iPhone.Build.0 = Release|Any CPU
72+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Release|iPhone.Deploy.0 = Release|Any CPU
73+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Release|iPhoneSimulator.ActiveCfg = Release|Any CPU
74+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Release|iPhoneSimulator.Build.0 = Release|Any CPU
75+
{DF343C5B-66F1-4EF5-B721-6246D8F1DC39}.Release|iPhoneSimulator.Deploy.0 = Release|Any CPU
76+
EndGlobalSection
77+
GlobalSection(SolutionProperties) = preSolution
78+
HideSolutionNode = FALSE
79+
EndGlobalSection
80+
GlobalSection(ExtensibilityGlobals) = postSolution
81+
SolutionGuid = {27C282EB-4B35-4EAD-B4E6-E20AEA2C7958}
82+
EndGlobalSection
83+
EndGlobal

‎VisualChallenge/VisualChallenge.Android/Assets/AboutAssets.txt‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Any raw assets you want to be deployed with your application can be placed in
2+
this directory (and child directories) and given a Build Action of "AndroidAsset".
3+
4+
These files will be deployed with you package and will be accessible using Android's
5+
AssetManager, like this:
6+
7+
public class ReadAsset : Activity
8+
{
9+
protected override void OnCreate (Bundle bundle)
10+
{
11+
base.OnCreate (bundle);
12+
13+
InputStream input = Assets.Open ("my_asset.txt");
14+
}
15+
}
16+
17+
Additionally, some Android functions will automatically load asset files:
18+
19+
Typeface tf = Typeface.CreateFromAsset (Context.Assets, "fonts/samplefont.ttf");

‎VisualChallenge/VisualChallenge.Android/MainActivity.cs‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
using System;
2+
3+
using Android.App;
4+
using Android.Content.PM;
5+
using Android.Runtime;
6+
using Android.Views;
7+
using Android.Widget;
8+
using Android.OS;
9+
10+
namespace VisualChallenge.Droid
11+
{
12+
[Activity(Label = "VisualChallenge", Icon = "@mipmap/icon", Theme = "@style/MainTheme.Launcher", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
13+
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
14+
{
15+
protected override void OnCreate(Bundle savedInstanceState)
16+
{
17+
TabLayoutResource = Resource.Layout.Tabbar;
18+
ToolbarResource = Resource.Layout.Toolbar;
19+
20+
//SetStatusBarColor(global::Android.Graphics.Color.Black);
21+
22+
base.OnCreate(savedInstanceState);
23+
24+
global::Xamarin.Forms.Forms.SetFlags("Shell_Experimental", "Visual_Experimental", "CollectionView_Experimental", "FastRenderers_Experimental");
25+
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
26+
LoadApplication(new App());
27+
}
28+
}
29+
}

‎VisualChallenge/VisualChallenge.Android/Properties/AndroidManifest.xml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.companyname.VisualChallenge" android:installLocation="auto">
3+
<uses-sdk android:minSdkVersion="21" android:targetSdkVersion="28" />
4+
<application android:label="VisualChallenge.Android"></application>
5+
</manifest>

‎VisualChallenge/VisualChallenge.Android/Properties/AssemblyInfo.cs‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
using System.Reflection;
2+
using System.Runtime.CompilerServices;
3+
using System.Runtime.InteropServices;
4+
using Android.App;
5+
6+
// General Information about an assembly is controlled through the following
7+
// set of attributes. Change these attribute values to modify the information
8+
// associated with an assembly.
9+
[assembly: AssemblyTitle("VisualChallenge.Android")]
10+
[assembly: AssemblyDescription("")]
11+
[assembly: AssemblyConfiguration("")]
12+
[assembly: AssemblyCompany("")]
13+
[assembly: AssemblyProduct("VisualChallenge.Android")]
14+
[assembly: AssemblyCopyright("Copyright © 2014")]
15+
[assembly: AssemblyTrademark("")]
16+
[assembly: AssemblyCulture("")]
17+
[assembly: ComVisible(false)]
18+
19+
// Version information for an assembly consists of the following four values:
20+
//
21+
// Major Version
22+
// Minor Version
23+
// Build Number
24+
// Revision
25+
//
26+
// You can specify all the values or you can default the Build and Revision Numbers
27+
// by using the '*' as shown below:
28+
// [assembly: AssemblyVersion("1.0.*")]
29+
[assembly: AssemblyVersion("1.0.0.0")]
30+
[assembly: AssemblyFileVersion("1.0.0.0")]
31+
32+
// Add some common permissions, these can be removed if not needed
33+
[assembly: UsesPermission(Android.Manifest.Permission.Internet)]
34+
[assembly: UsesPermission(Android.Manifest.Permission.WriteExternalStorage)]

‎VisualChallenge/VisualChallenge.Android/Resources/AboutResources.txt‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
Images, layout descriptions, binary blobs and string dictionaries can be included
2+
in your application as resource files. Various Android APIs are designed to
3+
operate on the resource IDs instead of dealing with images, strings or binary blobs
4+
directly.
5+
6+
For example, a sample Android app that contains a user interface layout (main.xml),
7+
an internationalization string table (strings.xml) and some icons (drawable-XXX/icon.png)
8+
would keep its resources in the "Resources" directory of the application:
9+
10+
Resources/
11+
drawable-hdpi/
12+
icon.png
13+
14+
drawable-ldpi/
15+
icon.png
16+
17+
drawable-mdpi/
18+
icon.png
19+
20+
layout/
21+
main.xml
22+
23+
values/
24+
strings.xml
25+
26+
In order to get the build system to recognize Android resources, set the build action to
27+
"AndroidResource". The native Android APIs do not operate directly with filenames, but
28+
instead operate on resource IDs. When you compile an Android application that uses resources,
29+
the build system will package the resources for distribution and generate a class called
30+
"Resource" that contains the tokens for each one of the resources included. For example,
31+
for the above Resources layout, this is what the Resource class would expose:
32+
33+
public class Resource {
34+
public class drawable {
35+
public const int icon = 0x123;
36+
}
37+
38+
public class layout {
39+
public const int main = 0x456;
40+
}
41+
42+
public class strings {
43+
public const int first_string = 0xabc;
44+
public const int second_string = 0xbcd;
45+
}
46+
}
47+
48+
You would then use R.drawable.icon to reference the drawable/icon.png file, or Resource.layout.main
49+
to reference the layout/main.xml file, or Resource.strings.first_string to reference the first
50+
string in the dictionary file values/strings.xml.

0 commit comments

Comments
 (0)