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

  • Go to PCL project and right click on the project.
  • And then create a new folder which name is CustomViews.
  • Now, we need to design it so, in this folder, I have to create a contentview whose name is "FloatingEntryView.xaml".
  • After CreatingFloatingEntryView.xaml  we will design a view for a custom floating label in Xamarin.Forms.

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.