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?
Todo App is a simple to do app developed with Xamarin and Firebase. The app allows you to create an account and login to create tasks and organize them into lists. You can see the tasks for the selected date in realtime mode, edit and delete them with swipe action, reorder them using drag and drop action and filter them by list from More screen. From Profile screen you can hide completed tasks on the main screen and see the total number of tasks, of completed tasks and lists that you created for your account. The app is available in both light and dark mode.
Android, iOS.
- Xamarin.Forms 5.0.
- MVVM (Prism).
- Xamarin CommunityToolkit
- Xamarin Firebase Auth (Firebase Authentication)
- Reactive UI (Realtime)
- Firebase Firestore (CRUD Operations)
- Source code: https://github.com/gheorghedarle/Xamarin-ToDoApp
- Author: Darle Gheorghe
Replicate design: https://www.uplabs.com/posts/game-store-ui-concept
Features:
- Transition Effect (Fade) on title, description and background image.
- Added icons to indicate which platform(s) are supported by the game.
- Centered images on the Carousel.
- Display the amount of trophies per game through using a Badge.
Android, iOS.
- Xamarin.Forms 5.0.
- Embedded Fonts.
- MVVM.
- Source code: https://github.com/Altevir/xamarinforms-game-store
- Author: Altevir
Cool transition animations with Shapes in Xamarin.Forms.
Android, iOS.
- Animations
- Shapes
- Source code: https://github.com/FabriBertani/XFShapeAnimatedTransitions
- Author: Fabricio Bertani
A Xamarin.Forms UI Challenge
Original Design: https://dribbble.com/shots/15278108-Fisherman-s-Fishing-Mobile-Apps
Android, iOS.
- CarouselView
- Custom Fonts
- Gradients
- Layouts
- Source code: https://github.com/kphillpotts/Fishing
- Author: Kym Phillpotts
Clone of Facebook Login UI Design in Xamarin Forms
Android, iOS.
- Layouts
- Source code: https://github.com/ShahrukhYousafzai/FacebookMobileAppLoginUIClone
- Author: Shahrukh Yousafzai
Replicating this Dribbble design in Xamarin.Forms.
Android, iOS.
- MVVM
- Embedded Fonts (https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/text/fonts)
- CollectionView
- Xamarin.Forms 5.0
- Xamarin Community Toolkit
- Source code: https://github.com/Altevir/xamarinforms-uvento
- Author: Altevir
Apple Watch launcher recreated with pure Xamarin.Forms.
Android, iOS.
- Animations!.
- Xamarin.Forms 5.
- Source code: https://github.com/mariusmuntean/MiniLauncher
- Author: Marius M.
UI replicated in Xamarin Forms.
⚠ Design obtained from Dribble. -> https://dribbble.com/shots/14814593-Chirstmas-Shopping-App
Android, iOS.
- Layouts.
- PancakeView.
- Blog: Replicating Christmas Shopping UI in Xamarin Forms
- Source code: https://github.com/LeomarisReyes/ChristmasShoppingUI
- Author: Leomaris Reyes
UI replicated in Xamarin Forms.
⚠ Design obtained from Dribble. -> https://dribbble.com/shots/14274577/attachments/5925600?mode=media
Android, iOS.
- CollectionView.
- Layouts.
- PancakeView.
- Blog: Replicating Bill Details UI in Xamarin Forms
- Source code: https://github.com/LeomarisReyes/BillDetailSample
- Author: Leomaris Reyes
Border Gradient Animation in Xamarin Forms.
You can watch the video here 👉 https://youtu.be/bS0N6U-Ei78
Android, iOS.
- Brushes.
- Shapes.
- Source code: https://github.com/devcrux/Border-Animation-in-Xamarin-Forms
- Author: Oludayo Alli
Building this beautiful Restaurant App in Xamarin Forms and spicing it up with some animations was made possible with Xamarin.Forms Shapes class and CarouselView.
You can watch the video here 👉 https://youtu.be/6gb_iRj_BYU
Android, iOS.
- Brushes.
- BindableLayout.
- CarouselView.
- Shapes.
- Source code: https://github.com/devcrux/Beautiful-Restaurant-App-in-Xamarin-Forms
- Author: Oludayo Alli
UI challenge in Xamarin.Forms. Original design from Ghulam Rasool.
Android, iOS.
- Shell.
- Navigation.
- SharedTransitions.
- Source code: https://github.com/shawyunz/XampleUI
- Author: Shaw Yu
Open Source Xamarin.Forms application with the company lastest news, social networks, team members, etc.
Android, iOS.
The application has been developed with Xamarin Forms, using controls like CollectionView or CarouselView. Also, we use some community developed NuGet packages:
- ReactiveUI
- Refit
- Html Agility Pack
- LottieXamarin
- Sharpnado.Shadows
- Xamarin.Plugin.SharedTransitions
- FFImageLoading
- Mobile.BuildTools
- Source code: https://github.com/DevsDNA/DevsDNA-Application
Replicate a Sneaker UI App obtained from Dribble. You can check the design here.
Android, iOS.
- CollectionView.
- Layouts.
- Navigation.
- PancakeView.
- Blog: Replicating Sneakers UI in Xamarin Forms
- Source code: https://github.com/LeomarisReyes/SneakersUIApp
- Author: Leomaris Reyes
Replicate a Streaming UI App obtained from Dribble. You can check the design here.
Android, iOS.
- CollectionView.
- Layouts.
- PancakeView.
- Blog: Replicating Streaming UI App in Xamarin Forms
- Source code: https://github.com/LeomarisReyes/StreamingUIApp
- Author: Leomaris Reyes
Replicate a Real Estate UI obtained from Dribble. You can check the design here.
Android, iOS.
- CollectionView.
- Layouts.
- MVVM.
- Blog: Replicating Real Estate Property details UI in Xamarin Forms
- Source code: https://github.com/LeomarisReyes/RealStateUIApp
- Author: Leomaris Reyes
The "Raw Rows" is a sliding puzzle that consists of a frame of numbered square tiles in random order with one tile missing. The object of the puzzle is to place the tiles in order by making sliding moves that use the empty space.
Download:
- AppStore: https://apps.apple.com/zw/app/raw-rows/id1513966639
- Google Play: https://play.google.com/store/apps/details?id=com.sourcesoft.rawrows&hl=en
Android, iOS.
- PancakeView.
- TouchView.
- XForms.Plugin.AnimationNavigationPage
- Xamarin.Essentials.
- Source code: https://github.com/AndreiMisiukevich/RawRows
- Author: Andrei Misiukevich
Seemless transition is an essential part of user experience design and this project implements a custom menu transition from a title view in Xamarin Forms.
You can watch the video here ➤ https://youtu.be/768kDDR-0BY
Android, iOS.
- Animations.
- BindableLayout.
- Source code: https://github.com/devcrux/Menu-Transition-in-Xamarin-Forms
- Author: Oludayo Alli
Animations can add visual cues about what’s going on in your app and are especially useful when the state of your UI changes, such as when new content loads or new actions become available.
You can watch the video here ➤ https://youtu.be/ModuAWkv5K8
Android, iOS.
- Animations.
- BindableLayout.
- Source code: https://github.com/devcrux/Animated-Text-in-Xamarin-Forms
- Author: Oludayo Alli
Gradients have positive influence in modern designs. Xamarin.Forms 4.8 introduced the Xamarin.Forms Brushes that contain LinearGradientBrush, RadialGradientBrush and SolidColorBrush.
You can watch the video here ➤ https://youtu.be/ejDwwc1Iq1s
Android, iOS.
- Brushes.
- Source code: https://github.com/devcrux/Xamarin.Forms-Brushes-Animated-Gradient-Background
- Author: Oludayo Alli
Ever wondered how to replicate the cinema seats arrangements in Xamarin.Forms?
You can watch the video here ➤ https://youtu.be/j_nVou7lNz0
Android, iOS.
- SkiaSharp.
- Shapes.
- Source code: https://github.com/devcrux/Cinema-App-Using-SkiaSharp-and-Xamarin-Fomrs-Shapes
- Author: Oludayo Alli
App concept developed with Xamarin.Forms.
Android, iOS.
- MVVM
- PancakeView
- CollectionView
- Embedded Fonts
- Shapes
- Source code: https://github.com/Altevir/xamarinforms-furniture
- Author: Altevir
The Clip property of controls in Xamarin.Forms allows you to change the shape of your control. We will explore the use of this property as we design a Watch Shop Ecommerce App in Xamarin Forms.
You can watch the video here ➤ https://youtu.be/pb-2bXWhuMo
Android, iOS.
- SharedTransitions.
- Shapes.
- Source code: https://github.com/devcrux/Xamarin.Forms-Path---Watch-Shop
- Author: Oludayo Alli
Xamarin Forms Dark Store UI Design.
Android, iOS.
- CollectionView.
- BindableLayouts.
- MVVM.
- Shapes.
- Source code: https://github.com/ufukhawk/DarkStore
- Author: Ufuk Zimmerman
Xamarin.Forms App.
Android, iOS.
- MVVM
- PancakeView
- Embedded Fonts
- CollectionView
- Shapes
- Source code: https://github.com/Altevir/xamarinforms-delivery
- Author: Altevir
Xamarin.Forms App.
Android, iOS.
- MVVM
- PancakeView
- Embedded Fonts
- CollectionView
- Source code: https://github.com/Altevir/xamarinforms-kidzee-games
- Author: Altevir
Xamarin.Forms App.
Android, iOS.
- MVVM
- PancakeView
- Embedded Fonts
- VisualStateManager
- CollectionView
- Source code: https://github.com/Altevir/xamarinforms-art-store
- Author: Altevir
Xamarin.Forms App.
Android, iOS.
- MVVM
- PancakeView
- Sharpnado.Shadows
- Embedded Fonts
- CollectionView
- Source code: https://github.com/Altevir/xamarinforms-ecommerce-liquors
- Author: Altevir
Replicate a Calendar / Schedule UI obtained from Dribble. You can check the design here!
Android, iOS.
- CollectionView.
- Layouts.
- Blog: Replicating Schedule UI in Xamarin Forms
- Source code: https://github.com/LeomarisReyes/CalendarUI
- Author: Leomaris Reyes
Making use of the Xamarin.Forms Shapes and Xamarin.Forms MediaElement to create an elegant login page in xamarin forms.
You can watch the video here ➤ https://youtu.be/X3ZND30zI_A
Android, iOS.
- MediaElement.
- Shapes.
- Source code: https://github.com/devcrux/Xamarin.Forms-Shapes
- Author: Oludayo Alli
Let's make use of the Xamarin.Forms Expander to create an animated expandable list in Xamarin Forms.
You can watch the video here ➤ https://youtu.be/ndF5we5_Ijw
Android, iOS.
- Animations.
- Expander.
- Source code: https://github.com/devcrux/Animated-Xamarin.Forms-Expander
- Author: Oludayo Alli
App concept developed with Xamarin.Forms. Design: https://www.uplabs.com/posts/ecommerce-app-ui-concept
Android, iOS.
- Animations.
- CollectionView.
- PancakeView.
- Source code: https://github.com/Altevir/xamarinforms-ecommerce-headphones
- Author: Altevir
A fancy UI sample for an app providing pancake recipes, based on: https://dribbble.com/shots/4476011-Cook-Book-App-Design.
Android, iOS.
- Source code: https://github.com/sthewissen/iBakePancakes
- Author: Steven Thewissen
Creating a custom side menu in Xamarin.Forms using Swipe View.
You can watch the video here ➤ https://www.youtube.com/watch?v=1Vs4T6pEi_
Android, iOS.
- Animations.
- SwipeView.
- Source code: https://github.com/devcrux/Xamarin.Forms-SwipeView
- Author: Oludayo Alli
Replicate Uplabs Nike App design in Xamarin.Forms.
Android, iOS.
- FFImageLoading by Daniel Luberda
- Layouts.
- Blog: Xamarin.Forms – XamNike UI
- Source code: https://github.com/dgokhan/XamNike
- Author: Gökhan Doğru
Implement a Flip Animation in Xamarin.Forms.
You can watch the video here ➤ https://youtu.be/VSNFLBGJEXs
Android, iOS.
- Animations
- Source code: https://github.com/devcrux/Flip-Animation-in-Xamarin.Forms
- Author: Oludayo Alli
Let’s make use of the Xamarin.Forms Expander to create and expandable list in Xamarin Forms.
Creating an expandable list in Xamarin Forms use to be tricky but now with the new Expander in Xamarin Forms, it is quite easy.
You can watch the video here ➤ https://youtu.be/rT3LwzSsMmo
Android, iOS.
- Expander
- PancakeView.
- Source code: https://github.com/devcrux/Xamarin.Forms-Expander
- Author: Oludayo Alli
Replicate a Flight UI obtained from Dribbble (Gleb Kuznetsov✈) using Xamarin.Forms.
Android, iOS.
- CollectionView.
- PancakeView.
- Blog: Replicating Flight UI
- Source code: https://github.com/LeomarisReyes/FlightUISample
- Author: Leomaris Reyes
Implementation of a coffee shopping UI using Xamarin.Forms.
Android, iOS.
- CarouselView.
- Custom Fonts.
- SkiaSharp.
- Source code: https://github.com/sthewissen/Coffeeffee
- Author: Steven Thewissen
Learn how to design a COMPLETE Video Player in Xamarin Forms.
You can watch the video here ➤ https://youtu.be/mLJe5yxq_7o
Android, iOS.
- Source code: https://github.com/devcrux/Play-Video-in-Xamarin-Forms
- Author: Oludayo Alli
Learn how to design a COMPLETE Music Player in Xamarin Forms. In this video, we will make use of the Media Manager Plugin to make a music player app in Xamarin Forms and at the end you will see that music player in xamarin forms in quite easy.
You can watch the video here ➤ https://youtu.be/7plenjrcloM
Android, iOS.
- Source code: https://github.com/devcrux/Play-Audio-in-Xamarin-Forms
- Author: Oludayo Alli
Xamarin.Forms Wallet CreditCard.
Android, iOS.
- CardsView.
- CollectionView.
- Fonts Embedded.
- MVVM.
- PancakeView.
- Rg.Plugins.PopUp.
- Source code: https://github.com/Altevir/xamarinforms-wallet-creditcard
- Author: Altevir
Microsoft News is built with Xamarin. I wondered… can I build the same 🤔? So I set out on this journey, I called it Nomadic.
Android, iOS.
- Xamarin.Essentials by Microsoft
- NewsAPI C# Client by newsapi.org
- Xamarin.Auth
- Plugin.FirebaseAuth by f-miyu
- Plugin.CloudFirestore by f-miyu
- UserDialogs by Allan Ritchie
- PancakeView by Steven Thewissen
- CardsView by Andrei Misiukevich
- FFImageLoading by Daniel Luberda
- Rg.Plugins.Popup by Martijn van Dijk
- CurrentActivityPlugin by James Montemagno
- Part 1: Setting Up
- Part 2: Using Shell
- Part 3: Using Custom Fonts
- Part 4: Using Themes
- Part 5: NewsAPI
- Part 6: Using MVVM
- Part 7: Using CarouselView
- Part 8: Using ListView with DataTemplateSelector
- Part 9: Using WebView
- Part 10: Using CollectionView
- Part 11: Using Geo Location
- Part 12: Creating a Firebase Project
- Part 13: Google Authentication with Firebase
- Part 14: Using Xamarin.Essentials Preferences and SecureStorage .....aand Wrapping Up 🙃
- Source code: https://github.com/Elisha-Misoi/Nomadic
- Author: Elisha Misoi
In this Xamarin Forms Tutorial we will be looking at creating Clock Animation in Xamarin Forms. We will be making use of the SkiaSharp 2D Drawing engine to create a beautiful clock and alarm design.
You can watch the video here ➤ https://youtu.be/JbpDyRfaOqM
Android, iOS.
- SkiaSharp.
- PancakeView.
- Xamarin.Essentials.
- Source code: https://github.com/devcrux/Clock-Animation-in-Xamarin-Forms
- Author: Oludayo Alli
Xamarin Forms has awesome tools and controls to create modern user interface suc as Collection View & Carousel View.
This is the source code of a video, where you will learn the process of creating a Burger Shop App in Xamarin Forms using Collection View, Carousel View & the MVVM architectural pattern.
You can watch the video here ➤ https://youtu.be/mbqzKf7HVcQ
Android, iOS.
- CarouselView.
- CollectionView.
- Source code: https://github.com/devcrux/CollectionView-and-CarouselView-in-Xamarin-Forms
- Author: Oludayo Alli
The concept of animation in Xamarin Forms will be explained by designing a Real-Estate Property App, where I also explained how to work with embedded fonts, gradients, custom renderers and visual state manager.
You can watch the video here ➤ https://youtu.be/WDw9R8seqMo
Android, iOS.
- Embeded Fonts.
- Gradients.
- Animations.
- VisualState.
- Source code: https://github.com/devcrux/Animation-In-Xamarin-forms
- Author: Oludayo Alli
This is a sample Xamarin.Forms application demonstrating how to build a user interface for a chat app. Inspired by https://dribbble.com/shots/10446738-Direct-messaging-mobile-app-design.
Android, iOS.
- Shell.
- CollectionView.
- Lottie.
- PancakeView.
- XamEffects.
- Xamarin.Essentials.
- Source code: https://github.com/DamienDoumer/freechat
- Author: Damien Doumer
Ecommerce design with Xamarin Forms. Design based on https://www.uistore.design/items/shopping-ui-kit-for-adobe-xd/.
Android, iOS.
- CollectionView.
- SwipeView.
- Source code: https://github.com/exendahal/ecommerceXF
- Author: Santosh Dahal
Mbongo means Money translating into Portuguese. Developed with the intention of practice and increasing productivity creating screens with Xamarin.Forms.
Android, iOS.
- CircleImage.
- MVVM.
- PancakeView.
- Xamarin.Essentials.
- Source code: https://github.com/Amaro96/Amaro96-MbongoUIApp
- Author: Amaro Manungu
Smart Home App UI by Amit kumar using Xamarin.Forms.NeoControls.
Android, iOS.
- Source code: https://github.com/felipebaltazar/NeomorphismSmartHomeApp
- Author: Felipe Baltazar
Xamarin.Forms goodlooking UI sample using the new Expander Control. Based on Shopping List design by Hila Peleg.
Android, iOS.
- BindableLayout.
- Expander.
- Triggers.
- Source code: https://github.com/jsuarezruiz/ShoppingList
- Author: Javier Suárez
Developed with the aim of tracking Covid-19 cases with data from affected countries.
Android, iOS.
- Flurl
- PancakeView
- LiteDB
- Rg.Plugins.Popup
- PluginMultilingual
- Skeleton
- FFImageLoading
- Xamarin.Essentials
- Source code: https://github.com/Altevir/xamarinforms-covid19
- Author: Altevir
Xamarin.Forms PhotoStock UI design.
Android, iOS.
- Animations.
- FlowListView.
- PancakeView.
- Shared Transitions.
- Source code: https://github.com/ufukhawk/XamarinForms-PhotoStock-UI-Design
- Author: Ufuk Zimmerman
Animal Crossing Turnip Tracking Mobile App.
Android, iOS.
- Custom Fonts.
- PancakeView.
- SwipeView.
- Visual.
- Source code: https://github.com/jamesmontemagno/app-ac-islandtracker
- Author: James Montemagno
Xamarin.Forms Covid19 Tracker App
Android, iOS.
- Acr.UserDialogs
- Newtonsoft.Json
- Corcav.Behaviors
- Xamarin.Essentials
- Xamarin.Forms
- Xamarin.Forms Visual
- Source code: https://github.com/AnthonyLatty/Covid19.Forms
- Author: Marc-Anthony Latty
Xamarin.Forms fresh e-commerce app.
Android, iOS.
- Animations.
- Gestures.
- PancakeView.
- SharedTransitions.
- Source code: https://github.com/valentineg8/FreshApp
- Author: Lorenzo Araujo
Replicating Exotic Fruits App in Xamarin Forms.
Android, iOS.
- CollectionView.
- Layouts.
- PancakeView.
- Blog: Replicating Exotic Fruits App in Xamarin Forms
- Source code: https://github.com/LeomarisReyes/ExoticFruitSample
- Author: Leomaris Reyes
Xamarin.Forms Profile Page.
Android, iOS.
- Source code: https://github.com/AndreiMisiukevich/XamarinFormsProfilePage
- Author: Andrei Misiukevich
Xamarin.Forms travel app UI.
Android, iOS.
- Animations.
- CarouselView.
- PancakeView.
- SharedTransitions.
- Source code: https://github.com/valentineg8/PlacesApp
- Author: Lorenzo Araujo
Modern UI using Xamarin Forms.
Android, iOS.
- Layouts (Frame).
- Shell.
- Syncfusion.Xamarin.SfChart.
- Source code: https://github.com/exendahal/ModernDesignXF
- Author: Santosh Dahal
Xamarin.Forms Fashion Store UI.
Android, iOS.
- Animations.
- BindableLayout.
- CarouselView.
- PancakeView.
- SharedTransitions.
- Source code: https://github.com/valentineg8/FashionStore
- Author: Lorenzo Araujo
UI exercise using C# UI, Xplat Images and Fonts, and LiveSharp.
Android, iOS and UWP.
- C# UI.
- XPlat Images.
- Xplat Fonts.
- Source code: https://github.com/davidortinau/YogaUI
- Author: David Ortinau
Xamarin.Forms goodlooking UI sample.
Android, iOS.
- Custom Entry.
- PancakeView.
- Source code: https://github.com/ufukhawk/Chased-Home-UI-Design
- Author: Ufuk Zimmerman
Xamarin.Forms goodlooking UI sample using SwipeView to create a custom Pull to Refresh effect.
Android, iOS.
- CollectionView.
- Lottie.
- SwipeView.
- Source code: https://github.com/jsuarezruiz/FlightBookingApp
- Author: Javier Suárez
UI replicated in Xamarin Forms. ⚠ Design obteined from Dribble. -> https://dribbble.com/shots/9061096-Travel-App
Android, iOS.
- CollectionView.
- Layouts.
- Blog: Let’s replicate a Travel App in Xamarin Forms
- Source code: https://github.com/LeomarisReyes/TravelAppSample
- Author: Leomaris Reyes
Xamarin.Forms app demonstrating the dual-screen device capability for neo and duo devices .
Android, UWP.
- BindableLayout.
- CollectionView.
- MediaElement.
- Xamarin.Forms.DualScreen.
- StateTriggers.
- Source code: https://github.com/xamarin/app-xamarintv
UI replicated in Xamarin Forms. Design obteined from Dribble: https://dribbble.com/shots/9033707-Daily-UI-006-User-Profile
Android, iOS.
- Layouts.
- Styles.
- Blog: Replicating User Profile UI in Xamarin.Forms
- Source code: https://github.com/LeomarisReyes/UserProfileUISample
- Author: Leomaris Reyes
Xamarin.Forms good looking UI sample for Surface Duo.
Android.
- CarouselView.
- CollectionView.
- IndicatorView.
- Using Xamarin.Duo SDK.
- Source code: https://github.com/jsuarezruiz/FoodDeliveryAppDuo
- Author: Javier Suárez
A Xamarin.Forms sample based on the dribble designs by Rajat.
Android, iOS.
- CollectionView.
- Styles.
- MVVM.
- Blog: Replicating Food UI Sample
- Source code: https://github.com/LeomarisReyes/FoodAppSample
- Author: Leomaris Reyes
Xamarin.Forms Call Screen UI.
Android, iOS.
- Gradients.
- Shared Transitions.
- Source code: https://github.com/ufukhawk/XamCall
- Author: Ufuk Zimmerman
Xamarin.Forms Login Screen UI.
Android, iOS.
- Dynamic Design.
- Animations.
- Custom controls.
- GradientView.
- Source code: https://github.com/ufukhawk/XamUIDemo
- Author: Ufuk Zimmerman
A Xamarin.Forms UI Challenge based on the fantastic dribble designs by Tamo Miqeladze.
- CarouselView.
- Custom Fonts.
- PancakeView.
- Blog: Xamarin UI Challenge – Cruise Mobile UI
- Author: Andreas Nesheim
A Xamarin.Forms UI Challenge based on the fantastic dribble designs by UXIS.
- CarouselView.
- Shared Transitions.
- Source code: https://github.com/kphillpotts/FurnitureStore
- Author: Kym Phillpotts
Super nice UI inspired by Mountain Trip Design.
Android, iOS.
- VisualStateManager.
- Layouts.
- Styles.
- Blog: Replicating great UI in Xamarin Forms
- Source code: https://github.com/LeomarisReyes/MountainTripSample
- Author: Leomaris Reyes
Xamarin.Forms goodlooking UI sample using the new SwipeView.
Android, iOS.
- CollectionView.
- SwipeView.
- Source code: https://github.com/jsuarezruiz/FavFighters
- Author: Javier Suárez
Replicate the Facebook profile page with Xamarin.Forms.
Android, iOS.
- CollectionView.
- Bindable Layouts.
- PancakeView.
- FFImageLoading.
- Source code: https://github.com/LeomarisReyes/FaceBookUISample
- Author: Leomaris Reyes
This is a Xamarin.Forms sample app showcasing the use of Material Design and CollectionView within the new Shell container. Demo presented at Microsoft Ignite 2019.
Android, iOS and UWP.
- CollectionView.
- Shell.
- Visual.
- Source code: https://github.com/davidortinau/FlyMe
- Author: David Ortinau
A Xamarin.Forms UI Challenge.
Android, iOS.
- Bindable Layout (Staggered list).
- Source code: https://github.com/kphillpotts/IcelandMoss
- Author: Kym Phillpotts
This UI Challenge is based on the fantastic dribble designs by Antra Sharma.
Android, iOS.
- CardsView.
- PancakeView.
- Blog: Xamarin UI Challenge - Credit Card Checkout
- Source code: https://github.com/egbakou/CreditCardCheckout
- Author: Kodjo Laurent Egbakou
Xamarin.Forms goodlooking UI sample using the new CarouselView (Parallax).
Android, iOS.
- Animations.
- CarouselView.
- PancakeView (Corner Radius, Gradients).
- Parallax.
- Source code: https://github.com/jsuarezruiz/DrinksGalleryApp
- Author: Javier Suárez
A very pretty weather application built with Xamarin.Forms.
Android, iOS.
- Xamarin.Essentials.
- PancakeView (Corner Radius, Gradients).
- Source code: https://github.com/jamesmontemagno/app-pretty-weather
- Author: James Montemagno
Xamarin.Forms goodlooking UI sample using the new CarouselView.
Android, iOS.
- Animations.
- Xamarin.Forms CarouselView.
- Custom Fonts.
- Lottie.
- Shell.
- Video Player.
- Source code: https://github.com/jsuarezruiz/TravellingApp
- Author: Javier Suárez
Beautiful WeatherApp UI in Xamarin.Forms.
Android, iOS.
- ImageButton.
- ListView.
- Styles.
- Source code: https://github.com/devcrux/WeatherApp
- Author: Oludayo Alli
This UI Challenge is based on the fantastic dribble designs by Rick Waalders.
https://dribbble.com/shots/1551934-Unzone-Details-popup-animation
Android, iOS.
- Animations.
- BindableLayout.
- Source code: https://github.com/kphillpotts/UnZone
- Author: Kym Phillpotts
This UI Challenge is based on the fantastic dribble designs by Tubik.
Android, iOS.
- Animations.
- ListView.
- Custom ViewCell.
- SkiaSharp.
- Source code: https://github.com/kphillpotts/BookSwap
- Author: Kym Phillpotts
Beautiful Fashion App Design Using Xamarin.Forms.
Android, iOS.
- CollectionView.
- Shell.
- Source code: https://github.com/devcrux/FashionApp
- Author: Oludayo Alli
A Xamarin.Forms UI Challenge based on https://dribbble.com/shots/5935613-Marvel-Movies-Interaction.
Android, iOS.
- CardsView.
- Animations.
- Source code: https://github.com/kphillpotts/MarvelCards
- Author: Kym Phillpotts
Elegantly designed XAML templates for Xamarin.Forms apps. These templates follow the MVVM design pattern to provide hassle-free integration and are compatible with Android, iOS, and UWP platforms.
Android, iOS and UWP.
- Rich, elegant XAML layouts for most common scenarios.
- Layouts optimized for phones, tablets, and desktop.
- Based on the MVVM design pattern to work with any MVVM framework.
- Easy integration.
- Developer-friendly APIs.
- Appearance customization using styles.
- Optimized layouts to get the best possible performance.
- Right-to-left rendering support.
Air NZ app clone using Xamarin.Forms.
Android, iOS.
- Animations.
- Carousel.
- Source code: https://github.com/rid00z/AirNZClone
- Author: Michael Ridland
Xamarin Forms UI Challenge based on Ballon Slider Control design.
Android, iOS.
- SkiaSharp.
- Use Svg (FFImageLoading).
- Gestures.
- Source code: https://github.com/shanranm/Balloony
- Author: Shanmukha Ranganath
Google Play Music app clone using Xamarin.Forms Shell.
Android, iOS.
- Xamarin.Forms Shell.
- CollectionView.
- SearchHandler.
- Blog: Xamarin.Forms 4 In Action: Rapid Prototyping
- Source code: https://github.com/AlejandroRuiz/PlayMusicXamarinClone
- Author: Alejandro Ruiz Varela
A beautiful Xamarin Forms sample using Atomic Design, F# and Fabulous.
Android, iOS.
- Carousel.
- F# UI (using Fabulous).
- Blog: Creating beautiful Xamarin Forms apps using Atomic Design, F# and Fabulous
- Source code: https://github.com/mallibone/FabulousTravel
- Author: Mark Allibone
Xamarin.Forms UI Challenge Ficus IoT App.
Android, iOS.
- Custom ListView.
- Corner Radius.
- Source code: https://github.com/Pujolsluis/FicusUIChallenge
- Author: Luis Pujols
Xamarin.Forms UI challenge from the design by Victoria Sgarro.
Android, iOS.
- Animations.
- Circle Images.
- PancakeView (Corners, etc.).
- Source code: https://github.com/shanranm/XamBookLibrary
- Author: Shanmukha Ranganath
A Xamarin.Forms UI challenge from the design by JIANGGM.
Android, iOS.
- Animations.
- CollectionView.
- VisualStateManager.
- Custom Controls.
- Parallax effect.
- Blog: [Xamarin UI Challenge] Art Plant Mall
- Source code: https://github.com/jsuarezruiz/Art-Plant-Mall
- Author: Javier Suárez
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:
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.
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.
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.
- 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
Weather App is a simple weather app developed using Xamarin Forms. The app allows you to see the weather from your current location or another location around the globe using OpenWeather Api. Using One Call API the app displays the current weather, 24 hours and 6 days forecast. You can add new locations and switch between them from the Locations screen. From Settings screen you can change the unit system from metric to imperial. The app is available in light mode and dark mode.
Android, iOS.
- Xamarin Forms 5.0
- Xamarin Essentials (Location, Placemark, Internet Connection)
- Xamarin CommunityToolkit (SideMenu, StateLayout, TouchEffect, Expander)
- Prism.Forms (MVVM, Dialogs)
- Fody
- Xamarin.Plugin.SharedTransitions (Page Transitions)
- Source code: https://github.com/gheorghedarle/Xamarin-WeatherApp
- Author: Darle Gheorghe