(616) 371-1037

[email protected]

Building a Floating Label Entry with Xamarin.Forms

June 4, 2019 - Valeriy Kovalenko

1 Comment

The Float Label Pattern was introduced as a UI concept back in 2013 by Matt (@mds). Less than a year later it became a part of the “Material” design guidelines. There are a number of ways to implement floating labels in a Xarmarin Forms project – starting from building it from scratch or using wrappers for well-known native controls and ending with Xamarin Forms Material Visual. Here I’m going to show you another way with a user control, maintaining full control over appearance and animation.

Let’s start by creating a Xamarin Forms project and adding a ContentView XAML file to it.

Our user control will be a composition of two standard XF controls: a Label  control and an Entry  control. Also, I’m using a Grid  layout to position the label on top of the entry field.

We don’t want to expose the underlying controls, so let’s give consumers another way to customize the label and read the user input. First, let’s add a couple of bindable properties to the code behind.

And second, let’s bind the child controls to these properties.

Notice that I set the x:Name attribute of the content view and used the x:Reference binding extension to reference that name. This technique lets us expose any properties of the child controls without exposing the controls themselves. Now consumers of the user control can change the Title property and the Label.Text will be automatically updated. And since we’re using bindable properties, consumers can also bind to the Text property of the FloatingLabelInput and stay updated when users type anything. In the final solution, I’m going to expose a couple more properties that I’m interested in.

Now it’s time to make the label truly floating. The logic is straightforward: each time when the entry is empty and gets focus – move the placeholder up, each time when the entry is empty and loses focus – move the placeholder back. There are a few edge cases, but I’ll get back to them later. So let’s handle the Focused and Unfocused events of the Entry control.

The most interesting parts of the code above are the TransitionToTitle  and TransitionToPlaceholder  methods. The first one moves the label above the entry and decreases the font size, the second one reverts it back. And what’s good – you have full control over the animation here: choose which properties to animate, change the speed, adjust end positions, add easing functions, whatever you want.

Now let’s get back to the edge cases. Did you notice that the transition methods have a parameter that lets you skip the animation? We need it to set the initial position of the label. We don’t want to animate a dozen labels when a user opens a pre-filled form. We also don’t want to have the animation when the text is changed programmatically.

Having that in place, let’s make some final improvements. Our placeholder sits on top of the entry field and can prevent users from focusing on the entry field. Let’s make it pass the focus to the entry field.

And finally, let’s make it possible to put focus on the FloatingLabelInput programmatically.

And that is all we need. Let’s take a look at the final result:

Not bad, what do you think?

Happy coding! And let me know if you have any questions.

As always the entire working solution is available on Github.

Valeriy Kovalenko

One thought on “Building a Floating Label Entry with Xamarin.Forms

  • Luis

    June 19, 2019 at 11:39 pm

    Hi, nice work, how can I add MaxLength property and use of behaviors? thanks


Leave a comment

Your email address will not be published. Required fields are marked *