Xamarin & MvvmCross Handbook
  • Introduction
  • Using MvvmCross to create your first Xamarin App
    • Creating the Core project
      • Understanding MVVM
      • Adding a simple Service
      • Adding a ViewModel
      • Adding an App class
    • Creating the Android project
      • Adding an Android Application class
      • Adding the Android Layout View (AXML)
      • Understanding the data-binding syntax
      • Adding the View class
    • Creating the iOS project
      • Updating the AppDelegate class
      • Adding the iOS View for the first ViewModel
      • Understanding the data-binding syntax
    • Creating the UWP project
      • Updating the App.xaml.cs and the App.xaml
      • Adding the UWP View
      • Understanding the data-binding syntax
    • Creating the REST API Service
      • Creating the models
      • Creating the interface and the implementation for the PostService
      • Creating the ViewModel
      • Adding the View for the Android project
      • Adding the View for the iOS project
      • Adding the View for the UWP project
    • Navigation
      • Creating the PostDetail View & ViewModel
      • Command with the parameter
      • Retrieving the param from the previous ViewModel
      • Understanding the IMvxNavigationService
      • Responding the events from different controls in the ListView
      • Retrieving the return result from the previous ViewModel
    • Creating the Xamarin.Forms project
      • Creating the Forms.UI project
      • Adding the App.xaml and the App.xaml.cs
      • Adding the View
      • Creating the Android project
      • Creating the iOS project
      • Creating the UWP project
      • Summary For Forms
    • Summary
  • Implementing MasterDetail layout in Xamarin.Forms by MvvmCross
    • Introduction
    • Creating the project by MvxScaffolding
    • Creating the MasterDetailPage
      • Creating the ViewModel
      • Creating the XAML file
    • Creating the MasterPage
      • Creating the ViewModel
      • Creating the XAML file
    • Creating the DetailPages
      • Creating the ViewModels
      • Creating the XAML files
    • Implementing the Menu functionalities
      • Displaying the MasterPage and the DetailPage
      • Setting the menu navigation
      • The other approaches to set the data-binding
    • Fine-tuning the UI
      • Adding the hamburger icon for iOS
      • Adding the header bar for Android and iOS
      • Adjust the height of the item for UWP
    • Summary
Powered by GitBook
On this page

Was this helpful?

  1. Using MvvmCross to create your first Xamarin App
  2. Creating the Xamarin.Forms project

Creating the Android project

PreviousAdding the ViewNextCreating the iOS project

Last updated 6 years ago

Was this helpful?

Add a new Xamarin Android project with name MvvmCross.Forms.Droid into the solution. DO NOT select the Android XAML App (Xamarin.Forms) template item.

Select the Blank App template:

Install the Xamarin.Forms package from the NuGet Package Manageer, or input the command below in the NuGet Manager Console:

Install-Package Xamarin.Forms

Then install the MvvmCross.Forms package from the NuGet Package Manager by searching MvvmCross.forms:

If you prefer the Package Manager Console, please use this command:

Install-Package MvvmCross.Forms

It will take a while since it need to install some related packages. Next, add the references to both MvvmCrossDemo.Core project and MvvmCrossDemo.Forms.UI project:

Also, we need to add the reference to Mono.Android.Export assembly:

Delete the activity_main.axml file in the Resources\layout folder because we use the MvvmCrossDemo.Forms.UI project to host the UI.

Open the MainActivity.cs file and delete the automatically generated methods and make it to inherit from MvxFormsAppCompatActivity<MvxFormsAndroidSetup<Core.App, UI.App>, Core.App, UI.App> instead of AppCompatActivity, as shown below:

using Android.App;
using MvvmCross.Forms.Platforms.Android.Core;
using MvvmCross.Forms.Platforms.Android.Views;

namespace MvvmCrossDemo.Forms.Droid
{
    [Activity(Label = "MvvmCrossDemo.Forms.Droid", Theme = "@style/AppTheme", MainLauncher = true)]
    public class MainActivity : MvxFormsAppCompatActivity<MvxFormsAndroidSetup<Core.App, UI.App>, Core.App, UI.App>
    {
    }
}

The base class of the MainActivity shows that the Android project uses the default Setup class to initialize itself. Notice that now we have two App classes, one is in the MvvmCrossDemo.Core project, another is in the MvvmCrossDemo.Forms.UI project.

Next, we need to define an AppCompat theme by adding a new XML file called styles.xml into the Resources/values folder. If it already exists, open it and replace the content with the following code:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
  <style name="MainTheme" parent="MainTheme.Base">
  </style>
  <!-- Base theme applied no matter what API -->
  <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
    <item name="windowNoTitle">true</item>
    <!--We will be using the toolbar so no need to show ActionBar-->
    <item name="windowActionBar">false</item>
    <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">#2196F3</item>
    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">#1976D2</item>
    <!-- colorAccent is used as the default value for colorControlActivated
         which is used to tint widgets -->
    <item name="colorAccent">#FF4081</item>
    <!-- You can also set colorControlNormal, colorControlActivated
         colorControlHighlight and colorSwitchThumbNormal. -->
    <item name="windowActionModeOverlay">true</item>

    <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
  </style>

  <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF4081</item>
  </style>
</resources>

You can find the code of the style.xml here: https://github.com/MvvmCross/MvvmCross/blob/develop/ContentFiles/Forms/AndroidContent/styles.xml.pp. Because in Android, we use Toolbar instead of the ActionBar so we must set this item:

<item name="windowActionBar">false</item>

In this file, you can also customize some values for the style of the Android project. Apply this style file by updating the attributes of the MainActivity class in the MainActivity.cs file, as shown below:

[Activity(Label = "MvvmCrossDemo.Forms.Droid", Theme = "@style/MainTheme", MainLauncher = true)]
public class MainActivity : MvxFormsAppCompatActivity<MvxFormsAndroidSetup<Core.App, UI.App>, Core.App, UI.App>
{
}

Now you can launch the MvvmCrossDemo.Forms.Droid Project. The result is: