A curated list of awesome Xamarin.Forms samples to show how to create goodlooking UI with Xamarin.Forms.

Work in progress. Contributions are always welcome!

Would you like to see a list of published applications made with Xamarin.Forms? Thank you David Ortinau for the list!

Would you like to see more goodlooking UI samples?. Do you know Snppts?

The Run Away! app: Drawing gradient lines on top of Maps with SkiaSharp.

Android, iOS.

• Maps.
• Paths in the map using SkiaSharp.

• Blog: The Run Away! app: Drawing gradient lines on top of Maps with SkiaSharp
• Source code: https://github.com/roubachof/SkiaSharpnado
• Author: Jean-Marie Alfonsi

A Xamarin.Forms UI Challenge.

Android, iOS.

• SkiaSharp.
• PancakeView.
• Custom tabs.

• Source code: https://github.com/kphillpotts/RottenUI
• Author: Kym Phillpotts

A Xamarin.Forms UI Challenge playing with SkiaSharp and animations.

Android, iOS.

• SkiaSharp.
• Animations.

• Source code: https://github.com/kphillpotts/MountainMobile
• Author: Kym Phillpotts

A beautiful credit card payment UI, inspired by the following UI from CVTemplates.

Android, iOS.

• Visual.
• Behaviors.

• Blog: Credit Card Payment UI in Xamarin Forms
• Source code: https://github.com/CrossGeeks/PaymentUISample
• Author: Charlin Agramonte

Uber Clone using Xamarin.Forms.

Android, iOS.

• Google Maps.
• Cards.
• Dialogs.

• Blog: Introducing xUber – Uber clone using Xamarin Forms
• Source code: https://github.com/CrossGeeks/xUber
• Author: Rendy del Rosario

A Xamarin.Forms version of a banking app concept, showing off how to use a base page.

Android, iOS.

• BasePage.
• Xamarin Essentials.
• PancakeView.

• Blog: Create a kickass banking app using a BasePage in Xamarin
• Source code: https://github.com/sthewissen/KickassUI.Banking
• Author: Steven Thewissen

A Yellow App clone made with Xamarin.Forms.

Android, iOS.

• Custom Map.
• MasterDetailPage.

• Source code: https://github.com/ionixjunior/YellowClone
• Author: Ione Souza Junior

A Xamarin.Forms version of the NeteaseCloudMusic app.

Android, iOS.

• Animations.
• Audio Visualizer.
• Blur Effect.
• Parallax Effect.
• Translucent StatusBar.
• Video Player.
• Xamarin.Forms Shell.

• Source code: https://github.com/o1298098/Xamarin-CloudMusic
• Author: o1298098

A Xamarin.Forms UI Challenge.

Android, iOS.

• SkiaSharp controls.
• PancakeView.

• Source code: https://github.com/kphillpotts/DayVsNight
• Author: Kym Phillpotts

WhatsApp UI in Xamarin.Forms.

Android, iOS.

• Custom Floating Action Button.
• Use of Emoji.
• Use of the camera.

• Source code: https://github.com/egbakou/WhatsAppUI
• Author: Kodjo Laurent Egbakou

The EMI (Equated Monthly Instalment) Calculator is an application developed using Xamarin.Forms and Syncfusion controls to calculate the EMI with the given details of principal amount, tenure, and interest.

Android, iOS.

• XAML UI
• Converters
• Custom controls
• Data binding
• Behaviours
• MVVM
• Xamarin.Essentials
• Localization
• Styles
• AutoFac for dependency injection
• Phone and tablet layout

Source code: https://github.com/syncfusion/xamarin-showcase-emi-calculator

This project uses the following Syncfusion controls:

• SfNumericUpDown
• SfChart
• SfDataGrid
• SfTabView
• XlsIO
• SfButton

Awesome UI: Timeline with images in Xamarin.Forms.

Android, iOS.

• ListView to Timeline.
• Custom ViewCell.

• Source code: https://github.com/egbakou/Timeline
• Author: Kodjo Laurent Egbakou

Xamarin.Forms good looking UI sample. This sample is based on Art News App designed by Shirley Yao.

Android, iOS.

• XAML Animations.
• BindableLayout.
• CollectionView
• Page transitions.
• Shared element transitions.

• Source code: https://github.com/jsuarezruiz/ArtNews
• Author: Javier Suárez

A Xamarin.Forms Layout challenge. From the design found at: https://dribbble.com/shots/6177235-Valuable-Auction-Product-Page by Alex Pesenka.

Android, iOS, UWP.

• Animations.
• BindableLayout.

• Blog: Xamarin.Forms UI Challenges - Art Auction
• Source code: https://github.com/kphillpotts/ArtAuction
• Author: Kym Phillpotts

Xamarin.Forms good looking UI sample. This sample is based on Timeline Profile Screen designed by Anton Aheichanka.

Android, iOS.

• SkiaSharp.

• Source code: https://github.com/jsuarezruiz/TimelinePulse
• Author: Javier Suárez

A Xamarin.Forms version of the Traveler app to prove you can create good-looking UI with Xamarin.Forms.

Android, iOS.

• CollectionView.
• PancakeView.

• Blog: Travel broadens the mind…
• Source code: https://github.com/sthewissen/KickassUI.Traveler
• Author: Steven Thewissen

A Xamarin.Forms application with form highlight animation using SkiaSharp and Xamarin.Forms built-in animations.

Android, iOS.

• SkiaSharp.

• Blog: Xamarin.Forms + SkiaSharp: Create Awesome Cross-Platform Animations in Your Mobile App
• Source code: https://github.com/andreinitescu/AnimatedHighlightApp
• Author: Andrei Nitescu

A Xamarin.Forms version of the Filter Menu design by Anton Aheichanka to prove you can create goodlooking UI with Xamarin.Forms.

Android, iOS.

• Xamarin.Forms Animations.
• SkiaSharp.

• Blog: [Xamarin.Forms Challenge] My Tasks
• Source code: https://github.com/jsuarezruiz/MyTasks
• Author: Javier Suárez

A Xamarin.Forms version of the Chameleon app to prove you can create goodlooking UI with Xamarin.Forms.

Android, iOS.

• Xamarin Essentials.
• Lottie.

• Blog: Creating an encyclopedia page in Xamarin.Forms
• Source code: https://github.com/sthewissen/KickassUI.Chameleon
• Author: Steven Thewissen

A Xamarin.Forms sample to show how to use Bindable Layout. This sample is based on User Profile Screen designed by Hernan Vionnet.

Android, iOS & UWP.

• Xamarin.Forms BindableLayout.
• CSS.

• Source code: https://github.com/jsuarezruiz/BindableLayoutPlayground
• Author: Javier Suárez

A fictitious retail company showcasing the future of intelligent mobile application experiences.

Android & iOS.

• Xamarin.Forms Shell.
• SkiaSharp.

• Source code: https://github.com/Microsoft/TailwindTraders-Mobile

A simple but good looking Xamarin.Forms UI screen.

Android & iOS.

• Gradient background on the content page.
• A randomly generated set of stars that rotates independently.
• A small card with the result of your calculations.
• A beautiful moon, also rotating independently.
• Some entry animation of controls.

• Blog: Xamarin.Forms in Space!
• Source code: https://github.com/sthewissen/Posy
• Author: Steven Thewissen

A Xamarin.Forms Carousel using a nice parallax effect.

Android & iOS.

• Xamarin.Forms 3.2
• Caroulel
• Parallax
• Gradient Color animation

• Source code: https://github.com/sthewissen/KickassUI.ParallaxCarousel
• Author: Steven Thewissen

A Xamarin.Forms music player sample.

Android & iOS.

• Xamarin.Forms 3.1
• SkiaSharp
• Animations

• Source code: https://github.com/jsuarezruiz/PulseMusic
• Author: Javier Suárez

Martin Finkel has created a version of the application with real player using libvlcsharp.

Restaurant App is a sample open source application, powered by ASP.NET Core 2.1 and Xamarin.Forms 3.0. It incorporates material design and provides us with an overview of how to build mobile and web applications with a clean architecture and write testable and clean code.

Android, iOS & UWP for client app. ASP.NET Core 2.1 for server API.

• Xamarin.Forms 3.1

• Source code: https://github.com/Jurabek/Restaurant-App
• Author: Jurabek Azizkhujaev

A Xamarin.Forms timer until your next vacation.

Android & iOS.

• Xamarin.Forms 3.1
• SkiaSharp

• Source code: https://github.com/jsuarezruiz/MyTripCountdown
• Author: Javier Suárez

Sample Xamarin.Forms 3.0 Phone App showed in Microsoft Build 2018. Use your camera during a conference to capture your experience. Let Vision do the heavy lifting of identifying known products and scan your images to text for easier searching.

Android, iOS & UWP.

• Xamarin.Forms 3.0
• FlexLayout
• CSS
• VisualStateManager
• Custom Vision
• Computer Vision API

• Source code: https://github.com/Microsoft/ConferenceVision

Travelers are always on the go, so SmartHotel360 offers a beautiful fully-native cross-device mobile app for guests and business travelers built with Xamarin.

Android, iOS & UWP.

• Custom animations from XAML.
• Custom Map.
• SkiaSharp Charts.
• Xamarin.Forms Native Forms.
• Live Player.
• NFC.

• Source code: https://github.com/Microsoft/SmartHotel360-mobile-desktop-apps

BikeSharing360 is a fictitious example of a smart bike sharing system with 10,000 bikes distributed in 650 stations located throughout New York City and Seattle. Their vision is to provide a modern and personalized experience to riders and to run their business with intelligence. Was a demo in the Connect(); 2016.

Android, iOS & UWP.

• Custom animations from XAML.
• Custom Map.

• Source code: https://github.com/Microsoft/BikeSharing360_MobileApps

A bike activity App. Sample to show Microcharts usage.

Android, iOS & UWP.

• SkiaSharp charts.

• Source code: https://github.com/aloisdeniel/Microcharts.Samples
• Author: Aloïs Deniel

Xamarin Evolve 2016 Mobile App.

This app is around 15,000 lines of code. The iOS version contains 93% shared code, the Android version contains 90% shared code, the UWP has 99% shared code, and our Azure backend contains 23% shared code with the clients!

Android, iOS & UWP.

• Azure + Online/Offline Sync
• Barcode Scanning
• Calendar Integration
• Maps & Navigation
• Push Notifications
• Phone Dialer
• Wi-Fi configuration
• URL Navigation (Universal Links + Google App Indexing)

• Source code: https://github.com/xamarinhq/app-evolve
• Authors: James Montemagno & Pierce Boggan

ListView with transparent background and a purple gradient behind.

Android, iOS & UWP.

• Custom ViewCells.

• Blog: Xamarin.Forms Layout Challenges – Great Places
• Source code: https://github.com/kphillpotts/XamarinFormsLayoutChallenges
• Author: Kym Phillpotts

Samples to show that Xamarin.Forms is capable of creating something that looks really good.

Android & iOS.

• Find a Vet
• Phoenix Peaks
• Jobbberr
• Woofer
• HeatMap
• Hot Sauce
• Findr
• MallDash

• Source code: https://github.com/awolf/Xamarin-Forms-InAnger
• Author: Adam J Wolf

Android, iOS & UWP.

• Custom Entry.
• Circle Images.

• Blog: Creating The Instagram UI In Xamarin.Forms
• Source code: https://github.com/adamped/Instagram
• Author: Adam Pedley

This sample show how to recreate a beautifull Social Network profile type page in Xamarin.Forms.

• Curved header Image.
• Profile Image that overlaps the header.

• Blog: Xamarin.Forms Layout Challenges – Social Network App
• Source code: https://github.com/kphillpotts/XamarinFormsLayoutChallenges
• Author: Kym Phillpotts

A simple (but beautiful) Xamarin.Forms tutorial screen.

Android & iOS.

• Carousel

• Blog: Creating a simple but good-looking app tutorial
• Source code: https://github.com/sthewissen/KickassUI.FancyTutorial
• Author: Steven Thewissen

A Xamarin.Forms version of the Runkeeper App.

Android & iOS.

• Custom Tabs.
• Custom fonts in the page header.
• Custom logo in page header.
• Carousel.
• Custom Map.

• Blog: Creating a good-looking Xamarin Forms UI: Runkeeper
• Source code: https://github.com/sthewissen/KickassUI.Runkeeper
• Author: Steven Thewissen

A Xamarin.Forms version of the Spotify App.

Android & iOS.

• Translucent navigation bar.
• Blurred fullscreen background.
• Custom Slider.

• Blog: Creating a good-looking Xamarin Forms UI: Spotify
• Source code: https://github.com/sthewissen/KickassUI.Spotify
• Author: Steven Thewissen

A Xamarin.Forms version of the Twitter App.

Android & iOS.

• Android floating action button.
• MasterDetailPage custom icon.
• Custom Tabs (colors).

• Blog: Creating a good-looking Xamarin Forms UI: Twitter
• Source code: https://github.com/sthewissen/KickassUI.Twitter
• Author: Steven Thewissen

A timeline of activities. This is useful for things like transportation schedules or class times.

Android, iOS & UWP.

• ListView Header and Footer.
• Custom ViewCell.

• Blog: Xamarin.Forms Layout Challenges – Timeline
• Source code: https://github.com/kphillpotts/XamarinFormsLayoutChallenges
• Author: Kym Phillpotts

A Xamarin.Forms version of the Netflix App.

Android & iOS.

• Horizontal List.
• Transparent NavigationBar on Android and iOS.
• Parallax effect.
• Multi-column List.

• Blog: Creando la interfaz de Netflix con Xamarin.Forms
• Source code: https://github.com/jsuarezruiz/xamarin-forms-netflix-sample
• Author: Javier Suárez

A Xamarin.Forms version of the Facebook App.

Android, iOS & UWP.

• Right Slide Bar.
• Disappearing NavigationBar.
• Like Animations.

• Blog: Beautiful Xamarin – Facebook Clone in Xamarin.Forms
• Source code: https://github.com/XAM-Consulting/FacebookForms
• Author: Michael Ridland

Movies is a Xamarin.Forms GTK backend application that makes use of The Movie Database (TMDb) API to demonstrate the possibilities of the new backend making use of a great variety of functionality.

Android, iOS, Linux (GTK), macOS, UWP and Windows (WPF).

• MasterDetailPage.
• Maps.
• Gtk Themes.
• Desktop Apps for Linux, macOS and Windows.

• Source code: https://github.com/jsuarezruiz/xamarin-forms-gtk-movies-sample
• Author: Javier Suárez

WalkthroughApp is a Xamarin.Forms application that makes use of CarouselView and Lottie, to demonstrate the possibilities of creating a fluid and powerful Walkthrough without requiring Custom Renderers.

Android, iOS.

• CarouselView
• Lottie
• Animations

• Source code: https://github.com/jsuarezruiz/xamarin-forms-walkthrough
• Author: Javier Suárez