The previous article was meant to be an intro but was getting too long so it was just a separate a blog post. In this post I will write about my first experience as a Android developer in Wp7 development.
App development stages
When I develop an app I always start with the rough app flow, just get a working app without any designs. Most important thing to remember in that stage is functionality. It’s the most important stage of app development because this is the blue print of your app. This is the moment where you can test if the flow works, if the controls are correctly chosen. Within Android is not very hard to get the rough app flow, just drag some textviews and buttons on the page et voila! Wp7 on the other hand offers great designed, well thought, controls out of the box. The funny thing was, the app was looking great already while I was still in the first stage. Developing apps is just great work. I can really enjoy making things work on these devices. For those people who like to start developing apps I just can say: “just start!”. There are lots of people who are dreaming of developing an app, having great ideas but just don’t start. There are no restrictions in app development! Developers out there, just start! But don’t make it too difficult for yourself. Start with just some small apps to get familiar with the available controls, code, syntax, programs etc. For example, my first app was a temperature converter. This app will not be published because there are already at least 34 million developers who thought the temperature converter was a much needed app in the market. But although it was not interesting for the market, it opened my eyes and gave me great insight in the framework. I’ve created lots of apps since then which resulted in my main app at the moment called Analytix which receives great response from users all over the world. You will not be able to create great apps at your first trials, just keep practicing and read, read and read books. As a former colleague of mine once said. If you don’t know how to make it, you haven’t searched good enough. All information is really out there!
Let’s get back to the app itself before I have to spend another code-less post 😉 I will not bother you with some dull part about setting up the connection to the Google Data Api using Oauth 2.0 which was actually pretty easy to set up. First I was looking for a Oauth library for wp7 but handling the code myself was easier. The hardest part of creating the app was to make it look similar to the Android app. This was and still is a real challenge. Porting an app is not that hard. Make it look similar without loosing the connection to the base design is extremely hard. Luckily, lots of controls of the Android app are to be used in the same way as for Wp7, for example the ListView and the ListBox. I must admit that working with the ListBox is just like working with datacontrols used in Asp.net like the Repeater control. You can define the listitems in a very comprehensive way. Setting a custom listitems in Android takes some time to set up, a listItem should be defined in a separate xml layout file and called when building up the listView using custom listadapters. So, when building a ListView with listitems having a custom layout(every listitem that doesn’t have 1 or 2 lines is called a custom listitem) you need:
- layout.xml with the ListView defined
- listitem.xml for the listitem
- activity code file where you set up the binding
- custom arrayadapter(this can be placed inside the activity code)
It might seem flexible but it just isn’t. There is no way to organize the layout directory. All layoutfiles should be saved in the root of the folder which will result in a total chaos. For my app Analytix I needed a few different layouts and Wp7 was offering those layouts out of the box. For those list items I could choose between the Panorama control or the pivot control. The pivot control was more interesting because I was dealing with lots if data so I needed the space although the panorama control is a very attractive way to visualize information. In xaml the ListBox just needs:
- xaml code where the ListBox is defined
- codebehind to set up binding
you have full control within the ListBox! You don’t have to mess around with external listitem files(you can if you want to) but there is no restriction if you don’t want to. Take look at this sample: As you can see, the Listbox itemtemplate can be everything you want to, just direct in the ListBox iteself. When you are familiar with asp.net development, you will recognize this way of databinding controls. To achieve this in Android we have to define the ListView, define custom listviewitem layout and combine all this inside the custom adapter. There you loose some precious development time, setting up all these items if you just want to have a listitem like this:
Redesigning and redeveloping an app gave offered me some opportunities to make some improvements to the app flow. In the Android app, I choose to offer all possible queries as tabs at the top. You can disable/enable each tab but it’s getting a bit busy on the topbar. I have changed the UI in the tablet version where there is more space to set up the controls. In the Wp7 version I am using a new app flow, more aimed at the Honeycomb version of my app, using categories in a better and user friendly way. Let just compare a few screens, one from the Android app(left) and one from the Wp7 app(right).
[accounts screen, click to enlarge]
[profilesscreen, click to enlarge]
Designing the wp7 screens I’ve discovered a great tool which came in very handy. I need to design some Icons for the accounts and profiles. Just basic icons to make it clear you’re dealing with accounts or profiles. First I downloaded some existing icons, in png format which was ok, but to modify those icons I had to open Photoshop, make changes, save the changes to png again and load it into the project. There must be a better way, a xaml way. Could that be possible? Yes of course! Taking those image to xaml offers me total control of the image. Make it larger, smaller or change the image could be done just in xaml. All you need is Expression Design, a great tool to help you with designing layouts, icons, drawings etc. This tool is just awesome. I had designed an icon for the accounts, selected the drawing in the designer and just hit ctrl + shift + c. Yes, that’s right, you can copy the design from the designer and just paste it in the xaml code in Visual studio. Is the image pasted? No.. the xaml code of the image is pasted… wow!!! That’s what I call thinking ahead! Select the object, hit ctrl+shift+c, now the xaml of the visual is copied to the clipboard. Open Visual studio or Blend and hit ctrl + v.
Some other screenshots
As mentioned before, I’ve redesigned the app flow and added a few new screens. Those screen can give you a better overview of the available queries. The pivot control was the perfect control to visualize the categories and their content.
Making pages like this is actually pretty easy, not as complicated as in Android. Take a look at the code:
Just some ordinary xml. Take some data and bind it to the list:
This is just a very simple setup, but look at the amount of code!!! Wp7 does offer even more elegant ways to bind the data using ObservableCollections which is pretty awesome too.
I’m using this method on the detail pages where the data is loaded async. Using this type of collection and bind it to datacontrols is extremely powerful.
I was planning to write just a sort of an introduction article about some differences between Android and Wp7 development. There are lots and lots of differences just way too many to cover in just a single article. I will continue writing articles about Android, Wp7 or just other stuff 😉
In my previous article I mentioned some reason for me to start develop for Wp7. After publishing the article I thought about those reasons and forgot the most import one. This has to be mentioned.
Being a .Net programmer from the beginning I can admit that the support within the .Net community is really great. People are eager to help each other.
Developing for Wp7 confirmed my opinion. I’ve written some emails to Brandon Watson and Matthijs Hoekstra and those guys are very helpful and supportive. They encouraged me to start developing for Wp7 and port my app to this great new platform. No regrets!!!
Last but not least, Analytix is still in development and not available in the market yet.