Grocery Shopping with Xamarin.Forms

My wife and I have tried using several iPhone list programs over the past year to create a shared grocery list so either of us could pick up items that we needed when one of us happened to be at the store.

We first tried Apple’s Reminders app since it was already on our phones and it allowed the sharing of lists via iCloud. It worked well at first when the list was small but completed items weren’t alphabetized automatically so we end up with duplicates in our list–it was quicker for my wife and I to add a new item to the list rather than spend time searching through an ever-growing list of unalphabetized items to find what you wanted to buy. We switched to Wanderlust, a more generic list program, that allows sharing but still doesn’t allow alphabetizing of bought, i.e. completed items (I don’t know why we chose that one, I guess I happened to have it on my iPhone and at first glance it seemed like it would solve the problem–lesson learned).

So I’m decided to write my own iPhone program using the latest version of Xamarin Platform and teach myself Xamarin.Forms.

The app will be relatively simple–two lists in a tabbed interface. The Buy list contains the items you want to purchase, the Add list contains the items you purchased previously (you can add items to each list). When you purchase something on the Buy list you swipe right on that item to remove it from the Buy list and automatically place it in the Add list. On the Add list you swipe left on an item to add it to the Buy list or swipe right on an item to remove it from the Add list entirely. The Add list is automatically alphabetized and has an index on the right so you can quickly get to the items you want to add. Right now I don’t know how I’ll handle syncing between devices, probably iCloud, Dropbox, or Azure.

Viand-Mockup-1

A Blank App (Xamarin.Forms Portable) solution contains three projects–one for your common code and one for each platform. In the solution below the common project is Viand and the Android and iOS projects are Viand.Droid and Viand.iOS, respectively.

Viand-Solution-1

When I was last building Android and iOS apps with Xamarin for Trimble you could share your controller, model, and view model code across platforms but your views, the actual screens the user interacted with, had to be coded specifically for each platform. Xamarin.Forms promises “native UIs for iOS, Android, and Windows Phone from a single, shared C# codebase.”

Out of the box Xamarin.Forms comes with a collection of pages, layouts, and controls. The grocery list app calls for a TabbedPage with two ContentPages, one for each tab. Each ContentPage will contain a single StackLayout that contains a single ListView.

Viand-Page-Layout-Control-Hierarchy

The TabbedPage page and the ContentPages are created by right-clicking the “common” project, selecting Add -> New File, and then choosing Forms Content Page. In keeping with the Xamarin.Forms hierarchy I’ve name the page and the layouts appropriately.

Viand-Solution-2

I changed TabPage so it inherits from TabbedPage instead of ContentPage and replaced the default code that was in the its constructor with a single line that set it’s Title property.

public class TabPage : TabbedPage
{
    public TabPage()
    {
       this.Title = "Viand";
    }
}

I left the default code in BuyPage but added two lines to set its Title and Icon properties, both of which will be used by TabPage.

public class BuyPage : ContentPage
{
    public BuyPage()
    {
        Title = "Buy";
        Icon = "19-checkmark.png";

        Content = new StackLayout {
            Children = {
                new Label { Text = "Hello BuyLayout" }
            }
        };
    }
}

I did the same with AddPage.

public class AddPage : ContentPage
{
    public AddLayout()
    {
        Title = "Add";
        Icon = "13-plus.png";

        Content = new StackLayout {
            Children = {
                new Label { Text = "Hello AddLayout" }
            }
        };
    }
}

The final step is to modify the App class to set the MainPage to my TabPage “container” and add the two pages as children (the App class can be found in the Viand.cs file located in the Viand project.)

public class App : Application
{
    public App()
    {
        MainPage = new TabPage {
           Children = { new BuyPage(), new AddPage() }
        };
    }
 }

Selecting each project as the startup project and running it in its respective emulator shows how native iPhone (left) and Android (right) user interfaces are created easily from a single codebase.

Viand-Tabbed-Screen-1

Very cool. Next steps, adding the TableViews to each layout, creating a data structure to handle Buy and Add list items, and implementing the swiping actions.

 

 

This entry was posted in Side Projects, Software Development and tagged , , , , . Bookmark the permalink.