paint-brush
An Example of Leveraging Xamarin's Material Visual Feature for a Consistent Look in iOS and Androidby@fabribertani

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

by Fabricio BertaniJune 2nd, 2021
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Xamarin.Forms allows you to create a material outlined textfield entirely on Xamararin.forms. This is a component built natively on each platform and has a great performance. We are going to have to sacrifice a bit of performance in order to write this control, almost, without having to deal with native code. In this case, we will sacrifice performance by creating a reusable component of the material-outlined text field. The code is created by Fabri Bertani, who is a mobile developer with 4+ years experience.

Company Mentioned

Mention Thumbnail
featured image - An Example of Leveraging Xamarin's Material Visual Feature for a Consistent Look in iOS and Android
Fabricio Bertani HackerNoon profile picture

Some time ago, the Xamarin team officially release Material Visual, a feature to change the UI controls of your application in order to follow the Material Design Rules proposed by Google. This is an amazing feature, as you can check on the official docs and other several posts 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

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.

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! 😁

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

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