Outlined Textbox in Xamarin.Forms

Question

I want to implement material outlined textbox in Xamarin.Forms. I had created custom renderers but not able to apply style to it. I want text box like this image https://i.s

Answer 1

You can use Custom Renderer to custom a View which contained a material designed Entry .

Create a EntryView in Forms:

public class EntryView : ContentView
{
    public static readonly BindableProperty TextProperty =
      BindableProperty.Create("Text", typeof(string), typeof(EntryView), null);
    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }
}

Second , you need to create the EntryViewRenderer in Android :

public class EntryViewRenderer : ViewRenderer
{
    global::Android.Views.View view;
    global::Android.Widget.EditText editText;
    EntryView entryView;
    Activity activity;

    protected override void OnElementChanged(ElementChangedEventArgs e)
    {
        base.OnElementChanged(e);
        if(e.NewElement != null)
        {
            entryView= e.NewElement as EntryView;
        }

        if (e.OldElement != null || Element == null)
        {
            return;
        }

        try
        {
            SetupUserInterface();
            SetupEventHandlers();
            AddView(view);
        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.WriteLine(@"           ERROR: ", ex.Message);
        }
    }

    private void SetupEventHandlers()
    {
        editText.TextChanged += EditText_TextChanged;
    }

    private void EditText_TextChanged(object sender, Android.Text.TextChangedEventArgs e)
    {
        entryView.Text = editText.Text; 
        Console.WriteLine("chanegd +" + entryView.Text);
    }

    void SetupUserInterface()
    {
        activity = this.Context as Activity;
        view = activity.LayoutInflater.Inflate(Resource.Layout.EntryLayout, this, false);

        editText = view.FindViewById(Resource.Id.editText1);
    }

    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
        base.OnLayout(changed, l, t, r, b);

        var msw = MeasureSpec.MakeMeasureSpec(r - l, MeasureSpecMode.Exactly);
        var msh = MeasureSpec.MakeMeasureSpec(b - t, MeasureSpecMode.Exactly);

        view.Measure(msw, msh);
        view.Layout(0, 0, r - l, b - t);
    }
}

In addition , you need to add EntryLayout for this View :

Now , you can use it in Xaml of Xamarin Forms :

xmlns:app18="clr-namespace:App18"

The effect :

If need to modify color of outline , just add style in Resources/values/styles.xml .

In Resources/values/colors.xml add follow code :

#570dff

Finally used in EntryLayout.xml :

The efect: