Chapter 6. XamSnap for Android

To begin writing the Android version of XamSnap, open the solution from the previous two chapters. We'll be working in the XamSnap.Droid project, which should be already setup from the Xamarin project template.

In this chapter, we will cover:

• The Android manifest

• Android Material Design

• Writing a login screen for XamSnap

• Android's ListView and BaseAdapter

• Adding a friends list

• Adding a list of messages

Introducing the Android Manifest

All Android applications have an XML file called the Android Manifest, which declares basic information about the app, and is named AndroidManifest.xml. This is very similar to the Info.plist file on iOS, except Xamarin also provides C# class attributes for placing common settings in the Android manifest. There is also a nice UI for editing the manifest under Project Options | Android Application.

The most important settings, shown in the following screenshot, are as follows:

• Application name: This is the title of your application, which is displayed below the icon. It is not the same as the name selected on Google Play.

• Package name: This is just like on iOS, your app's bundle identifier. It is a unique name to identify your application. The convention is to use the reverse domain style with your company name at the beginning; for example, com.jonathanpeppers.xamsnap. It must begin with a lower case letter and contain at least one character within.

• Application...

Setting up Material Design

Beginning with Android 5.0 Lollipop, Google released a new theme and color palette for Android applications called Material Design. It is a good idea to adopt material design for new apps, as it gives you a modern Android look, with little effort to setup. For more information on material design, check out Google's documentation at: https://developer.android.com/design/material/index.html.

To make material design (and other new Android features) easier to adopt, Google has also released an AppCompat library for Android so you can support these newer features on older Android OS versions. Xamarin supports a version of the AppCompat library on NuGet so that it is easy to set up for Xamarin.Android applications.

To set up the Android support library, follow these steps:

1. Right-click on Packages and select Add Packages.

2. Search for Xamarin.Android.Support.v7.AppCompat.

3. Click Add Package.

4. NuGet will download the library and its dependencies, referencing them in your Android...

Adding a login screen

Before creating Android views, it is important to know the different layouts or view group types available in Android. iOS does not have an equivalent for some of these because iOS has a smaller variation of screen sizes on its devices. Since Android has virtually infinite screen sizes and densities, the Android SDK has a lot of built-in support for auto-sizing and layout for views.

The following are the common types of layouts:

• ViewGroup: This is the base class for a view that contains a collection of child views. You normally won't use this class directly.

• LinearLayout: This is a layout that positions its child views in rows or columns (but not both). You can also set weights on each child, to have them span different percentages of the available space.

• RelativeLayout: This is a layout that gives much more flexibility on the position of its children. You can position child views relative to each other so that they are above, below, to the left, or to the right of one...

Using ListView and BaseAdapter

Now let's implement a conversations list on Android. The Android equivalent of UITableView and UITableViewSource are ListView and BaseAdapter. There are parallel concepts for these Android classes, such as implementing abstract methods and recycling cells during scrolling. There are a few different types of adapters used in Android such as ArrayAdapter or CursorAdaptor, although BaseAdapter is generally best suited for simple lists.

Let's implement our conversations screen. Begin by making a new Android Activity in your Activities folder named ConversationsActivity.cs. Let's start with only a couple of changes to the class definition, as follows:

[Activity(Label = "Conversations")] 
public class ConversationsActivity :
   BaseActivity<MessageViewModel> 
{ 
  //Other code here later 
} 

Perform the following steps to implement a couple of Android layouts:

1. Create a new Android Layout in the layout folder of the Resources directory...

Implementing the friends list

Before we start implementing the friends list screen, we must first add a menu item to ActionBar in our application. Begin by creating a new menu folder within the Resources folder of our project. Next, create a new Android Layout file named ConversationsMenu.axml. Remove the default layout XML created, and replace it with the following:

<?xml version="1.0" encoding="utf-8"?> 
<menu xmlns:android="http://schemas.android.com/apk/res/android"> 
  <item android:id="@+id/addFriendMenu"
     android:text="Add Friend"
     android:showAsAction="ifRoom"/> 
</menu> 

We set up a root menu with one menu item inside it.

The following is a breakdown of what we set for the item in XML:

• android:id: We will use this later in C# to reference the menu item with Resource.Id.addFriendMenu.

• android:icon: This is an image resource to display for the menu item. We used a built-in Android one for a generic plus icon.

• android:showAsAction...

Composing messages

The next screen is a bit more complicated; we will need to create a ListView that uses multiple layout files for each row, depending on the type of the row. We'll also need to perform some layout tricks to place a view below the ListView and set up the ListView to autoscroll.

For the next screen, let's begin by creating a new layout named Messages.axml in the layout folder of the Resources directory and then perform the following steps:

1. Drag a new ListView onto the layout. Set its Id to @+id/messageList.

2. Check the box for Stack From Bottom, and set Transcript Mode to alwaysScroll. This will set it up to display items from the bottom up.

3. Set the Weight value to 1 for the ListView in the Layout tab under the LinearLayout section.

4. Drag a new RelativeLayout onto the layout. Let its Id be the default value, or remove it.

5. Drag a new Button inside RelativeLayout. Set its Id to @+id/sendButton.

6. Check the box for Align Parent Right in the Layout tab.

7. Drag a new Plain Text found in the...

Summary

In this chapter, we started out by going over the basic settings in the Android Manifest file. Next, we implemented a custom Application class for setting up our ServiceContainer. We then went over the different types of Android layouts and implemented a login screen using native Android views. Next, we set up a menu in the Android action bar by using an Android layout and overriding a few built-in methods. We implemented the friends list screen, and learned the basics of ListView and adapters. Finally, we implemented the messages screen, and used the more advanced functionality available in list view adapters and layouts.

Upon completing this chapter, you will have a partially functional Android version of XamSnap. You will have gained some deeper understanding of the Android SDK and tools. You should be confident in developing your own Android applications using Xamarin. Take it upon yourself to implement the remaining screens that we did not cover in this chapter. If you get lost...