Hello Xamarians,

Today, I am going to tell you about the Hack for Floating Label. It is very important for designing purposes.
Xamarin

I know many people are searching for floating label and I also searched for that a lot and found it’s a hack. So, I am going to demonstrate, how to create a floating label in Xamarin.Forms, it is very easy and interesting.

So let's gets started with the borderless entry. Here are some background reserouces to chekc out:

Fine, we continue with BorderlessEntry and now we are using the bindableproperty and some animation code for the floating label.

Implementation

XAML CODE=> FloatingEntry.xaml

  1. <ContentView.Content>
  2. <Grid ColumnSpacing="16" Margin="0,8">
  3. <Grid.RowDefinitions>
  4. <RowDefinition Height="Auto" />
  5. <RowDefinition Height="1" /> </Grid.RowDefinitions>
  6. <Label x:Name="HiddenLabel" FontSize="10" IsVisible="False" Margin="25,15,25,10" />
  7. <local:CustomEntry x:Name="EntryField" Text="{Binding Text, Mode=TwoWay}" Margin="0,12,0,0" />
  8. <BoxView x:Name="BottomBorder" BackgroundColor="Gray" Grid.Row="1" HeightRequest="2" Margin="0" HorizontalOptions="FillAndExpand" />
  9. <BoxView x:Name="HiddenBottomBorder" BackgroundColor="Gray" Grid.Row="1" HeightRequest="2" Margin="0" WidthRequest="0" HorizontalOptions="Center" /> </Grid>
  10. </ContentView.Content>

Okay, we are done with the design part .

Now, we are setting the customEntry, label, and box-view. This makes your design ready. Now, we are going to write code behind using some Event "Focused" and "UnFocused", for appearing label when I focused or unfocused entry.

Here, we set up BindableProperties on AccentColor, Text, TextColor, Placeholder, and PlaceholderColor.

Here, we write some coding.

C# Code FloatingEntry.cs

  1. using System.Threading.Tasks;
  2. using Xamarin.Forms;
  3. using Xamarin.Forms.Xaml;
  4. namespace XamBuddyApp.CustomControls.CustomView {
  5. [XamlCompilation(XamlCompilationOptions.Compile)]
  6. public partial class FloatingEntry: ContentView {
  7. public FloatingEntry() {
  8. InitializeComponent();
  9. EntryField.BindingContext = this;
  10. EntryField.Focused += async (s, a) => {
  11. HiddenBottomBorder.BackgroundColor = AccentColor;
  12. EntryField.TextColor = HiddenLabel.TextColor = AccentColor;
  13. HiddenLabel.IsVisible = true;
  14. if (string.IsNullOrEmpty(EntryField.Text)) {
  15. //Here we give animation on label position, label fading and box view.
  16. await Task.WhenAll(HiddenBottomBorder.LayoutTo(new Rectangle(BottomBorder.X, BottomBorder.Y, BottomBorder.Width, BottomBorder.Height + 2), 200), HiddenLabel.FadeTo(1, 120), HiddenLabel.TranslateTo(HiddenLabel.TranslationX - 25, EntryField.Y - EntryField.Height, 200, Easing.BounceIn));
  17. EntryField.Placeholder = null;
  18. } else {
  19. await HiddenBottomBorder.LayoutTo(new Rectangle(BottomBorder.X, BottomBorder.Y, BottomBorder.Width, BottomBorder.Height), 200);
  20. }
  21. };
  22. EntryField.Unfocused += async (s, a) => {
  23. if (string.IsNullOrEmpty(EntryField.Text)) {
  24. await Task.WhenAll(HiddenBottomBorder.LayoutTo(new Rectangle(BottomBorder.X, BottomBorder.Y, 0, BottomBorder.Height + 2), 200), HiddenLabel.FadeTo(0, 180), HiddenLabel.TranslateTo(HiddenLabel.TranslationX + 25, EntryField.Y, 50, Easing.BounceIn));
  25. EntryField.Placeholder = Placeholder;
  26. } else {
  27. await HiddenBottomBorder.LayoutTo(new Rectangle(BottomBorder.X, BottomBorder.Y, 0, BottomBorder.Height), 100);
  28. }
  29. };
  30. }
  31. public static BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), typeof(FloatingEntry), defaultBindingMode: BindingMode.TwoWay);
  32. public static BindableProperty PlaceholderProperty = BindableProperty.Create(nameof(Placeholder), typeof(string), typeof(FloatingEntry), defaultBindingMode: BindingMode.TwoWay, propertyChanged: (bindable, oldVal, newval) => {
  33. var matEntry = (FloatingEntry) bindable;
  34. matEntry.EntryField.Placeholder = (string) newval;
  35. matEntry.HiddenLabel.Text = (string) newval;
  36. });
  37. public static BindableProperty IsPasswordProperty = BindableProperty.Create(nameof(IsPassword), typeof(bool), typeof(FloatingEntry), defaultValue: false, propertyChanged: (bindable, oldVal, newVal) => {
  38. var matEntry = (FloatingEntry) bindable;
  39. matEntry.EntryField.IsPassword = (bool) newVal;
  40. });
  41. public static BindableProperty KeyboardProperty = BindableProperty.Create(nameof(Keyboard), typeof(Keyboard), typeof(FloatingEntry), defaultValue: Keyboard.Default, propertyChanged: (bindable, oldVal, newVal) => {
  42. var matEntry = (FloatingEntry) bindable;
  43. matEntry.EntryField.Keyboard = (Keyboard) newVal;
  44. });
  45. public static BindableProperty AccentColorProperty = BindableProperty.Create(nameof(AccentColor), typeof(Color), typeof(FloatingEntry), defaultValue: Color.Accent);
  46. public Color AccentColor {
  47. get => (Color) GetValue(AccentColorProperty);
  48. set => SetValue(AccentColorProperty, value);
  49. }
  50. public Keyboard Keyboard {
  51. get => (Keyboard) GetValue(KeyboardProperty);
  52. set => SetValue(KeyboardProperty, value);
  53. }
  54. public bool IsPassword {
  55. get => (bool) GetValue(IsPasswordProperty);
  56. set => SetValue(IsPasswordProperty, value);
  57. }
  58. public string Text {
  59. get => (string) GetValue(TextProperty);
  60. set => SetValue(TextProperty, value);
  61. }
  62. public string Placeholder {
  63. get => (string) GetValue(PlaceholderProperty);
  64. set => SetValue(PlaceholderProperty, value);
  65. }
  66. }
  67. }

In the code, we gave some animation effects so that the effect of float can be seen as the original widget of Android.

Finally, our code is complete.

Here, I am creating a login on the MainPage.xml so that we can see the effect of the floating label. So let us design it.

XAML CODE=> MainPage.xaml

  1. <ContentPage.Content>
  2. <Grid Padding="35" BackgroundColor="#9688EE">
  3. <Grid.RowDefinitions>
  4. <RowDefinition Height="Auto"/>
  5. <RowDefinition Height="Auto"/>
  6. <RowDefinition Height="Auto"/>
  7. <RowDefinition Height="Auto"/>
  8. <RowDefinition Height="*"/>
  9. </Grid.RowDefinitions>
  10. <StackLayout HorizontalOptions="CenterAndExpand" Grid.Row="0" Grid.Column="0">
  11. <Label Text="Wonder" TextColor="White" FontSize="32" FontAttributes="Bold" HorizontalOptions="Center"/>
  12. <Label Text="UI Design By Xamarin Buddy" TextColor="White" Font="18,Bold"/>
  13. <StackLayout Spacing="0" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" >
  14. <Label Text="Facebook" TextColor="White"/>
  15. <Label Text="Twitter" TextColor="White"/>
  16. </StackLayout>
  17. </StackLayout>
  18. <cv:FloatingEntry Placeholder="Email" AccentColor="White" Grid.Row="1" Grid.Column="0" />
  19. <cv:FloatingEntry Placeholder="Password" IsPassword="True" AccentColor="White" Grid.Row="2" Grid.Column="0"/>
  20. <Label Text="Forgot Password?" TextColor="White" Grid.Row="3" Grid.Column="0" Margin="0,-15,0,0"/>
  21. <StackLayout Spacing="25" Padding="10" Grid.Row="4" Grid.Column="0" VerticalOptions="EndAndExpand">
  22. <Button Text="Login" BackgroundColor="White" TextColor="#9688EE" BorderRadius="5" HeightRequest="45"
  23. BorderWidth="3" BorderColor="Gray"/>
  24. <Label Text="Register Now" HorizontalOptions="CenterAndExpand" TextColor="White" />
  25. </StackLayout>
  26. </Grid>
  27. </ContentPage.Content>
Xamarin

TA-DA!!!

XF Floating Label is working successfully.