Some time ago, the Xamarin team officially release , a feature to change the UI controls of your application in order to follow the proposed by Google. This is an amazing feature, as you can check on the official docs and . They are built natively on each platform and have a great performance, but…(there is always a but), they just add the standard material UI elements, leaving aside other elements, like the Material Visual Material Design Rules other several posts about using it outlined text field For that reason, today we are going to create a material outlined textfield entirely on Xamarin.Forms!!! As I said before, the Material Visual feature built by Xamarin is completely native, for that reason it has better performance. We are going to have to sacrifice a bit of performance (nearly unnoticeable to the untrained eye) in order to write this control, , without having to deal with native code on each platform. almost Before starting, let’s make a list of what our control should have: Rounded borders Borders should change color Placeholder animation Character counter Leading and trailing icons Interactive icons for password Helper and error texts Error icon In order to see what we’re dealing with, we just build our app with a regular entry and a material one. Let’s focus on the regular entry: In UWP it has a frame that we need to get rid of. iOS also has a frame that needs to be removed. In Android, we need to remove that annoying underline. So let’s create some effects for it: Great! Now we need to make from our outlined text field a reusable solution, so we should create a component of it. We will use: A Grid that contains all, because of its overlay property will help us with the placeholder animation. A Frame to wrap around the entry with rounded borders and border color. The other labels for helper, counter, and error texts. Images for the icons Let’s create our reusable component! And now on the code behind let’s define the bindable properties, event handlers, animations, and methods. Let’s test it Just add the new component into a Xamarin.Forms page to see the results: Now let’s see it running in all the 3 different supported platforms! That’s all for today folks Hope this helps you to create new cool components and explore the power of Xamarin.Forms controls. Also, you can see a complete sample repository for this post on GitHub. https://github.com/FabriBertani/XFOutlinedMaterialEntry Thanks for reading and keep coding! 😁 It also could work on macOS, but needs some changes and adjustments, check the sample repo. Edit: Also published at https://dev.to/fabribertani/create-a-material-outlined-text-field-with-xamarin-forms-1eg1 Disclaimer: The author provides this code and software “AS IS”, without warranty of any kind, express or implied, including but not limited to fitness for a particular purpose and non-infringement. In no event shall the author be liable for any claim, damages or other liability in connection with the software or code provided here

An Example of Leveraging Xamarin's Material Visual Feature for a Consistent Look in iOS and Android

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How To Add Animation Effects To Xamarin.Forms with Shapes

18 Best Productivity Apps For Remote Workers

15 Most Useful Tools for Software Devs in 2021

3 Ubuntu Alternatives for better User Experience

5 Handy Apps for Boosting Productivity During a Workation

5 Personal Finance Apps to Take Control of Your Financial Situation

How To Add Animation Effects To Xamarin.Forms with Shapes

18 Best Productivity Apps For Remote Workers

15 Most Useful Tools for Software Devs in 2021

3 Ubuntu Alternatives for better User Experience

5 Handy Apps for Boosting Productivity During a Workation

5 Personal Finance Apps to Take Control of Your Financial Situation

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps