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:

• Exploring Map Tracking UI in Xamarin Forms
• Google Maps Place Search in Xamarin Forms
• Setting pickup location marker using Google Maps in Xamarin Forms
• Google Maps Styling in Xamarin Forms

You can check the full source code here.

Tools used

• Xamarin.Forms.GoogleMaps – Map library for Xamarin.Forms using Google maps API    https://github.com/amay077/Xamarin.Forms.GoogleMaps
• PropertyChanged.Fody – Handles property changed events.
  https://github.com/Fody/PropertyChanged
• Xamarin.Essentials – Essential cross-platform APIs for your mobile apps.
  https://github.com/xamarin/Essentials
• CardsView – CardsView | CarouselView | CoverflowView | CubeView for Xamarin.Forms. https://github.com/AndreiMisiukevich/CardView
• Acr.UserDialogs – A cross-platform library that allows you to call for standard user dialogs. https://github.com/aritchie/userdialogs
• Xam.Plugins.Forms.ImageCircle – Circle Images for your Xamarin.Forms Applications.  https://github.com/jamesmontemagno/ImageCirclePlugin
• Icon8 Icons – Free design resources and software.
  https://icons8.com/

Happy xUber  🙂