code

Nov

2019

What I’ve learned from porting my first app ever to Android and iOS with Xamarin

What’s the app about?

The app is about fishing knots. It sounds boring for most people, but for me, this app made me becoming a developer. So I have a somewhat emotional connection to it. It was back in time when Windows Phone 7 was new and hot. A new shiny OS from Microsoft, but clearly lacking the loads of apps that were available on iOS and Android. At that time, I also managed to get my fishing license in Germany.

As I had a hard time to remember how to tie fishing knots, I searched the store and found… nothing. I got very angry over that fact, partly because it meant I had to use one of the static websites back then, but more about the fact that there was this damn app gap (WP7 users will remember). So I finally decided to learn how to write code for Windows Phone and wrote my first app ever after some heavy self-studying months.

Why porting it?

Writing code should soon become my favorite spare-time activity, effectively replacing fishing. And so the years went on, I made some more apps (most of them for Windows Phone) and also managed to become employed as a developer. After some time, S. Nadella became the CEO of Microsoft, and Windows for mobile phones was dead. So I had created all my “babies”, and they were now set to die as Windows Phone/Mobile did. Not accepting this, I started to create a plan to port my apps over to the remaining mobile platforms. After Facebook effectively killed my most successful app (UniShare – that’s another story, though), I stopped porting that one and started with Fishing Knots +.

Reading your own old code (may) hurt

When I was starting to analyze which parts of the code I could reuse, I was kind of shocked. Of course, I knew that there was this code that I wrote when I didn’t know it better, but I refused to have a look into it and refactor it (for obvious reasons from today’s perspective). I violated a lot of best practices back then, the most prominent ones

No MVVM
Repeating myself over and over again
Monster methods with more than 100 lines within

In the end, I did the only right thing and did not reuse any line of my old code.

Reusing the concept without reusing old code

After I took the right decision to not use my old codebase, I needed to abstract the concept from the old app and translate it into what I know now about best practices and MVVM. I did not immediately start with the implementation, however.

The first thing I did was drawing the concept on a piece of paper. I used a no-code language in that sketch and asked my family if they understand the idea behind the app (you could also ask your non-tech friends). This approach helped me to identify the top 3 features of the app:

Controllable animation of each knot
Easy-to-follow 3-step instructions for each knot
Read-Aloud function of the instructions

Having defined the so-called “Minimum Viable Product“, I was ready to think about the implementation(s).

The new implementation

Finding the right implementation isn’t always straight forward. The first thing I wrote was the custom control that powers the controllable animation behind the scenes. I wrote it out of the context in a separated solution as I packed it into a NuGet package after finishing. It turned out to be also the most complex part of the whole app. It uses a common API in Xamarin.Forms, and custom renderers for Android and iOS. I had to go that route because of performance reasons – which is one of the learnings I took away from the porting.

It was also clear that I will use the MVVM pattern in the new version. So I was setting up some basic things using my own Nuget packages that I wrote during working on other Xamarin based projects.

When it came to the overall structure of my app, I thought a Master/Detail implementation would be fine. However, somehow this never felt right, and so I turned to Shell (which was pretty new, so I tried to give it a shot). In the end, I went with a more custom approach. The app uses a TabbedPage with 3 tabs, one being for the animation, the second for the 3-Step tutorial, and last but not least the Settings/About page. The first two pages share a custom top-down menu implementation, bound to the same ViewModel for its items and selection.

More Xamarin.Forms features I learned (to love)

Xamarin and Xamarin.Forms itself are already powerful and have matured a lot since the time I used it to write my first Xamarin app for Telefonicá Germany. Here is a (high level) list of features I started to use:

Xamarin.Essentials – the one library that kickstarts your application – seriously!
Xamarin Forms Animations – polish the appearance of your app with some nice looking visual activity within the UI
Xamarin Forms Effects – easily modify/enhance existing controls without creating a full-blown custom renderer
Xamarin Forms VisualStateManager – makes it (sometimes) a whole lot easier to change the UI based on property changes
Xamarin.Forms Triggers – alternative approach to modify the UI based on property changes (but not limited to that)

The three musketeers

Because of Xamarin and Xamarin.Forms are such powerful tools, you may run into the situation of needing help/more information. My three musketeers to get missing information, implementation help or solution ideas:

Microsoft Xamarin Docs – the docs for Xamarin are pretty extensive and by reading them (even again), I often had one of these “gotcha!”- moments
Github – if the docs don’t help, Github may. Be it in the issues of Xamarin(.Forms) or studying the renderers, Github has been as helpful as the docs to me.
Web Search – chances are high that someone had similar problems/ideas solved and wrote a blog about it. I don’t blindly copy those solutions. First I read them, then I try to understand them and finally, I implement my own abstraction of them. This way, I am in a steady learning process.

Learn to understand native implementations

I guarantee you will run into a situation where the musketeers do not help when focusing solely on Xamarin. Accept the situation that Xamarin is sitting on top of the native code of others and does the heavy conversion for us. Learn to read Objective-C, Swift, Java and Kotlin code and translate it into C# code. Once you found possible solutions in one of the native samples, blog posts or docs, you will see that most of them are easy to translate into Xamarin code. Do not avoid this part of Xamarin development, it will help you in future, trust me.

Conclusion

Porting over my first app ever to Android and iOS has provided me not only a lot of fun but also huge learnings/practicing. Some of them are of behavioral nature, some of them are code implementations. This post is about the behavioral part – I will write about some of the implementations in my upcoming blog posts.

I hope you enjoyed reading this post. If you have questions or have similar experiences and want to discuss, feel free to leave a comment on this post or connect to me via social media.

Until the next post, happy coding!

Helpful links:

Mar

2014

AppAdditives PromotionalCodes, Telerik trial reminder and how to let users unlock the full app on Windows Phone

I love it when I am discovering new awesome stuff to provide a unique User Experience in my apps. AppAdditives by ExGrip LLC are the newest tools I felt in love with.

AppAdditives allow you to create promo images, social cards and widgets for your blog very easy. On top of that, they provide you an easy to use promotional code system. According to their developers, they are planning even more awesome stuff for Windows Phone and Windows 8 in future to help especially small and indie developers/publishers.

Let’s have a look on how easy it is to generate a list of promo codes after you registered for their free service.

To generate a new list of promo codes, click on Promotional Codes. Then choose which way you provide – one time codes (every code gets invalid after being redeemed) or multi-user codes (one code for up to 2 million users). I am using the one time codes for my app.

After you selected the proper time zone, you will get the following settings menu:

Enter all your settings, and click on start to generate your list of promo codes. It will look like this:

That’s all we need to do here. Let’s fire up Visual Studio. Open NuGet, and install the package ‘ExGrip.PromotionalCodes’ in your preferred way.

First, add your API Key and API Secret to your app (you will find them on the Promotional Codes page). Then, add the following code to your button/function that will redeem the code for your users:

            if (PromoCodeTextBox.Text != string.Empty)
            {
                PromotionCodeManager promoCodeMan = new PromotionCodeManager(AppAdditivesAPIKey, AppAdditivesAPISecret);

                bool validateCode = await promoCodeMan.ValidatePromoCode(this.PromoCodeTextBox.Text);

                if (validateCode == true)
                {
                    progress.Text = "redeeming promo code...";

                    bool redeemCode = await promoCodeMan.RedeemPromoCode(this.PromoCodeTextBox.Text);

                    if (redeemCode == true)
                    {
                        App.isPromoCodeActivated = true;

                        RedeemPromoCodeWindow.IsOpen = false;
                        redeemPromoCode.IsEnabled = false;

                        await RadMessageBox.ShowAsync("You unlocked the full version.", "Success", MessageBoxButtons.OK);

                    }
                    else
                    {
                        await RadMessageBox.ShowAsync("The code you entered cannot be redeemed. Please try again or contact our support.", "unable to redeem your code", MessageBoxButtons.OK);
                    }
                }
                else
                {
                    await RadMessageBox.ShowAsync("The code you entered is not valid. Please try again.", "invalid promo code", MessageBoxButtons.OK);
                }
            }
        }

As you can see, I am using an chain to first validate the promo code, and only if it is valid, I allow to redeem the code.

But that’s not all. I am using Telerik’s RadTrialApplicationReminder to manage the trial state of my app. Windows Phone does not allow to redeem a code for a full version via the Store, so we need to be creative here.

As I am not limiting features but use a time based trial, I can use three already existing properties of RadTrialApplicationReminder. If my Boolean is true after the app start, I am setting all periods to 9999 days and skip all further reminders:

                if (isPromoCodeActivated == true)
                {
                    trialReminder.FreePeriod = TimeSpan.FromDays(9999);
                    trialReminder.OccurrencePeriod = TimeSpan.FromDays(9999);
                    trialReminder.AllowedTrialPeriod = TimeSpan.FromDays(9999);
                    trialReminder.AreFurtherRemindersSkipped = true;
                }

This way, I can easily provide this clearly missing features by using Promotional Codes from AppAdditives. The only thing I need to do is to tell users to only download the trial version of my app and give them a promo code.

Additional hint: If you have users that switch devices, they are not able to redeem the code again. Just tell that to your users, they will be either asking you for another code – or buy your app, anyways.

As always, I hope this post is helpful for some of you.

Happy coding, everyone!

Dec

2013

Xamarin: Resources of an Android app project

As I mentioned already in my first blog post about Xamarin, Android has a different project structure – even if you use Xamarin.

A very important part of this structure are resources. We have different kind of resources in an Android app:

Icons & Images
Layout (XML files)
Values (string resource files)

Let’s start with Icons & Images.

As you can see in the solution window, there is a folder called ‘Resources’. Here you will put all kind of resources, like images, icons, layouts and so on.

The corresponding class for images in Android is called ‘drawable’, that holds a reference to’ Icon.png’. The project structure is based on that, that’s why the resources folder has all images inside the folder ‘drawable’. As Android has various screen sizes, you may have a folder for structure like ‘drawable’, ‘drawable-hdpi, ‘drawable-ldpi’ and so on. Android scales your image resources to match the screen automatically if you do not define alternate layouts.

To make your files available in your app, you need to set the Build Action to ‘Android Resource’:

Let’s have a look to the Layout files:

Layout files are XML files that contain the UI of a page, control or a view. You can use these XML files for example to define items of a ListView or simply the application page. Every new project has a ‘Main.axml’ file.

There are two ways to create a layout. The first one is using the visual designer:

This works for basic layouts like adding the button above. Also, if you don’t know the properties of a control you added, you will be able to add it here to get started.

If you are familiar with writing your UI in code (like XAML) and want to do so in your Android app, just click the ‘Source’ tab at the bottom in the visual designer. You will see something like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="@+id/myButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
</LinearLayout>

If you want to add and modify a control, but don’t know how the properties are, this page has a list of all controls, which are called ‘widgets’ in Android. That’s also the corresponding namespace: android.widget.

Like in an Windows Phone app, you also have a string resource file in Android projects. This file is once again a XML file, but with a different structure:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, Click Me!</string>
<string name="app_name">gettingstarted</string>
</resources>

All strings need to be declared inside the <resources> tag. The definition is always like <string name=”yourstringname”>stringcontent</string>. Empty strings are not supported and will throw an error at building your project.

Let’s have a look on how we can work with our resources, based on our gettingstarted project. We have the following code inside our MainActivity class:

int count = 1;

		protected override void OnCreate (Bundle bundle)
		{
			base.OnCreate (bundle);

			// Set our view from the "main" layout resource
			SetContentView (Resource.Layout.Main);

			// Get our button from the layout resource,
			// and attach an event to it
			Button button = FindViewById<Button> (Resource.Id.myButton);
			button.Text = GetString (Resource.String.hello);

			button.Click += delegate {
				button.Text = string.Format ("{0} clicks!", count++);
			};
		}

As you can see, the we are defining our view from our Layout file ‘Main.axml’ by using the SetContentView() method. The file is added to our resources list as Layout with the name we defined.

Our MainActivity does not know that we have a button inside our layout. To make the button visible to our MainActivity, we need to reference it. This is done by declaring a Button instance and using the FindViewById<T>(ResourceName) method.

If you have not given your button a name, now is the right time to do so. In our example the button has the name “myButton”. The syntax is very important, make sure you add “@+id/” to the name.

android:id="@+id/myButton"

Now our button is visible to our MainActivity code page and can be accessed. The sample project references the button content in the Layout file:

android:text="@string/hello"

After referencing our button, we could also use the following code to get the button content from the resource file:

button.Text = GetString (Resource.String.hello);

Whenever your want to get a string from the resource file in an Activity, the GetString() method is used.

I hope this post helps you to understand how resources are used in an Android app and how to handle it a Xamarin project.

Happy coding everyone!