Redevelop a native app with Xamarin part 2
This blog is the followup of the blogseries “Redevelop a native app with Xamarin part 1”, it describes several development aspects in detail with code samples and practical approaches.
In the first part of this blog series we’ve covered several chapters on what it takes to set up a project in Xamarin and rebuild your app that is previously build native in Android Studio. After finishing the project we’ve found out that there is a lot to love about app development with Xamarin. Like the ability to use .Net techniques and the single codebase facilitating multiple mobile platforms. We’ve also found out that MvvmCross is a great framework that accelerates the app development process.
In this part we’ll cover the extension of the MvvmCross framework to create controls that are not already bindable, controlling the viewstack and how to implement the Google Tag Manager to connect to Google Analytics. Eventually we’ll take a look at the considerations to take for deploying the app in to the store.
Creating a bindable EditSearchBox
MvvmCross does not have a solution out of the box to bind the search/send action of the EditText component to a command. In the Birding App, after entering a search term and hitting the search button, the SearchCommand in the SearchViewModel should be triggered. Here is the solution how to do it:
We’ve created a custom control that inherits from EditText, attached an EventHandler to the EditorHandler event and executed the given command on the specified “confirm” actions.
The following snippet shows how the presentation is implemented for a search box:
Implementing the TagManager
In the app we want to be able to connect multiple analytics platforms which means Google Analytics as well as Google Firebase. This is only possible by using the Google Tag Manager.
First you’ll need to follow Google’s instructions for setting up the measured variables as described here. In our case it will look like this:
Setup your tag in the Google Tag Manager to catch all events and pass the variables to Google Analytics:
The following step is to set up a service in your Android project that communicates with the TagManager library:
Then in your portable project define an interface ITagManager:
Ensure that your viewmodels trigger the Android implementation by registering the service in the InitializeIoC() method in the Android projects Setup.cs:
Mvx.RegisterSingleton<ITagManagerService>(() => new TagManagerService());
Now you can inject the service in the constructor of your viewmodel and send the screenview event to Google Tag Manager:
Clearing the activity stack with the mvxAndroidViewPresenter
In certain circumstances we want to clear the view stack after navigating to an activity. In our case we have a “Home” button and when a user taps this button, he should navigate to the main page and then the hardware-back button should result in closing the app. This is how we’ve solved it:
Create a MvxAndroidViewPresenter in the Android project that clears the backstack based on a parameter “ClearStack”:
Register it in the Setup.cs:
We’ve added a method in the BaseViewModel that adds the “ClearStack” based on a parameter:
Now we can navigate and clear the backstack afterwards with the following line of code:ShowViewModel<MainViewModel>(true). We’ve implemented this in a command in the BaseViewModel:
The best way to translate a lot of text values
The BirdingApp is multilingual which means a user experiences a user interface in its own language and also search for birds in its own language. VisualStudio does not provide an out-of-the-box mechanism to translate a bulk of text values. In our case this means quite some work. The best thing to do is to create language subfolders in the resource folder and then just start AndroidStudio, import the complete Resources folder structure and open the base strings.xml with the Translations Editor.
Here you can quickly translate and copy the folder structure back into your VisualStudio solution.
Publishing to the Store
Basically there are two logical ways for getting your product into the store. There is the archive manager- and the release management way.
The archive manager is integrated in Visual Studio. Its goal is to easily archive and publish your app to the Google Play Store. The tool links the project to the Google Play developer account and publishes the app through API access. The tool takes a lot work out of your hands.
This way of publishing comes with a risk however. An easily made human mistake can ruin a production deployment. You can for instance accidently release the wrong git branch.
This risk can be tackled by using the VSTS release management as a continuous delivery solution to automatically publish the project to the play store. You can trigger the delivery on a push to the master branch so you can use the Gitflow release process to start the deployment, and this way it will always be the proper branch that will be pushed.
Before you publish your app make sure that you have tested your app in the release configuration because in MvvmCross the binding on controls will only work when the binded events are included in a dummy file like described here.
Finally the BirdingApp got published to the Google Play Store. The biggest lesson learned is that developing with Xamarin is way faster than native development. This judgement is based on developing the same App both ways. Xamarin offers a great amount of frameworks like MvvmCross, Xamarin Forms and a lot of plugin packages that saves a lot of custom coding.
The MvvmCross framework is easy to learn and easy to extend and definitely an option to consider when you are at the beginning of your app development adventure. Good luck!
Need help with building your app? Read more about app development at Suneco and get in contact with us.