Milèstre BV
Dec 18, 2019

Xamarin Forms: Customize Material Entry


When you want to hide the underline that is normally presented in an Entry control, you have different options:
  • effect
  • custom renderer
In this blog item we are going to discuss the custom renderer. 

Note: to give all controls more or less the same look on Android as well as iOS we hve installed Xamarin.Forms.Visual.Material. For a detailed description: Material design

First create the following class: CustomEntry:

using Xamarin.Forms;

namespace Xamarin_Support.Controls
{
    public class CustomEntry : Entry
    {
        // no other code needs to go here unless you want more customizable properties.
    }
}
 

In the Android project create a custom renderer:

using Android.Content;
using eFarma_App.Droid.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Material.Android;
using Xamarin.Forms.Platform.Android;
using Xamarin_Support.Controls;

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace eFarma_App.Droid.Renderers
{
    class CustomEntryRenderer : MaterialEntryRenderer
    {
        public CustomEntryRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.EditText.Background = null;
                Control.EditText.SetBackgroundColor(Android.Graphics.Color.Transparent);
            }
        }
    }
}

Also in the iOS project create a custom renderer:

using eFarma_App.iOS.Renderers;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using Xamarin_Support.Controls;

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace eFarma_App.iOS.Renderers
{
    public class CustomEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                // Transparent
                Control.BackgroundColor = UIColor.FromWhiteAlpha(1, 1);
                Control.BorderStyle = UITextBorderStyle.Line;
            }
        }
    }
}


To use the custom entry, you define it 

 <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="http://prismlibrary.com"
             prism:ViewModelLocator.AutowireViewModel="True"
             xmlns:ctrl="clr-namespace:Xamarin_Support.Controls;assembly=Xamarin_Support"
             x:Class="eFarma_App.Views.Modules.Login.LoginPage" Visual="Material"
             NavigationPage.HasNavigationBar="False" BackgroundColor="White">
    <Grid Margin="20">
            <ctrl:CustomEntry Placeholder="UserName" Text="{Binding UserName}" />
    </Grid>
</ContentPage>

You will see that the line normally shown in an Entry control is unvisible now.

About us

Milèstre is a digital development agency based in Maastricht and operating all over the world. Since 2003 we build software solutions together with established companies and great startups. During the years we have developed a process that enables us to transform ideas into meaningful, intelligent and designfull experiences for mobile and web. A process where strategy, design, development and user experience are playing an important rol.

 

Contact us

Milestre BV
Ambyerstraat Zuid 82
6225 AJ Maastricht
Netherlands

Tel: +31(0)43 - 4070780
Email: info@milestre.nl
Recent Posts

© Copyright 2019 - Milestre BV
Top