App Design - James Montemagno

Animate Anything with Xamarin.Forms

James Montemagno — Tue, 05 May 2020 17:41:37 GMT

I have been building apps with Xamarin.Forms for nearly 6 years now! I love how it has evolved over the years, added new controls, new features, and simplified everything with Shell. While I think I can build pretty decent apps in general, one thing that I have always struggled with is animations. The very first release of Xamarin.Forms had a built in animation system to fade, move, and scale any of the controls. These are great and there have been several videos on how to use these:

One thing that I always wanted.... was more control! On my Twitch stream a few weeks ago I was trying to spin a little icon that looped when I was submitting a friend request and it was brought to my attention that there is a full animation system built in to do just about anything you want.

To accomplish this, it requires a bit of code in the code behind using the Animation class.

readonly Animation rotation;

public SubmitFriendRequestPage()
{
    //..
    rotation = new Animation(v => LabelRotateIcon.Rotation = v, 0, 360);

    VM.PropertyChanged += OnPropertyChanged;
}

Here we create a new custom Animation. It takes in a a callback to set any properties to a value that will be increased over time. The next two parameters are the start and stop values. So here I am saying start playing the animation with the rotation starting at 0 and then stop when you reach 360.

Next, comes time to play the animation, which I do when my IsBusy property changes. The Animation class allows you to name and check an animation at any time, which is very nifty.

void OnPropertyChanged(object sender, PropertyChangedEventArgs e)
{
    if(e.PropertyName == nameof(VM.IsBusy))
    {
        if (!VM.IsBusy)
            this.AbortAnimation("rotate");
        else
            rotation.Commit(this, "rotate", 16, 1000, Easing.Linear, (v, c) => 			LabelRotateIcon.Rotation = 0, () => true);
    }
}

So, a few things happening here. First is AbortAnimation, which says hey if you are running "rotate" animation stop it. Next is Commit of the animation which will start it. Here I am saying the owner of the animation is the page, the name is "rotate", update very 16 milliseconds, run for 1000 milliseconds, and do linear easing on it. Now, the last two are functions, which are nice touches. The first is what to do when you finish (reset to 0) and then the last function is if you want to loop the animation!

That's it! Literally 3 lines of code to create, start, and stop the custom animation. For some reason I never knew this existed even though there have been a bunch of really cool libraries built on top of is such as Xamanimation.

To learn more about custom animations checkout the full documentation!

Xamarin.Forms Custom Fonts Simplified & Everywhere

James Montemagno — Sat, 02 May 2020 21:56:10 GMT

It was just about 1 year ago when I wrote about using font icons for images inside of Xamarin.Forms apps. Well time has flown by and now more than ever is the time to go all in on custom fonts and font icons because with Xamarin.Forms 4.6 everything got so much easier!

Custom fonts in Xamarin.Forms Shell

See my full walkthrough:

So, let's start off with the basics when it comes to fonts. You usually think about fonts as just a fancy way to display text. However, with resources such as Font Awesome you can use fonts as icons instead of images. Font Awesome provides a plethora of free font icons and the actual files are small at about 400KB for all 3 free that you can download from this link here. You can put them in Tabs, Labels, and Images, and they are awesome!

Previously there was a lot of setup required, but with Xamarin.Forms 4.6 embedded fonts you can now drag them into your .NET Standard project in Visual Studio and mark them as an EmbeddedResource:

Add fonts and mark as EmbeddedResource

Then all you need to do is head over to your AssemblyInfo.cs or App.xaml.cs and add this new fancy export code. You can even give the font an Alias to easily identify it later.

[assembly: ExportFont("CustomFont.ttf", Alias = "AnimalCrossing")]
[assembly: ExportFont("fa-regular-400.ttf", Alias = "FA-R")]
[assembly: ExportFont("fa-solid-900.ttf", Alias = "FA-S")]
[assembly: ExportFont("fa-brands-400.ttf", Alias = "FA-B")]

When you head over to the font awesome website each icon will have a specific unicode associated with it:

Coffee icon from font awesome with unicode f0f4

We can now put these in our Application Resources that we can call on later:

 x:Key="IconCoffee">

Now, we can use it in our fancy Shell Tabs (or Image) like you saw earlier using FontImageSource:

  Title="Profile" Route="profile">
     
     	 Glyph="{StaticResource IconCoffee}" FontFamily="FA-S" />
     
 	 ContentTemplate="{DataTemplate view:ProfilePage}"/>

We can also use them in a Label:


    FontFamily="FA-S"
    Style="{StaticResource SocialLabel}"
    Text="{StaticResource IconCoffee}" />

Custom fonts as labels!

If you are referencing your Icons from C# you can generate a full schema from the font by using this awesome site IconFont2Code. Or if you want a pre-generated on checkout Matthew Robin's GitHub fa2cs project that has a pre-made file to do this. Once you add the file you can then have access to every icon!

You can use an icon in XAML by:

Adding a namespace reference to FontAwesome: xmlns:fontAwesome="clr-namespace:FontAwesome";
Referencing a icon using x:Static:
or in code submitButton.Text = FontAwesome.FontAwesomeIcons.Check;

Now, go off and use those custom fonts! Want more, read through the docs.

The Beautiful & Complex FlexLayout Comes to Hanselman.Forms

James Montemagno — Fri, 08 Mar 2019 18:22:00 GMT

Last week I wrote about my new quest to fully optimize and enhance Hanselman.Forms. This involves using the latest and greatest in Xamarin.Forms and Xamarin.Essentials, but it also means spicing up the app with some lovely visuals and design. My first quest was to re-design the podcast section of the mobile app to create a list in grid form of different podcast that Hanselman produces.

So, first things first we should design a card to hold each podcast in. This can be accomplished with a simple Frame with a drop shadow on it:


    Padding="0"
    VerticalOptions="Start"
    HasShadow="True">
     Padding="0">
        
             Height="Auto"/>
             Height="Auto"/>
        
         Source="{Binding Art}" Aspect="AspectFill"/>
         Grid.Row="1" Margin="10,0" Text="{Binding Title}"/>

This simple code results in a pretty nice look for album artwork:

I will absolutely want to try out the new Visual Frame/CardView enhancements now that Xamarin.Forms 3.6 is out to make sure it also looks great on iOS.

Wrapping Podcasts

Wrapping the multiple podcasts into columns and rows dymanically would be pretty ideal for something like a CollectionView, but it is still in preview. I thought instead that the the FlexLayout would be a great option because it can arrange its children horizontally and vertically in a stack in addition to wrapping items. Here is one of the samples from the documentation:

Taking this concept I was able to combine the FlexLayout with a BindableLayout to make something pretty spectacular:

 
     BindableLayout.ItemsSource="{Binding Podcasts}"
           Wrap="Wrap"
           Direction="Row"
           JustifyContent="Start"
           AlignItems="Start"
           AlignContent="Start"
           Padding="8">
        
            
                 Margin="4,4,4,4"
                      FlexLayout.Basis="{OnIdiom Phone='50%', Tablet='33%'}"
                      FlexLayout.AlignSelf="Start">

                    />

It tooke me a long time how to figure out how to space each of the cards correctly and wrap to the next line while still starting on the left hand side. This was accomplished by setting all of the Align properties to Start as well as the JustifyContent. It resulted in a really great Android version:

Better yet, when I ran it on UWP or changed the orientation the FlexLayout reacted very nicely:

Seeing this in action I was very content and wrapped up a great week 2 of live streaming updating the app on Twitch.

You can check out the full pull request on GitHub to see how I setup a full mock data source, handled tab transitions, and the final implementation for FlexLayout in the app. Don't forget that I am accepting pull requests and feature requests too on the official GitHub page.

My final take away thoughts are that while the FlexLayout is relatively complicated and has tons of little settings to tweak, it is still extremely powerful and worth dedicating some time to.

How To Get A Great App Icon: The Fiverr Experiment

James Montemagno — Thu, 08 May 2014 22:19:18 GMT

As a developer I wouldn’t say I am the greatest graphic designer in the world. I mean I can stumble around Photoshop and make some sweet gradients and feather a few things, but that is about the extent of it. Over the last few years I have been pretty lucky to have a graphics design team at my back to make any image assets I needed and of course lay down the final App Icons that ship to the stores. Here are a few great app Icons that I didn’t have to create:

Now that I create apps in my spare time, I have to create app icons and graphics for my apps myself. This tends to be a real issue for me. There are a few great resources out there for app creators that you should be taking advantage of. First, is the Android Asset Studio, which has a bunch of great icons, ways to generate in device screenshots, and customize your Action Bar. If you are on the iOS front then look no further then Glyphish, which costs up to $99 but has over 1200 icons for your consumption. If you are on the Windows Phone side of things then there is an amazing open source repo from Templarian that has matured over the years to supply simply beautiful icons for your app.

With these resources at my back creating a nice user interface with great icons in app isn’t an issue. The real issue is the very first thing my users sees on the app store, which is the main app icon itself. I fall on my face when it comes to this topic as shown in these two app icons:

These might not be the worst icons in the world, but they sure aren’t the best. Over the last week I created a new app for iOS called Post It, available open source on GitHub and on the App Store, which offers easy way to send social media updates from your iOS 7 device. It’s main goal is to replace the missing “swipe from the top of your device and tweet” functionality that was removed in iOS 7. I wanted the app to be beautiful, and I want the app icon to shine. After asking around on Twitter a recommendation that I had heard of before was mentioned, which was Fiverr.

If you have never heard of Fiverr, then you are in for a treat. Fiverr allows anyone to post their service that can range from physical goods, promotions, artwork, programming, or anything else with a cost of only $5. Now of course you can get things for $5, but there are plenty of “extras” that everyone offers that will raise that price up. So my experiment was this: Can I get a beautiful app icon for $5?

I started off by searching through the large list of graphic designers that were providing app icon creation services and I landed on 3 that sparked my interest: gmklawy from Egypt, creativepro from India, and atomicbliss from Sri Lankia. Each had overall positive ratings, and as you might have guessed all started with a $5 intro price.

Baseline

I started each order the same way, after placing my order I gave them details on what colors I was looking for, a description of an app, and the idea of taking the tweet button and remixing it in someway with a quill pen or whatever else hit their mind. After that all I had to do was wait and see what they might come up with.

gmklawy

As I studied gmklawy’s “extras” I knew immediately that I would want the PSD source files and of course I would want my app icon to be made and deliver in under 1 day… so that $5 jumped up to $25 really quick. But, within a few hours I had my first app icon design ready for review:<

Alright I wasn’t blown away, but I thought it did look good, the social bubbles were cool and the hand was an interesting design, but I wanted something simple and a bit more elegant. After a round of feedback the final icon turned into:

With not knowing how many revisions I could actually get out of gmklawy for free I accepted this as the final design and gave him a thumbs up review. I wasn’t sold that this was my final app icon, but it was a starter and hey I had more designers working on designer so who knew what they might come up with.

creativepro

This guy had a really impressive resume and from his extras list I had extremely high hopes. $5 to create an app icon… YES, $10 for 2 revisions…YES, $10 for textures and shadows…YES, $10 for 2 to 3 custom icons… YES, $20 for same day delivery… Obviously! Oh wow this just got to $55 really fast, but hey this seems like multiple hours of work so I can justify that in my mind. That was until I got back the first drafts in my mind, which were on his dropbox so I don’t have access, but were super generic icons with a T and F side by side in 2 colors. I was not too happy at this point. Luckily I had more revisions and could have him start over, which I did. I tried to give more constructive feedback and maybe he just didn’t understand what I was going for, which led to this:

Alright so we are looking a bit better and it is a twist on Twitter, but not great so I asked for 1 final revision to see what I would get. I tried to tell him about the essence of the app and reiterate its purpose. He mentioned this is the last revision at this price and I agreed, as it was the final revision that I technically paid for. Here is what we turned out with:

A bunch of Twitterish boxes with some clip art inside… I was not blown away by the $55 I had just spent, but I still gave him a nice review as perhaps we just didn’t communicate great. I mean we are very far apart and only chatted over the Fiverr’s order discussion board. I knew that I could use one of these icons from ether creativepro or gmklawy, but I wanted to see what atomicbliss could add to the equation.

atomicbliss

What sparked my interest with atomicbliss was that he had focused on simple letters with drop shadows, which are all the rave with the kids now a days. No one else on fiverr was really doing this and his extras were super cheap. $5 for the icon, $5 for the source documents, and another $5 for getting the icon within 2 days?? Yes to all of this please! At $15 this had me a bit worried to be honest. He was the cheapest fiverr I had run into yet. Without delay and under 12 hours he deliver 3 amazing mock ups:

Based on the first mock ups, I knew that this was my guy and hopefully I could get a few more revisions out of the deal. The thumbs up was pretty great, but didn’t fit the app perfect. However, the P with the quill was beautiful and we both agreed that dark blue was the best option of the bunch. We went back and forth a bit on the design and came up with 2 great designs. First was his favorite design without a drop shadow:

Next, was a final decision by both Stephanie and myself, which was to use his variant of the quill and add the drop shadow back. So here it is, the final app icon for Post It:

Conclusion

What did I learn from this experience? Overall, I will say that Fiverr is a great service, that “might” get you a great app icon or other things at the end of the day. It isn’t full proof and you will absolutely spend more then $5 to get an app icon, however when you think about how much impact your app icon can have on sales then it is actually priceless. I spent a total of $100 on this experiment and I think it was well worth it the investment. I will continue to go back to atomicbliss to create more app icons so future investments will be much less. It should also be noted that you can use fiverr for much more then graphics and icons, as I bought these adorable hand crafted beavers: