Create a Material Outlined Text Field with Xamarin.Forms
Tags: xamarinforms, materialdesign, xamarin
Published: 2021-05-25 15:27:03

Sometime ago, the Xamarin team officially release [Material Visual](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual/material-visual), a feature to change the UI controls of your application in order to follow the [Material Design Rules & Guidelines](https://material.io/design) proposed by Google. 
This is an amazing feature, as you can check on the official docs and [other several posts](https://devblogs.microsoft.com/xamarin/visual-challenge-conquered/) about using it. 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 [outlined text field](https://material.io/components/text-fields).
![Material outlined text field sample on the Material docs.](https://cdn-images-1.medium.com/max/800/1*FmvKdygeyM7VEJENGd0shw.png)
###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, *almost*, without having to deal with native code on each platform.
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.
![Regular and material entries on Android, iOS and UWP](https://cdn-images-1.medium.com/max/800/1*nl9-G9toUFNHgXNeiHd-IA.png)

Let's focus on the regular entry:
* In UWP it has a frame that we need to get rid of.
* In 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:
{% gist https://gist.github.com/FabriBertani/aed43e46902d8a50afbc124d81bb463c %}

{% gist https://gist.github.com/FabriBertani/33f90f37feb68a94bf6b3d9059cce9a8 %}

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 it 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!
{% gist https://gist.github.com/FabriBertani/79566beac06f826acca485684816c46c %}

And now on the code behind let's define the bindable properties, event handlers, animations  and methods.

{% gist https://gist.github.com/FabriBertani/f8cda27d94973687f8e3953f964722d2 %}

### Let's test it
Just add the new component into a Xamarin.Forms page to see the results:

{% gist https://gist.github.com/FabriBertani/0f4edad01cb2a4ea24c3c28521c1f4b9 %}

***

Now let's see it running in all the 3 different supported platforms!

![Our Material Outlined Entry running on Android, iOS and UWP!](https://cdn-images-1.medium.com/max/800/1*xq51epaZl_gvJFt-KylpRw.gif)

### That's all for today folks
Hope this help 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.

{% github https://github.com/FabriBertani/XFOutlinedMaterialEntry no-readme %}

Thanks for reading and keep coding! 😁

___
**Edit:** It also could works on macOS, but needs some changes and adjustments, check the sample repo.

![Kinda running on macOS, need fixes and adjustments](https://cdn-images-1.medium.com/max/800/1*uNnX4aEEHb7mer2NZtsuhQ.png)