Press "Enter" to skip to content

Introducing xUber – Uber clone using Xamarin Forms

About this article

This article is my contribution to #XamarinUIJuly, which is basically a series of blog posts where every day of July a Xamarin community member posts a blog about Xamarin and UI. You can see more information and other amazing blog posts by clicking on the badge below:

If you have followed my blog lately should have noticed I have been posting lots of content on how to achieve different things with Google Maps using Xamarin Forms (Adding style, Setting pickup location, map tracking, search places, etc). In this article, will make use of all of those tips by doing an Uber Clone App.

Since Uber app has a lot of details decided to limit the scope to just doing a few UI screens with the main details and some map customizations. Specifically, will replicate the following screens:

Let’s start!

When starting with this project the first thing I decided was how to handle the navigation between each screen, by using the Uber App I realized they use the same screen to display different views over the map, so here I did the same thing.

The following subviews are structured inside a MapPage:

  • RecentPlaceView
  • SearchHeaderView
  • SearchContentView
  • PriceView

To handle which view is shown depending on a state represented each state in an Enum:

To hide/show the views used DataTriggers:

Also created ChangePageStatusCommand in the ViewModel which basically changes the current state to show the proper view for that state.

Main Page View

In this screen we can observe 3 main parts:

Map: To achieve a similar Uber map style followed my previous article about Google Maps styling.

MasterDetail: Used a MasterDetailPage as the main page to be able to have the left sliding menu with Master being the options menu and Detail the MapPage.

Recent Places View: Used a grid view to show each element that represents the recent places.

SearchPage View

To handle the search Places view, using two views one for the header and another one for the search results, that’s because when selecting the pickup location the user can set this location using a pin over the map, so I have to hide the search results view.

To get the search results integrated Google Maps Places API by following my previous article about searching places and to set the pickup location based on this article as well.

Also in the search header view when selecting the entry it changes the background color, to achieve it I did it by using Visual State Manager and adding it as a general style.

Route View

To render the route followed my previous article about map tracking.

Used CardView plugin, to show the price options since the price is segmented by category.

Master Detail View

For the menu, used a Grid and the CircleImage control to render the profile picture.

Here the final result:

Not perfect, but good enough to prove the concept 🙂

Here the full Google Maps article series:

You can check the full source code here.

Tools used

Happy xUber  🙂

4 Comments

  1. Dinesh Dinesh

    Exploring Map Tracking UI in Xamarin Forms

    I downloaded your source code, however these two properties are not identifying the ContextPage, though it is implemented in code behiend. This is your source code only.
    Do i need to do any changes to work please?

    • Dine Dine

      These properties
      CalculateCommand=”{Binding CalculateRouteCommand}”
      UpdateCommand=”{Binding UpdatePositionCommand}”

  2. Dine Dine

    Exploring Map Tracking UI in Xamarin Forms
    I downloaded your source code, however these two properties are not identifying the
    CalculateCommand=”{Binding CalculateRouteCommand}”
    UpdateCommand=”{Binding UpdatePositionCommand}”

    ContextPage, though it is implemented in code behind. This is your source code only.
    Do i need to do any changes to work please?

    • Rendy Rendy

      You need to define those bindable properties on your Page

Comments are closed.