SDF – Map – Pin & Map clicked

If you saw my older post, you have seen that nothing were display when a click is made on a pin or the map.

It was very easy to implement a menu popup when a pin is displayed. Again, thanks to the amazing Xamarin Forms API, it was very easy to animate the popup. It works very well in iOS and Android. This animation was far easier than animating the user panel on the home page. If you don’t change the layout position of a control, its animation render fast enough to increase the user experience. Yea, sometimes an animation can affect the user experience.

Here is a screenshot of the animation. Notice that I use a Grid as the root element. The main reason is that I use the Z-Index style :D it means that the second child of the Grid will be displayed over the first child. Thus, I don’t need to bother anything. Playing with the visibility of the ContentView named PanelActions is enough.

Xaml of the AroundMePage.

Xaml of the AroundMePage.

In the code behind, I launch the animation whenever the property IsMapActionsVisible has changed. It’s not recommended to use Messenger for this purpose. Avoid using Messenger as it’ not the most efficient way to do things. It may be productive and easier to use Messenger sometimes. But if you use the Messenger pattern in a view to register somethings that came from the view model which it’s binded to, you may go in the wrong way.

C# of the AroundMePage.

C# of the AroundMePage

The result in a GIF: if you pay attention, I’ve handled the tapp out of the popup to cancel and close it. It is very boring when a popup doesn’t behave like that. If my popup would have been bigger, I would have add a close button because on low resolution screen, the map may be unclickable.

SDF Map clicked, pin clicked

SDF Map clicked, pin clicked


SDF – Development – design updated

I wanted to show you the work I did so far. I know, I still have a lot of work to make this app looking better :)

But it is still in development :D

It wasn’t hard to create an extended map control that exposes a CurrentLocation bindable property and also a Locations bindable property. This control has 2 commands : CommandMap and CommandPin. Right now, I just show a dialog. I had to create a custom renderer to raise the PinClicked event which isn’t available from Xamarin Forms. If you just need to display some pins on the map, you won’t need a custom renderer.

Don’t forget to specify a label for every pin you add. Without a label, the small white popup won’t display and thus, prevent any click event. Plus, it’s required on a platform (I think it was Android) if you don’t specify the Label, it will crash. You have to set string.Empty at least but even if it doesn’t crash anymore, it sill won’t display the popup. You have to pass a string not empty to enable the raising of the click event.

Here is how I use it in my Xaml :

The ExtMap control inside a page in Xaml.

Here is the result:

If you pay attention, once the map is displayed there are 3 pins displayed and then a 4th pin is added. It’s just to show that my ObservableCollection of Location works ;) It was the first time I create a Xamarin Forms control that use an observable collection and listen its CollectionChanged event. I will use this method to create my ItemsControl of T where T inherits from a ContentView. Xamarin Forms is missing a repeater view control. I know there is the XLab Repeater View. But don’t ask me why, I don’t want to add too many dependencies. Even more for my user interface controls. And I love so much to create my own controls that I don’t want to rely on someone else ;)

 

The GIF of the SDF app.

The SDF app presentation.


HomePage – A first shot

Animations

Warning, your eyes might bleed while watching to the result of my design skills… The color are very sad. I still have not made my decisions about the color. So I keep it in the mockup style design by default.

Before I write more about what I discover after playing with animations that are in the box. Here is a GIF that will show you my progress. I still can enhance it later. That’s not beautiful but hey :) it’s that ugly too!

I know how a GIF can be annoying while reading. I apologize for that too ^_^

 

The Animation HomePage GIF.

The Animation HomePage GIF.

Show me some code!

Bonus: some screen shot of my code: (it’s faster to post some screenshot because I don’t have a code editor inside my blog yet).
At the moment I tool those screenshots, I didn’t have anything more than a command in my view model. The animation can’t be started until we bind a command to the control. That’s why the MenuUserPanelView command is binded to the CmdOpenPage.

When I work on a project on my spare time, I like to name my command CmdXXX. Because I like to have all my command grouped in the Intellisense while I code. The same kind of argument of those who name their private field with an underscore like _myVar. I was this kind of developper until I started using StyleCop which doesn’t like that and force me to use the “this” keyboard anytime I can. this._myVar isn’t the sexiest code I’ve so far. My eyes feel more confortable with a this.myVar. Real developers can argue about coding conventions for hours :P

The XAML of the HomePage.

The XAML of the HomePage.

 

C# code of an animation with Xamarin Forms.

C# code of an animation with Xamarin Forms.

 

I tested those animations on real devices. I have a Galaxy Note I (still working very good) and an iPod Touch 5 (a second hand product). On the Galaxy Note, the animations are lagging a bit. It’s rendering much better on iOS. And it’s an iPod Touch 5 (based on hardware, it’s the equivalent of the iPhone 4S). I did notice that depends on the order of the animation. If you combine more than 2 different animation at the same time, it will impact the user experience in a very bad way on Android. This advice is for animation of panels of controls like a stack of button, textbox etc. If you only animate a icon or a single component, you can try 3 animations at the same time. I can only advise you to experiment.

I didn’t make a lot of research on how Xamarin renders those animations. The FPS make me think that for Android, it’s rendered with CPU while GPU is used for iOS.


Designing the icons

Tool and format of the icon

I like to create basic icon’s for the app. At least, one of each kind of icon the app will be using. It’s quite a requirement because without icons, you won’t see the result of the UI, you won’t have the right dimensions or you will have to change your item template.

To design my icons, I always use Inkscape. Because I love SVG which is very similar to XAML. The SVG is vectorial : you will be able to export the icon in all the resolution you want without lost. That’s how you get rid off the crappy blurry icon you can sometimes see in a app that doesn’t provide all the resolution for a image resource. Plus, you can use the SVG made in HTML and at last but not least, you can do some crazy animations of the shape ! It will still remains vectorial and feels every screen :)

You can see a result of a SVG animation in my website: just go on any page except the home page. You will see my company name being animated with few lines of Javascript. I really think my animation isn’t that bad and it works on most of every browsers (even on mobile).

How to design your first icon

You may know there are different kind of icons. The application icon, the notifications icons, the other icons.
I’ll focus on the other icons which.
I start by setting up the kind of document I will use. I use the 64×64 size. I add some landmarks (I don’t know the english word). I add them so I can see the real size of my icon without the margin.

Available area in Inkscape.

Available area in Inkscape.

The landmarks to put the margin.

The landmarks to put the margin.

Then I start enjoying designing my icon. I always take a look before I start designing anything. Even the landmarks :)

Exporting the icon

To export the icon, I create a folder composed of the android dpi folder and an iOS folder. Then, I export the icon in the format 32×32. I choose the drawable folder. I export. I change the folder to high dpi and set the size to 48×48. Export. Repeat with xhdpi and 64×64. Again with xxhdpi and 96×96 and finally, 128×128 in the xxxhdpi folder. Once I have exported all those different resolution icon, I copy/paste the content of the folder xxhdpi inside the iOS folder, I rename every file with @3x.png. Then, I copy/paste the xhdpi content folder too. Rename those files with @2x. Finally, I copy/past the content of the drawable project (this time, no need to rename the files).

Normal size icon export

The folder of all icons exported.

The folder of all icons exported.

Normal size icon export.

I always export the xxxhdpi icon even if I don’t add them inside the application project (Xamarin). Thus, I don’t have to export everything again If I just want my icon to be 50% bigger. I just have to replace every file of my application project with a bigger icon. AS a result, my 48×48 hpdi becomes the dpi, the 64×64 xhdpi becomes the hdpi etc.


The design mockup

The tools I use to mockup

When I start a project, I like to start with the design mock up. For several reasons: it helps to see the project out of the box. I mean, it’s better than setting up the architecture or the database because you may miss something that a quick feedback on your mockup can bring.

There are a lot of way to mockup your app. You can use software such as Photoshop or Gimp. I feel better with Power Point or Balsamic Mockup. Yea, I really think you can do a nice mock up with Power Point. Even more once you downloaded some package given by Microsoft which contains a lot of control and icons ready to use. When I realize a mockup, I don’t focus on the final design. The screen I design are a cross between wire frames and final screens. If you spend more than an hour designing a screen, you are probably doing it wrong: don’t spend too much time because it can be a waste. The simpler your mockup are, the more understandable your app will be.

Balsamic Mockup is an amazing software I discovered 5 years ago. I felt in love with the look & feel of the result. It’s also easy to customize and to set up.

SDF mock up

You can click on the image below to open them in a new tab in full screen.

The “home” & “menu” page:
As you can see, the home page will be light. I also add some info on the kind of animation I would like to add.

1 - Home, menu

The “around me” page:
This page will be the core of the app. It is where user will perform actions like reporting if a homeless people is still at the same spot, if he has cover, foods or something like that.

2 - Around me

The “my activities” page:
The page where the users will see the summary of their reports.

3 - My activities

The “wall of fame” page:
A page that shows who help a lot.

4 - Hall of fame

The “about” page:
A page where I will put every other information. I still don’t know what it will say.

5 - About

 

Notice that I still don’t have the app icon. It’s something that can wait. I will focus on the application icon once it will be mature enough.
I don’t see the point of making an icon if you don’t develop and publish the app. I already made this mistake: I spend few days on the icon, the name of the app, the splash screen but I never ended this project. It was a waste of time: it would have been smarter to spend those time somewhere else.


SDF project: the background

The app story

The SDF application project is a project I start from scratch. I will develop a mobile app for iOS, Android and Windows Phone with Xamarin Forms.

SDF stands for “Sans Domicile Fixe” it means homeless in french. I chose this name because I will deploy the application in France first. And depends on the result, if the application can really helps the community, I may deploy it for every country I can.

I hope this application will help to fill the gap between homeless people and people who want to help their neighborhood.

Why would people being interested by the application ? Charity I guess.

Content of the app

The app will use geolocation. And nothing more sophisticated.

It will be simple: composed  5 or 6 pages.

  • The main page: the menu, composed of a profil area and some links to access to other pages
  • The location page: where you see the homeless people on a map
  • The history page: it will display the actions realized by the user
  • The help page / about page: a tutorial of the app and some other information
  • The community of the app history

 

 


First post – 2016 personnel project

Hi,

This is the first post on my step aside project in 2016.

I started this project with several goals in mind. Some of them are to make my New Year’s Resolution wishes to come true. One of those resolutions was to develop an application for the community. Another one was to write some post on how I develop an app with Xamarin Forms. I was hopping to create my Xamarin Forms toolkit this year too!

I’ll try to cover several steps.

  • the design mockup
  • how I created some icon’s with Inkscape
  • the architecture of the app
  • some xamarin forms control I’ll create for the App
  • and without any doubt, other stuff

I’ll keep update this list over time.