XF Floating Label

Hello Xamarians, 

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

 

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: 

• Click here to get an Introduction of Custom Renderer.
• Click here to see a Youtube video  BorderlessEntry.
• Click here to read an article about BorderlessEntry .

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 Creating ”FloatingEntryView.xaml”  we will design a view for a custom floating label in Xamarin.Forms.

XAML CODE=> FloatingEntry.xaml

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

using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace XamBuddyApp.CustomControls.CustomView {
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class FloatingEntry: ContentView {
        public FloatingEntry() {
            InitializeComponent();
            EntryField.BindingContext = this;
            EntryField.Focused += async (s, a) => {
                HiddenBottomBorder.BackgroundColor = AccentColor;
                EntryField.TextColor = HiddenLabel.TextColor = AccentColor;
                HiddenLabel.IsVisible = true;
                if (string.IsNullOrEmpty(EntryField.Text)) {
                    //Here we give animation on label position, label fading and box view.
                    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));
                    EntryField.Placeholder = null;
                } else {
                    await HiddenBottomBorder.LayoutTo(new Rectangle(BottomBorder.X, BottomBorder.Y, BottomBorder.Width, BottomBorder.Height), 200);
                }
            };
            EntryField.Unfocused += async (s, a) => {
                if (string.IsNullOrEmpty(EntryField.Text)) {
                    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));
                    EntryField.Placeholder = Placeholder;
                } else {
                    await HiddenBottomBorder.LayoutTo(new Rectangle(BottomBorder.X, BottomBorder.Y, 0, BottomBorder.Height), 100);
                }
            };
        }
        public static BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), typeof(FloatingEntry), defaultBindingMode: BindingMode.TwoWay);
        public static BindableProperty PlaceholderProperty = BindableProperty.Create(nameof(Placeholder), typeof(string), typeof(FloatingEntry), defaultBindingMode: BindingMode.TwoWay, propertyChanged: (bindable, oldVal, newval) => {
            var matEntry = (FloatingEntry) bindable;
            matEntry.EntryField.Placeholder = (string) newval;
            matEntry.HiddenLabel.Text = (string) newval;
        });
        public static BindableProperty IsPasswordProperty = BindableProperty.Create(nameof(IsPassword), typeof(bool), typeof(FloatingEntry), defaultValue: false, propertyChanged: (bindable, oldVal, newVal) => {
            var matEntry = (FloatingEntry) bindable;
            matEntry.EntryField.IsPassword = (bool) newVal;
        });
        public static BindableProperty KeyboardProperty = BindableProperty.Create(nameof(Keyboard), typeof(Keyboard), typeof(FloatingEntry), defaultValue: Keyboard.Default, propertyChanged: (bindable, oldVal, newVal) => {
            var matEntry = (FloatingEntry) bindable;
            matEntry.EntryField.Keyboard = (Keyboard) newVal;
        });
        public static BindableProperty AccentColorProperty = BindableProperty.Create(nameof(AccentColor), typeof(Color), typeof(FloatingEntry), defaultValue: Color.Accent);
        public Color AccentColor {
            get => (Color) GetValue(AccentColorProperty);
            set => SetValue(AccentColorProperty, value);
        }
        public Keyboard Keyboard {
            get => (Keyboard) GetValue(KeyboardProperty);
            set => SetValue(KeyboardProperty, value);
        }
        public bool IsPassword {
            get => (bool) GetValue(IsPasswordProperty);
            set => SetValue(IsPasswordProperty, value);
        }
        public string Text {
            get => (string) GetValue(TextProperty);
            set => SetValue(TextProperty, value);
        }
        public string Placeholder {
            get => (string) GetValue(PlaceholderProperty);
            set => SetValue(PlaceholderProperty, value);
        }
    }
}

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

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

 

TA-DA!!!

XF Floating Label is working successfully.