Xamarin.Forms goodlooking UI Samples

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!

PulseMusic

A Xamarin.Forms music player sample.

Platforms

Android & iOS.

Features:

• Xamarin.Forms 3.1
• SkiaSharp
• Animations

More information:

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

My Trip Countdown

A Xamarin.Forms timer until your next vacation.

Platforms

Android & iOS.

Features:

• Xamarin.Forms 3.1
• SkiaSharp

More information:

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

ConferenceVision

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.

Platforms

Android, iOS & UWP.

Features:

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

More information:

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

SmartHotel

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.

Platforms

Android, iOS & UWP.

Features:

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

More information:

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

BikeSharing

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.

Platforms

Android, iOS & UWP.

Features:

• Custom animations from XAML.
• Custom Map.

More information:

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

Bikr

A bike activity App. Sample to show Microcharts usage.

Platforms

Android, iOS & UWP.

Features:

• SkiaSharp charts.

More information:

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

Evolve

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!

Platforms

Android, iOS & UWP.

Features:

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

More information:

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

GreatPlaces

ListView with transparent background and a purple gradient behind.

Platforms

Android, iOS & UWP.

Features:

• Custom ViewCells.

More information:

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

InAnger

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

Platforms

Android & iOS.

Samples

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

More information:

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

Instagram

Platforms

Android, iOS & UWP.

Features:

• Custom Entry.
• Circle Images.

More information:

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

Social Media

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

Features:

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

More information:

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

KickassUI.FancyTutorial

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

Platforms

Android & iOS.

Features

• Carousel

More information:

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

KickassUI.Runkeeper

A Xamarin.Forms version of the Runkeeper App.

Platforms

Android & iOS.

Features:

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

More information:

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

KickassUI.Spotify

A Xamarin.Forms version of the Spotify App.

Platforms

Android & iOS.

Features:

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

More information:

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

KickassUI.Twitter

A Xamarin.Forms version of the Twitter App.

Platforms

Android & iOS.

Features:

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

More information:

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

Timeline

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

Platforms

Android, iOS & UWP.

Features:

• ListView Header and Footer.
• Custom ViewCell.

More information:

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

Xamarin.Netflix

A Xamarin.Forms version of the Netflix App.

Platforms

Android & iOS.

Features:

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

More information:

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

Facebook

A Xamarin.Forms version of the Facebook App.

Platforms

Android, iOS & UWP.

Features:

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

More information:

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

Movies

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.

Platforms

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

Features:

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

More information:

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

WalkthroughApp

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

Platforms

Android, iOS.

Features:

• CarouselView
• Lottie
• Animations

More information:

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