Mobile developer with 4+ years of experience, focused on multiplatform technologies such as Xamarin.Forms and Flutter.
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
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:
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:
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:
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.
Thanks for reading and keep coding! 😁
Edit: It also could work on macOS, but needs some changes and adjustments, check the sample repo.
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
Create your free account to unlock your custom reading experience.