Posted on May 20, 2018
Useful Developer Tools #10: Open folders in Visual Studio Code right from Finder in macOS
If you work with Visual Studio Code on a Mac, you might benefit from an easy way to directly open the current Finder folder in the Editor. While Windows users have an “Open in Visual Studio Code” option in their right-click context menu, macOS users are missing that feature. Sertaç Özercan created a neat little open-source macOS tool, which brings a new Finder button for this.
Updated on May 11, 2018
Microsoft Build 2018: App Innovation Highlights
From Monday to Wednesday, //build 2018 conference took place in Seattle. It’s in the nature of Microsoft’s largest and most important developer conference to announce a bunch of cool stuff and updates to their Cloud, AI, and Frontend developer tools and services. Here are my developer centric highlights summarized!
Microsoft Azure
Azure Cosmos DB: Multi-write regions and conflict resolution
You can now also define multiple write-regions for globally distributed Cosmos DB instances in order to boost write performance. Cosmos DB takes care of configurable synchronization and conflict resolution automatically and now also offers its comprehensive SLAs (<10ms response time at the 99th percentile) also for writes.
Azure Cosmos DB: Provisioning throughput on database level
While in the past throughput had to be configured and paid for on collection or table level, you can now share throughput units across a whole database so that multiple collections can share the reserved bandwidth.
Azure App Service: Multi-container support
If you want to benefit from isolated container environments, you can now also deploy multiple containers to a single Azure App Service instance. Great, if you separate your app into microservice but don’t need the massive scale and management capabilities of Service Fabric.
Azure App Service: Linux support for App Service Environment
You can now also choose Linux as the operating system for your App Services that run in an App Service Environment to benefit from a better Node.js performance and smaller container sizes for example.
Azure Functions: Durable Functions
Serverless Azure Functions are designed to get executed for a short time and fall asleep once finished. But what if a Functions calls another service and has to wait some time for its answer? This problem gets solved by Durable Functions. Those can now save their state when sending a request, fall asleep and wake up where you left them once the external task has been completed.
Service Fabric: Azure Service Fabric Mesh announced
Azure Service Fabric Mesh offers the same reliability, mission-critical performance and scale customers get with Service Fabric, but no more overhead of cluster management and patching operations. Serverless for highly available, cloud-native applications with stateful services.
Azure Search: Cognitive Search
By integrating Cognitive Services Vision APIs into Azure Search, it is now capable of also indexing images and letting users search for objects, celebrities, landmarks, and text in images.
AI and Machine Learning
Cognitive Services: Content Moderator Human Review Tool
Content Moderator offers machine-assisted content moderation and human review tool. It now offers text classification to flag potentially adult, racy and offensive content and human review capabilities for text and video moderation insights.
Cognitive Services: Custom Vision Object Recognition
Custom Vision now supports custom object recognition as well. Developers can now use Custom Vision to train models that can recognize the precise location of specific objects in images. In addition, developers can now download Custom Vision models in three formats: TensorFlow, CoreML, and ONNX.
Cognitive Services: Language Understanding Intelligent Service (LUIS) speech integration
Beside text, LUIS can now also interpret speech natively and tries to find intends of spoken and written words, which is great for personal voice assistants or dictations.
Developer Tools
Visual Studio App Center: GitHub CI Integration
GitHub announced the integration of Visual Studio App Center into their marketplace for Pull Request checks so you can now let App Center build other’s Pull Requests to ensure continuous integration.
Visual Studio for Mac: Update to 7.5
A couple of new cool things like Editorconf support, new .NET Standard project templates for Xamarin, TypeScript and Razor Pages support and a preview for TFVC integration have arrived.
Visual Studio: Hyper-V Android emulator support
Microsoft contributed to the official Google Android emulator which is now compatible with Hyper-V. This enables developers with Hyper-V enabled on their machines to use a hardware accelerated Android emulator, without needing to switch to Intel’s HAXM hypervisor.
.NET Core: .NET Core 3.0 announced
.NET Core 3.0, the next major version of .NET Core, expands supported workloads to Windows desktops and brings Windows Presentation Foundation, Windows Forms, and Universal Windows Platform app frameworks to .NET Core.
Xamarin: Update to Xamarin.Forms 3.0
The new major version of Xamarin.Forms is out and stable, and brings new features like a Visual State manager that reacts on window size and orientation changes, a Flex Layout control, Right-To-Left Localization and lots of community contributions.
Xamarin: Live Reload for Xamarin.Forms
Xamarin Live Reload enables you to make changes to your XAML and see them reflected live, without requiring another compile and deploy. This speeds up Xamarin.Forms development and because apps are compiled when using Live Reload, it works with all libraries and third-party controls.
Visual Studio: Live Share
When working remotely, you can now share a full Visual Studio session with all files, outputs and Debug information live with other Visual Studio users that can edit the code simultaneously, which brings remote pair programming to a whole new level.
What else?
During the conference, there have been a lot of smaller and bigger announcements across all sections of Microsoft. As this is just a selection what has been most important for me as an App Developer, you should also check out the full list of announcements and pick your highlights.
Also, make sure to watch and review recorded sessions and published content from the conference for diving deeper into all these topics.
We can make ethical AI choices possible for all developers. #MSBuild pic.twitter.com/wCgMKOpMxB
— Microsoft (@Microsoft) May 7, 2018
Updated on May 1, 2018
Easy tricks to boost the native Android integration of your cross-platform apps
Most mobile developers write their Mobile Apps on a Mac, which makes it super easy to quickly test them in the iOS Simulator. Naturally, this results in prettier iOS than Android apps, as we see discover flaws on iOS more often. Using an Android Emulator mostly, is not an option, as the Android world is diverse and fragmented.
Show your Android users some love!
Here are some easy tricks to boost the look and feel of our App’s integration into the Android ecosystem and their OEMs peculiarities.
1. Set the on-screen Navigation Bar color
Many Android devices show the Home, Back and Recent Apps buttons on the screen in the Navigation Bar. You can change this color easily to adjust it to your app’s UI by setting it in the styles.xml file.
|
1 2 |
<!-- Set on-screen Navigation Bar color --> <item name="android:navigationBarColor">#000000</item> |
Some Samsung Devices like the Galaxy S8 have this set to a very light gray by default, which can look strange on your App.
2. Optimize aspect ratio for full-screen mode
By default, most Android Applications serve a 16:9 aspect ratio and are optimized for it. Xamarin.Forms, for example, does that. Nowadays, manufacturers like Samsung and LG also release devices with a different aspect ratio, which results in nasty bars under your apps.
If you trust your apps to also work fine on wider screens, simply allow your app to expand to those inside the <application> tag of your AndroidManifest.xml file.
|
1 2 3 4 5 6 |
<application android:label="Field Service"> <!-- Optimize Aspect Ratio for Samsung, LG etc. full-screen mode --> <meta-data android:name="android.max_aspect" android:value="2.1" /> <!-- ... --> </application> |
3. Adaptive Launcher Icons
With Android 8.0, OEMs have been given the free choice in which shape to display your app icon. While pure Android versions like the one on Google Pixel display icons with a round background, LG and Samsung choose squares with round corners. Android’s Adaptive Icons technique lets you design your icon in an adjustable way.
If you don’t update your launcher icon with the necessary layers, the icon doesn’t look consistent with other icons that the system UI displays.
Android Asset Studio, which comes with Android Studio offers a nice and simple way of generating these Adaptive Icons by defining a foreground layer (the icon) and a background layer (the shape color). It also generates legacy icons for older Android versions.
This generates you a bunch of XML described icon combinations, that you can import to your project. Make sure, to set the new adaptive icons in your AndroidManifest.xml file.
|
1 2 3 4 5 6 |
<application android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round"> <!-- ... --> </application> |
When using Xamarin, you can simply set the Icon and RoundIcon Properties in the [Activity] tag of your MainActivity.cs file.
If you want to take a look at the full project code, you can find it at the Mobile Cloud Workshop repository. Do you know some additional Android tips and tricks that should be added to this list? Leave a comment and have fun enhancing your Android apps!
Updated on April 23, 2018
My favorite offline Mobile Games for traveling
I have always been into gaming but decreasingly find the time for it. As I travel for work quite often, airplanes are the only place where I can calm down and really spend some time playing video games. Personally, I am not too much into Jump n’ Runs or Puzzle Games, I want a story to be told.
As most Mobile Games nowadays require Internet Access, I have created a list of my personal favorites to play in airplanes.
1. Thimbleweed Park
Clear number one and my absolute favorite game I played on the road is Ron Gilbert’s Thimbleweed Park. I played it on my iPad on a trip from Munich to Seattle and still was not even half finished after the flight. It tells a sweet little story from multiple characters’ different perspectives, has some nice riddles and a hilarious humor!
If you liked Monkey Island and can laugh about Ron Gilbert’s strange humor, Thimbleweed Part is a must-play for you!
The handling is extremely well optimized for touch displays and it is easy to play with one finger when putting it down on the foldable table which gives you a free hand for beer!
iTunes ($19.99) | Google Play ($9.99) | Nintendo Switch ($19.99)
2. This War Of Mine
The cold grimace of war, playable in the role of survivors and civilians who are looking for shelter and have to live together under extreme conditions and extreme danger. This game is deep, intense and gives you the creeps. Goosebump moments guaranteed. It sounds wrong to say that I enjoyed this game but it was an experience, I don’t want to miss.
iTunes ($14.99) | Google Play ($11.99)
3. INSIDE
You might have played LIMBO already as it is an absolute classic. INSIDE is the next game from Playdead Studios with a similar gameplay but all-new elements. Again, you play a young boy drawn into the center of a dark project that you start to explore more and more after time. You are hunted, you are alone and you will die. Often. Over and over again. But that is part of the game.
You feel being haunted constantly fear while playing INSIDE. If you enjoyed the minimalistic style of LIMBO, you wiill like this game as much as I did.
Interesting, that this game is able to tell its full story without any spoken or printed text. Although you die so often, the motivation never dies to solve these puzzles.
iTunes ($6.99), Free Trial
4. Plague Inc.
Ever wanted to be a virus and extinguish the population of the word? No? Thank god, me neither. But in Plague Inc. you do exactly that. And being a virus is hard, strategic and turns out a lot of fun. Depending on the region where you break out, you have to develop different bacterial resistances, choose between symptoms and when to develop them and need a plan on how to travel around the world. But be careful, once you got detected, research will start to work against you. A clever and fun game that doesn’t need 100% attention all the time and can be played on the side.
iTunes ($0.99) | Google Play ($0.82)
5. Prison Architect
It’s exactly what you think it is after reading the title: Roller Coaster Tycoon for prisons. You are the director of a prison and have to build walls, cells, showers, and yards, and hire the right staff like guards and cleaners. Once the first prisoners arrive you will be faced with the common craziness of running a prison and have to solve all it’s problem while always growing economically.
iTunes ($14.99) | Google Play ($14.99), Free Trial
Updated on March 9, 2018
FlexButton: A super flexible button control for Xamarin.Forms
Although Xamarin.Forms includes a Button control with quite a few ways to customize its layout, I needed a more flexible button for a side project, that required two things the default implementation could not deliver: A round shape and a way to catch when a user presses and releases the button and for how long. So I ended up with creating a new control and contribute it to the community.
What does it do differently?
The FlexButton control I wrote, supports events for different states, color overlays and adjustable shapes and paddings. You can define if you want text, an icon or both in your button, which color they should have in normal- and pressed state, which size, padding or border-radius it should have and more.
For more details, bug reports and feature request, please check out the GitHub Repository. You will also find a sample project to play around with.
If you want to use it in your projects, simply add the NuGet package to your Xamarin.Forms project and add the control to your XAML layout.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<flex:FlexButton xmlns:flex="clr-namespace:Flex.Controls;assembly=Flex" WidthRequest="76" HeightRequest="76" CornerRadius="38" HorizontalOptions="Center" Icon="lightbulb.png" ForegroundColor="#ffffff" HighlightForegroundColor="#49516F" BackgroundColor="#6279B8" HighlightBackgroundColor="#8EA4D2" TouchedDown="DemoButton_TouchedDown" TouchedUp="DemoButton_TouchedUp"/> |
Posted on December 23, 2017
Useful Developer Tools #9: Clean and Zip .NET projects from Finder
If you develop .NET projects, particularly in the Xamarin world, you might find yourself cleaning your projects (delete /bin and /obj folders) from time to time by hand. Especially, when you plan to send code to others as a compressed .zip file, you might want to remove those folders beforehand.
The amazing Colby L. Williams created a Finder extension for macOS, that does exactly that for you. Simply right-click a folder and select Services -> Clean to get rid of all /bin and /obj folders of its descendants or Services -> Clean & Compress to do the same and zip it afterwards.
Updated on January 22, 2018
Enable and control iOS 11 Large Titles in Xamarin.Forms
With iOS 11, Apple introduced a bunch of new design elements to its mobile platform. One of them are larger titles, that sit in the Navigation Bar and can be scrolled away when more space is needed. Large Titles can be enabled with a few lines of code in iOS. To use them with Xamarin.Forms, we need to extend the framework on our own, as the new titles are not officially supported yet.
UPDATE: With Xamarin.Forms 2.5, a platform-specific for Large Titles has been added. Read this post for further details.
Enable Large Titles
To add support for Large Titles in Xamarin.Forms all we need to do is overriding the existing NavigationRenderer and enable Large Titles application-wide. Simply add this Renderer to your iOS project and they will be shown everywhere.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
[assembly: ExportRenderer(typeof(NavigationPage), typeof(CustomNavigationRenderer))] namespace LargeTitles.Forms.iOS.CustomRenderers { public class CustomNavigationRenderer : NavigationRenderer { protected override void OnElementChanged(VisualElementChangedEventArgs e) { base.OnElementChanged(e); // Enables iOS 11 new Large Titles system-wide if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0)) { // Enable Large Titles NavigationBar.PrefersLargeTitles = true; // Adopt same TextAttributes as for normal titles, beacuse Xamarin.Forms NavigationPage // does not have a dedicated property for this yet UINavigationBar.Appearance.LargeTitleTextAttributes = new UIStringAttributes { ForegroundColor = (Element as NavigationPage)?.BarTextColor.ToUIColor() }; } } } } |
Control when to display Large Titles
Being in control of when to display the new titles or not is a nice feature as they totally do not make sense on every page and this gives us more flexibility on when and where to use them.
Unfortunately, Xamarin.Forms is struggling with the new Large Titles and bottom offsets sometimes, especially when combined with a TabbedPage. So we need a way to switch them off manually for each page.
Extend Content Page
For this, create a new type of ContentPage in your Xamarin.Forms project, that is aware of Large Titles and offers a property to switch them on and off manually.
|
1 2 3 4 5 6 7 8 9 10 11 |
namespace LargeTitles.Forms.Controls { public class ModernContentPage : ContentPage { /// <summary> /// Property for iOS 11 new Large Titles /// </summary> /// <value><c>true</c> if should have large title; otherwise, <c>false</c>.</value> public bool HasLargeTitle { get; set; } } } |
Every page, that should be able to switch off large titles (we enable them by default in the Custom Renderer above), must now be type of our newly created page. This has to be declared in XAML…
|
1 2 3 4 5 6 7 8 9 10 11 |
<controls:ModernContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:controls="clr-namespace:LargeTitles.Forms.Controls;assembly=LargeTitles.Forms" x:Class="LargeTitles.Forms.Pages.TestPage" Title="Hello World" HasLargeTitle="false"> <!-- ... --> </controls:ModernContentPage> |
… and the code-behind as well.
|
1 |
public partial class TestPage : ModernContentPage |
Add a Custom Renderer
All we need now is a Custom Renderer for the new page, that respects the HasLargeTitle property and sets the in iOS 11 introduced LargeTitleDisplayMode property accordingly. Create a new Custom Renderer in the iOS project and expose it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
[assembly: ExportRenderer(typeof(ModernContentPage), typeof(ModernContentPageRenderer))] namespace LargeTitles.Forms.iOS.CustomRenderers { public class ModernContentPageRenderer : PageRenderer { public override void ViewWillAppear(bool animated) { base.ViewWillAppear(animated); // Check, if iOS 11 Large Title shall be displayed or not if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0)) { if ((Element as ModernContentPage)?.HasLargeTitle == true) NavigationController.TopViewController.NavigationItem.LargeTitleDisplayMode = UINavigationItemLargeTitleDisplayMode.Always; else NavigationController.TopViewController.NavigationItem.LargeTitleDisplayMode = UINavigationItemLargeTitleDisplayMode.Never; } } } } |
Et voilà! With 12 lines of code, Xamarin.Forms becomes capable of using the new Large Titles and looks nice and modern for Apple’s new version of iOS.
Posted on October 8, 2017
Swipecards: A Tinder-like swipe control for Xamarin.Forms
For a side-project of mine, I created a Xamarin.Forms control, that lets the user wipe away cards in different directions, similar to the popular Tinder app.
The control is still work in progress and will be extended over time, but I decided to publish the current version as it was good enough to go into production for my project. Feel free to use it, contribute and provide feedback! It supports fully customizable ItemTemplates and Data Binding for most properties.
Take a look at the GitHub Repository for further details and a full API-reference. You will also find a sample project to play around with.
If you want to use it in your projects, simply add the NuGet package to your Xamarin.Forms project and add the control in your XAML layout.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<swipecards:CardStackView xmlns:swipecards="clr-namespace:SwipeCards.Controls;assembly=SwipeCards.Controls" x:Name="CardStackView" ItemsSource="{Binding Cards}" SwipedLeftCommand="{Binding SwipedLeft}"> <swipecards:CardStackView.ItemTemplate> <DataTemplate> <Label Text="{Binding}" VerticalOptions="Center" HorizontalOptions="Center" /> </DataTemplate> </swipecards:CardStackView.ItemTemplate> </swipecards:CardStackView> |
Updated on March 9, 2018
Disable Visual Studio App Center when running on a Simulator, Emulator or Test Cloud device
When tracking usage statistics and crashes with Visual Studio App Center, you usually only want real-world data in there and filter out data that gets generated while developing or testing the app. To avoid sophisticated insights like those in the screenshot below, developers need to define, when Visual Studio App Center should track data and when it should not.
Analytics and crash data usually should not impact those statistics, when an app is
- Running in Debug Mode
- Running on a Simulator or Emulator
- Running in the Xamarin Test Cloud
Before starting the client analytics using the AppCenter.Start() method, we should scan the current environment to decide whether to run this command or not. For this, we implement a method on each platform, that scans if the current app environment is a real-world scenario.
You might want to check if the app is running on a Test Cloud device to avoid messed up UI Test from the Distribution Dialog and Denmark (where the Test Cloud devices live) as you most popular country in the statistics!
The App Center Test Cloud (formerly known as Xamarin Test Cloud) sets specific environment variables on its devices, that we can examine and use to check if the app is running on a test device.
Abstraction
Creating an interface for the small Environment Service helps to unify its implementations and usage within Dependency Injection.
|
1 2 3 4 |
public interface IEnvironmentService { bool IsRunningInRealWorld(); } |
iOS implementation
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
public class EnvironmentService : IEnvironmentService { public bool IsRunningInRealWorld() { // Check if running in Debug Mode #if DEBUG return false; #endif // Check if running on a Simulator if (Runtime.Arch == Arch.SIMULATOR) return false; // Check if running in the Test Cloud if (Environment.GetEnvironmentVariable("XAMARIN_TEST_CLOUD") != null) return false; return true; } } |
Android implementation
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
public class EnvironmentService : IEnvironmentService { public bool IsRunningInRealWorld() { #if DEBUG return false; #endif // Check if running on an Emulator if (Build.Fingerprint.Contains("vbox") || Build.Fingerprint.Contains("generic")) return false; // Check if running in the Test Cloud if (System.Environment.GetEnvironmentVariable("XAMARIN_TEST_CLOUD") != null) return false; return true; } } |
Add the real-world check before starting to track analytics
Before starting the App Center service now, we can simply fire an EnvironmentService.IsRunningInRealWorld() check and only proceed if it is positive.
|
1 2 3 4 5 6 |
// Only start Visual Studio App Center when running in a real-world scenario var environment = new EnvironmentService(); if (environment.IsRunningInRealWorld()) { AppCenter.Start("YOUR_SECRET", typeof(Analytics), typeof(Crashes)); } |
Xamarin.Forms
If you are using Xamarin.Forms, just register the platform implementations at the built-in Dependency Service.
|
1 2 3 4 5 6 7 8 |
[assembly: Xamarin.Forms.Dependency(typeof(EnvironmentService))] namespace Something { public class EnvironmentService : IEnvironmentService { // ... } } |
Now you can call the environment service in the App.xaml.cs like below.
|
1 |
var environment = DependencyService.Get<IEnvironmentService>(); |
This should avoid having sophisticated Development and Testing data in you Visual Studio Mobile Center Analytics and Crashes section.
Enjoy the cleaned up dashboards!
Updated on April 9, 2017
Useful Developer Tools #8: Colormind
A while ago, I wrote about the Adobe Color Wheel here, which helps design noobies to create a color scheme for their product using colors that fit together. The challenge with Color Wheel is, that you still need a “feeling” for colors to create a good looking scheme.
Colormind goes one step further and literally generates you a complete color scheme without having the user know anything about colors. It also offers pre-defined schemes for Christmas, Spring and more. When you are struggling with color schemes, colormind.io might be something for you!