The experience of an iOS developer building an Android App
My 2-month Journey of converting The Startup Buddy web application to an Android App
I have worked on iOS apps for a few years, but I don’t have much experience in Android app development. In fact, I can build a functioning iOS app in one night, though I would be very tired the next day. But just my luck, The Startup Buddy is expanding to Indonesia and I have to build an Android App as the CTO. I knew it would be a challenging experience but I wanted to share it so that you can develop faster than I did. By the way, I had less than 2 months to convert The Startup Buddy web app (which I have been working on for a year). Seemed like an impossible task when I was first assigned the task…
Phase 1: Choosing the best
With my tight deadline, I needed something that can be picked up and mastered very quickly while considering the fact that we might need to develop an iOS app in the near future as well. For this, we needed to find a cross-platform tool that can share some or all of the codes between the two very different operating systems.
After some research I narrowed down to the two most common cross-platform tools:
- React Native
- Xamarin
Both have their pros and cons, here is a fair comparison between them by Heckernoon.
Xamarin is a .NET language, whereas React Native uses Html + Javascript. I have been a .NET developer for years and our web app was written in .NET as well. And so it was an obvious decision for me that Xamarin is the tool we were going to use. But obviously, depending on your skillsets and requirements, a different tool should be chosen.
To learn how to use Xamarin, you can visit their official website or watch this video to get a better understanding of how to use Xamarin.
Phase 2: Design
Previously, I was alone in doing all things technical but now we have a pretty and nice UI/UX designer* on board so I don’t have to do the design part anymore which I hate.
*She’s the one editing this article so I was forced to add this.
Something really important to note is that Android and iOS have their own UI guidelines and they are both considerably different.
Apple is quite strict about their guidelines being followed. When you submit your app to the ‘App Store’, they will access it and might reject it if you don’t follow their guidelines. This whole process takes about 7 days. As far as I know, Google play store is not that strict but our designer insisted that we have to follow the Material Design guidelines 🙄. I guess it’s better to be safe than sorry.
Our designer used Sketch as the UI designing tool for both web and mobile app. This can be very easily exported into InVisionApp through the plugin Craft.
In InVisionApp, you can inspect each element of the UI, its colours and size. The good thing about InVisionApp* is that it will give you the android UI XML code as well. Although you might need to change it a bit to fit into the actual UI XML, it still saved a lot of time for me and probably for you as well.
*InVision App is free (including the inspect tool) if you have one prototype in each account! Not a sponsored article by the way.
Phase 3: Building
I had installed Xamarin for Visual Studio 2015 in my windows operating system for a while, but when I was using it, the development tool kept giving me trouble. Either the compilation was stuck or it failed to render the UI in design view, sometimes even taking a few hours to finish the compiling. I decided to upgrade to Visual Studio 2017, but it didn’t work well too. Finally, I installed a Mac version of Visual Studio 2017 into my Mac Operation System where I got things to move more smoothly.
The visual studio 2007 community version for Mac is good enough for you to start building the Android app using .NET. Here are some tips for using Xamarin to build the Android app.
- Xamarin has many Google library packages you can use which can save you a lot of time instead of building yours from scratch. For example, the material design package provides many of the UI elements you might need. It took me a while to discover this library and I had to redo all my UI after that. Read this to find out how to get the library and use it well!
- Always code in the source view instead of the designer view. The Android UI is an XML file that defines all the layout and component, it allows you to drag and drop the element in the designer view but that might not always give the result you want. I found it much more structured and easier by coding it in the source view instead.
- Get more things done first before compiling to test it. Based on the test-driven development principle that I have always adapted in my development, I like to test single functions once I code it. But you will find it a waste of time in this as the compiling and launching of the app takes more than 10 mins to complete, so it is a better idea to test more functions and elements together instead of separately.
- If there is some error pop-up and you have no clue why it is an error, clean the solution and restart the Visual Studio. It happens quite often that Visual Studio gives me a compiling error on the UI part, and after googling forever, the answer always seems to be to clean the solution and rebuild it.
And now we have our UI developed, it looks pretty good and our wonderful designer is very happy to see her design become a reality.
Here are some screenshots of our app running in the android simulator which I am pretty proud of myself:
Phase 4: The backend code
We already have a web-based app, all the user data and content are saved in to the cloud. Now we need to integrate them to our baby Android app.
1. User authentication
Our platform supports Facebook and LinkedIn logins as well as email authentication, and this has to be the same in the Android app as well. For Facebook and LinkedIn, Xamarin already provides a package to handle this, which is pretty straightforward:
For email logins, we use AWS Cognito. It is a bit complicated as the AWS .NET API does not fully support Xamarin yet, and in this case, we have to build a web API wrapper and handle this on the server’s side.
2. Web based content
Our mission content is currently html based with videos and links to articles. We are using a simple approach as a start by embedding a web view in our Android app and loading the html content from our server. It might not be the best approach as a native app, but it works for now.
3. Restful API
Besides the html content, we are also going to build the mentoring feature* into our Android app. To load the data from the web, we built a restful API for the mobile app on our web server. All the content are populated into the app as JSON data.
*The Startup Buddy gives users the opportunity to e-meet with industry experts completely for free!
That is all for our first experience in building a native android app for The Startup Buddy, and we are launching it soon to the Google play store. So stay tuned for that!
The Startup Buddy is SEA’s founder friendly Startup builder. We provide step-by-step guidance through specially designed missions, mentors from around the world and curated content to help you in your Startup journey! Find out more at The Startup Buddy!
