Xamarin Forms label across entry border

Issue

How could I achieve rendering a label in a cutoff portion of a round-corner border around an Entry in Xamarin Forms?

Solution

There are two ways to achieve this:

1. (The simple way) Using the SfTextInputLayout with ConainerType as Outlined

<inputLayout:SfTextInputLayout
    Hint="Name" 
    ContainerType="Outlined">
    <Entry/>
</inputLayout:SfTextInputLayout>

2. (More of creative way) Overlapping a Label on a Frame surrounding the Entry

Custom renderer to remove the native outline for Entry

Native outline as to be removed.

Android

public class NoOutlineEntryRenderer : EntryRenderer
{
    public NoOutlineEntryRenderer(Context context) : base(context)
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);
        this.Control.Background = null;
    }
}

iOS

public class NoOutlineEntryRenderer : EntryRenderer
{
    public NoOutlineEntryRenderer()
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);
        this.Control.BorderStyle = UIKit.UITextBorderStyle.None;
    }
}

XAML

Place a Frame and Label behind the Entry in the same Grid

    <Grid>
        <Frame
            BorderColor="Blue"
            CornerRadius="5"
            HasShadow="False"/>
        <Label
            x:Name="fancyEntryLabel"
            AnchorY="1"
            AnchorX="0"
            Margin="10"
            Padding="3"
            TextColor="Blue"
            BackgroundColor="White"
            HorizontalOptions="Start"
            Text="Some text"/>
        <local:NoOutlineEntry
            x:Name="fancyEntry"
            BackgroundColor="Transparent"/>
    </Grid>

Translating on Entry Focus change

fancyEntry.Focused += FancyEntry_Focused;
fancyEntry.Unfocused += FancyEntry_Unfocused;

    ... ...

private void FancyEntry_Unfocused(object sender, FocusEventArgs e)
{
    if (string.IsNullOrEmpty(fancyEntry.Text))
    {
        fancyEntryLabel.ScaleXTo(1);
        fancyEntryLabel.ScaleYTo(1);
        fancyEntryLabel.TranslateTo(0, 0);
    }
}

private void FancyEntry_Focused(object sender, FocusEventArgs e)
{
    fancyEntryLabel.ScaleYTo(0.8);
    fancyEntryLabel.ScaleXTo(0.5);
    fancyEntryLabel.TranslateTo(0, -(fancyEntryLabel.Height));
}

Hope this could help

Answered By - Nikhileshwar