ActionBarSherlock + Xamarin + MVVMCross

 

Short history of ActionBar in Android and Xamarin

1. ActionBar was first added in Android 3.0 (API Level 11).

2. ActionBarSherlock is a third-party library created by Jake Wharton, which brought ActionBar support for Android 2.x: “The library will automatically use the native action bar when appropriate or will automatically wrap a custom implementation around your layouts. This allows you to easily develop an application with an action bar for every version of Android from 2.x and up.”

ActionBarSherlock it’s not just about ActionBar support on Android 2.x, it also has some nice features not available in the Android’s ActionBar implementation.

3. In July 2013, Android Support Library revision 18 introduced a new v7 appcompat library which has ActionBar support for Android 2.1+.

4. Xamarin created a free component for their store as a binding for the ActionBarSherlock, called ‘ActionBarSherlock for Xamarin’.

5. Xamarin created a free component for the Android support Library v7 (rev 18) http://components.xamarin.com/view/xamandroidsupportv7appcompat

I haven’t yet tried how the ActionBar works using the this support library.

 

Using ActionBar in Xamarin application with ActionBarSherlock Xamarin component

The steps are:

1. Create an Android application and add MvvmCross by NuGet. (MvvmCross creates and adds a FirstView activity to the project).

2. Add ActionBarSherlock for Xamarin component from Xamarin Components store

3. Make sure the Android project has ‘Compile using Android version’ and ‘Target Android version’ set to the latest Android version.

4. Add reference to Mono.Android.Support.v4

5. Add a MvvmCross implementation for SherlockFragmentActivity (MvxSherlockFragmentActivity).

   I create a folder ‘MvxSherlockActionBar’ in the Droid project and add to it these two files: MvxEventSourceSherlockFragmentActivity.cs MvxSherlockFragmentActivity.cs These add support for MvvmCross to SherlockActionBar.

6. Change the FirstView’s class parent from MvxActivity to MvxSherlockFragmentActivity and set the ActionBar’s theme

[Activity(Label = "View for FirstViewModel"] 
public class FirstView : MvxSherlockFragmentActivity
{
    protected override void OnCreate(Bundle bundle)
    {
        SetTheme(Resource.Style.Theme_Sherlock);
        base.OnCreate(bundle);
        SetContentView(Resource.Layout.FirstView);
    }
}

You should use SherlockFragmentActivity::SupportActionBar property to use the ActionBar.

A very basic walkthrough to the Xamarin component: http://components.xamarin.com/gettingstarted/XamarinActionBarSherlock 
Xamarin also created a sample application using Xamarin ActionBarSherlock component and made its source code available https://github.com/xamarin/monodroid-samples/tree/master/ActionBarSherlock It contains different examples of usage.

Xamarin MVVMCross PCL Visual Studio issues

 

Introduction to MVVMCross setup

MVVMCross framework is suitable for Xamarin applications with the following structure:

- a platform-independent PCL Core (MyApp.Core) project containing your app logic like view models, services, models
- several platform specific applications projects (MyApp.Droid, MyApp.iOS, MyApp.Store)

Note that MVVMCross works with PCL targeting frameworks
’NET Framework 4.5’,
‘Silverlight 4 and higher’.
‘Windows Phone 7.5 and higher’,
‘.NET for Windows Store apps’

You don’t need to select all these, just the platforms you target but MVVMCross doesn’t work  with ‘.NET Framework 4.0’ or ‘Windows Phone 7’.

The problem

Because of the framework target profiles, Visual Studio by default won’t let you add a PCL project as reference to your Xamarin Android project in Visual Studio.
In the case of MVVMCross, you cannot add the Core PCL project to the application project.

Solutions

The solutions I’ve seen:

#1. (Most popular) Create profiles for ‘Mono for Android’ and ‘MonoTouch’ in
C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETPortable\v4.0\Profile\Profile104\SupportedFrameworks
This makes the two profiles available when creating the PCL and makes Visual Studio recognizing the PCL project compatible with the Xamarin app projects.
http://slodge.blogspot.ro/2012/12/cross-platform-winrt-monodroid.html
http://jpobst.blogspot.co.uk/2012/04/mono-for-android-portable-libraries-in.html
http://psvitz.com/xamarin-vs2012-pcl-mvvm-cross-v3-awesome1one1/

#2. Manually edit the Xamarin application projects to add reference to the PCL project. It will compile fine but with a warning generated about the possible framework incompatibility
http://blog.ostebaronen.dk/2013/07/working-with-pcls-in-lates.html

#3.  The solution I am using: create PCL project and app project in Visual Studio, then use Xamarin Studio just to add the PCL project as reference to the application project. Then switch back and continue work in Visual Studio.

      (If you’ve been using the two profiles from method #1, remove them in advance. For this solution, you shouldn’t see them when creating the PCL, because they create an issue selecting the ‘WP7.5 and higher’ without these two profiles selected, see more below)
 

I also saw another way which involves using a WPF class library (you read it right).
http://neueobjective.wordpress.com/2013/08/08/using-asyncawait-system-net-http-httpclient-and-mvvmcross-in-wp8-xamarin-android-and-xamarin-ios/

 

Problems with having the ‘Mono for Android’ and ‘MonoTouch’ custom profiles

When using #1 with custom profiles, if you try to use NuGet in Visual Studio, Visual Studio will complain about the larger majority of the available toolkits in NuGet:

The reason is because most toolkits do not know about the ‘Mono for Android’ and ‘MonoTouch’ framework targets.
As a workaround, even if the operation failed, you can still manually add as references the toolkit assemblies downloaded by NuGet in the ‘packages’ folder. But that makes NuGet a bit less useful.

Another side issue I've noticed is with having the two profiles (‘Mono for Android’ and ‘MonoTouch’):
When you create a PCL project you cannot select 'Windows Phone 7.5 and higher' without also having the two profiles selected.
Without these two profiles selected, Visual Studio will automatically select ‘Windows Phone 7 and higher’ profile.

(Off topic about Json.NET: Json.NET happens to have a Xamarin component available in the http://components.xamarin.com/view/json.net/ but Xamarin currently does not have the Component feature for PCLs).

I am eager to hear other opinions, experiences, solutions, thoughts.

A first implementation of alert dialog support in Xamarin + MVVMCross

Update: You can use this MvvmCross plugin: https://github.com/brianchance/MvvmCross-UserInteraction
              At this moment however, the plugin doesn't have an implementation for Windows Phone and Windows Store, it's only for Android and iOS.

The implementation steps:

#1. In the Core PCL project, have the dialog interface declared in IDialogService.cs.

namespace MyApp.Core.Services
{
    public interface IDialogService
    {
        Task<bool?> ShowAsync(string message, string title, string OKButtonContent, string CancelButtonContent);
    }
}

#2. In the platform specific project, implement the dialog support. Example for Android:

namespace MyApp.Droid.Services
{
    public class DialogService : IDialogService
    {
        public Task<bool?> ShowAsync(string message, string title, string OKButtonContent, string CancelButtonContent)
        {
            var tcs = new TaskCompletionSource<bool?>();

            var mvxTopActivity = Mvx.Resolve<IMvxAndroidCurrentTopActivity>();
            AlertDialog.Builder builder = new AlertDialog.Builder(mvxTopActivity.Activity);
            builder.SetTitle(title)
                   .SetMessage(message)
                   .SetCancelable(false)
                   .SetPositiveButton(OKButtonContent, (s, args) =>
                    {
                        tcs.SetResult(true);
                    })
                   .SetNegativeButton(CancelButtonContent, (s, args) =>
                   {
                       tcs.SetResult(false);
                   });

            builder.Create().Show();
            return tcs.Task;
        }
    }
}

#3. Still in the platform specific project, register the service:

namespace MyApp.Droid
{
    public class Setup : MvxAndroidSetup
    {
        public Setup(Context applicationContext) : base(applicationContext)
        {
        }

        protected override void InitializeLastChance()
        {
            Mvx.RegisterSingleton<IDialogService>(new DialogService());
            base.InitializeLastChance();
        }
    }
}

#4. In the view models, here is how I can call the display of the dialog:

void async DeleteUser()
{
    var result = await Mvx.Resolve<IDialogService>().Show("Are you sure you want to delete selected user?", "Confirmation", "OK", "Cancel");
    if(result == true)
    {
        // delete user...
    }
}

This is a first implementation of showing dialogs. There’s a lot of possible parameterization / customization, but it needs to take into account the capabilities and behavior of all platforms.
In tests, the IDialogService implementation obviously does not call showing a dialog, it does nothing.

One interesting discussion I had with Greg Shackles is about using a different approach than what I showed here: have the view full responsibility of displaying the dialog and communicate with view model using commands \ methods, etc. I understand the idea but I don't have a very clear way of doing this so until I see all the issues I think I will use this solution.

Localization in Xamarin + MVVMCross

Here is how I implement localization in my Xamarin MVVMCross (what a great pair!) app:

#1. In the Core PCL project, create resource (project properties \ Resources) and use editor to enter all localizable strings in the app (or, you might use localization tools which produce the .resx file).
     Make sure to select Public visibility for the members of the generated Resources class.
     For the resource name, I usually use the actual string + 'Text':
         'Username' –> UsernameText. 
         'Change password' –> ChangePasswordText.      For long strings, I try to give it a short distinctive name  + usage + 'Text':
         'NewAppVersionAvailableMessageText'  -> 'A new version of the application is currently available. Would you like to download it?'
         'DeleteUserConfirmationText'  ->  'Are you sure you want to delete selected user?'

#2. I have a BaseViewModel class derived from MvxViewModel serving as a base for all my view models. It uses an indexer to get the translated string value based on an index resource value  

public class ViewModelBase : MvxViewModel
{
    public string this[string index]
    {
        get
        {
            return Resources.ResourceManager.GetString(index);
        }
    }

#3. (for Android, but the idea is similar to other platforms too) In the layout, I am using MVVMCross binding to bind the controls to the view model’s indexer and pass the resource name:

<TextView local:MvxBind="Text [UsernameText]"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />

At runtime, because of the MVVMCross binding between the TextView’s Text property and view model indexer, the Text property will call the view model’s indexer using the ‘UsernameText’ as index.
This in turn calls ResourceManager.GetString which returns the localized string.

This setup works great. I haven’t yet tried it on all the platforms but it makes sharing a single set of localized strings. Also, the resource strings can be referenced by the statically typed properties of the Resources class.

If the application needs to switch the language at runtime, it should be enough to tell the view model to notify its bound controls to refresh their values. I haven’t tried it yet, but viewModel.RaisePropertyChanged(string.Empty) should work.

There are different approaches to localization, here are few links:
N=21 - Internationalisation - i18n - N+1 Days of MvvmCros (using the MVMCross plugin) 
Using resx-files for localization in MvvmCross (mentioned in the video)
http://danielvaughan.org/post/Generating-Localized-Resources-in-Mono-for-Android-Using-T4.aspx (interesting ideas)

I am happy to hear your thoughts on this approach.

WebBrowser control compatibility

in WPF\WinForms app, the WebBrowser control runs in a compatibility mode
this means it will run in an earlier version than then the current version of the IE on the machine
to disable it, you need to setup a registry key

\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
"AppName.exe"=dword:00002328

webbrowser.reg

identify iPod model

Look on the back of the iPod and read the number "Model No. AXXXX"
Mine says A1367.
Then google the model number.

Publish Android application to Google Play using Eclipse

#1. In Eclipse, go to
File \ Export \ Android \ Export Android Application

#2. Go to https://market.android.com/publish/

Upload a new APK

More Info:

http://developer.android.com/tools/publishing/preparing.html
http://developer.android.com/tools/publishing/app-signing.html#cert