Xamarin.forms Material entry placeholder size - xamarin.forms

Question

In my xamarin.forms App I am using material entry provided by xamarin.The control works fine. But how can I change the fontsize of placeholder?In ios the font size of placeholder is perfect, but in android it is much larger. And also the underline of the entry is little more in the left side.How to reduce the gap and align placeholder and underline equally(Refer Image)
What I Have done
What I am trying to achieve
My entry
<Entry x:Name="CustomerEntry" Visual="Material" FontSize="Small" Placeholder="Customer Name" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent" TextColor="White" PlaceholderColor="White" Margin="0,0,0,0" ></Entry>
Any help is appreciated

Answer 1

For the font size, I believe that you'll need to custom render. See this answer for details on how to do that. Make sure to inherit from the Material Render.
To solve the left alignment issue, I couldn't find a good solution that worked for both Android and iOS, so what I did was to suck the left margin of the entry over and then use a box view to cover the underline so everything looks left aligned. I had do this in multiple places, so I created a custom control. The downside to this was passing all the bindings through.
My custom control Xaml:
<?xml version="1.0" encoding="UTF-8" ?>
<Grid x:Class="x.x.x.Controls.MaterialControls.MaterialEntry"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Name="MaterialEntryComponent"
Margin="-16,0,0,0"
Focused="OnComponentFocused">
<Entry x:Name="MaterialEntryEntry"
Grid.Row="0"
BackgroundColor="{Binding EntryBackgroundColor}"
BindingContext="{x:Reference MaterialEntryComponent}"
Completed="OnEntryCompleted"
FontFamily="{Binding FontFamily}"
FontSize="{Binding FontSize}"
IsPassword="{Binding IsPassword}"
IsSpellCheckEnabled="{Binding IsSpellCheckEnabled}"
IsTextPredictionEnabled="{Binding IsTextPredictionEnabled}"
Keyboard="{Binding Keyboard}"
MaxLength="{Binding MaxLength}"
Placeholder="{Binding Placeholder}"
PlaceholderColor="{Binding PlaceholderColor}"
ReturnType="{Binding ReturnType}"
Text="{Binding Text}"
TextChanged="OnEntryTextChanged"
TextColor="{Binding TextColor}"
Visual="Material" />
<BoxView Grid.Row="0"
Margin="{OnPlatform iOS='0,0,0,-1'}"
BackgroundColor="{Binding EntryBackgroundColor}"
BindingContext="{x:Reference MaterialEntryComponent}"
HorizontalOptions="Start"
VerticalOptions="FillAndExpand"
WidthRequest="16" />
</Grid>
The bulk of the work is being done by the negative left margin on the parent grid, and the width of 16 on the BoxView. I did find out I needed to move the margin of the BoxView down by 1 on iOS to cover the underline.
And the code behind:
using System;
using System.Windows.Input;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace x.x.x.Controls.MaterialControls
{
/// <summary>
/// Code behind for the Material Entry control.
/// </summary>
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MaterialEntry : Grid
{
#region Event Handlers
/// <summary>
/// Completed event. Fires when the return key on the keyboard is pressed.
/// </summary>
public event EventHandler Completed;
/// <summary>
/// Text changed event. Fires when the text on the entry control is changed.
/// </summary>
public event EventHandler<TextChangedEventArgs> TextChanged;
#endregion
#region Bindable Properties
/// <summary>
/// Bindable property for the entry background color on the view.
/// </summary>
public static readonly BindableProperty EntryBackgroundColorProperty =
BindableProperty.Create(nameof(EntryBackgroundColor), typeof(Color), typeof(MaterialEntry), Color.White);
/// <summary>
/// Bindable property for the font family of the entry on the view..
/// </summary>
public static readonly BindableProperty FontFamilyProperty =
BindableProperty.Create(nameof(FontFamily), typeof(string), typeof(MaterialEntry), default(string));
/// <summary>
/// Bindable property for the font size of the entry on the view..
/// </summary>
public static readonly BindableProperty FontSizeProperty =
BindableProperty.Create(nameof(FontSize), typeof(double), typeof(MaterialEntry), 12.0);
/// <summary>
/// Bindable property for the IsPassword of the entry on the view.
/// </summary>
public static readonly BindableProperty IsPasswordProperty =
BindableProperty.Create(nameof(IsPassword), typeof(bool), typeof(MaterialEntry), false);
/// <summary>
/// Bindable property for the IsSpellCheckEnabled of the entry on the view.
/// </summary>
public static readonly BindableProperty IsSpellCheckEnabledProperty =
BindableProperty.Create(nameof(IsSpellCheckEnabled), typeof(bool), typeof(MaterialEntry), true);
/// <summary>
/// Bindable property for the IsTextPredictionEnabled of the entry on the view.
/// </summary>
public static readonly BindableProperty IsTextPredictionEnabledProperty =
BindableProperty.Create(nameof(IsTextPredictionEnabled), typeof(bool), typeof(MaterialEntry), true);
/// <summary>
/// Bindable property for the keyboard type of the entry on the view.
/// </summary>
public static readonly BindableProperty KeyboardProperty =
BindableProperty.Create(nameof(Keyboard), typeof(Keyboard), typeof(MaterialEntry), Keyboard.Default);
/// <summary>
/// Bindable property for the MaxLength of the entry on the view..
/// </summary>
public static readonly BindableProperty MaxLengthProperty =
BindableProperty.Create(nameof(MaxLength), typeof(int), typeof(MaterialEntry), int.MaxValue);
/// <summary>
/// Bindable property for the placeholder text of the entry on the view.
/// </summary>
public static readonly BindableProperty PlaceholderProperty =
BindableProperty.Create(nameof(Placeholder), typeof(string), typeof(MaterialEntry), default(string));
/// <summary>
/// Bindable property for the placeholder text color of the entry on the view.
/// </summary>
public static readonly BindableProperty PlaceholderColorProperty =
BindableProperty.Create(nameof(PlaceholderColor), typeof(Color), typeof(MaterialEntry), Color.Black);
/// <summary>
/// Bindable property for the return command of the entry on the view.
/// </summary>
public static readonly BindableProperty ReturnCommandProperty =
BindableProperty.Create(nameof(ReturnCommand), typeof(ICommand), typeof(Entry), default(ICommand));
/// <summary>
/// Bindable property for the return command parameter of the entry on the view.
/// </summary>
public static readonly BindableProperty ReturnCommandParameterProperty =
BindableProperty.Create(nameof(ReturnCommandParameter), typeof(object), typeof(Entry), default(object));
/// <summary>
/// Bindable property for the return type of the entry on the view.
/// </summary>
public static readonly BindableProperty ReturnTypeProperty =
BindableProperty.Create(nameof(ReturnType), typeof(ReturnType), typeof(Entry), ReturnType.Default);
/// <summary>
/// Bindable property for the text of the entry on the view.
/// </summary>
public static readonly BindableProperty TextProperty =
BindableProperty.Create(nameof(Text), typeof(string), typeof(MaterialEntry), default(string), BindingMode.TwoWay);
/// <summary>
/// Bindable property for the text color of the entry on the view.
/// </summary>
public static readonly BindableProperty TextColorProperty =
BindableProperty.Create(nameof(TextColor), typeof(Color), typeof(MaterialEntry), Color.Black);
#endregion
#region Properties
/// <summary>
/// The background color of the entry control. Default is <see cref="Color.White"/>.
/// </summary>
public Color EntryBackgroundColor
{
get => (Color)GetValue(EntryBackgroundColorProperty);
set => SetValue(EntryBackgroundColorProperty, value);
}
/// <summary>
/// The font family for the entry control to use.
/// </summary>
public string FontFamily
{
get => (string)GetValue(FontFamilyProperty);
set => SetValue(FontFamilyProperty, value);
}
/// <summary>
/// The font size of the entry control. Default is 12.0.
/// </summary>
[TypeConverter(typeof(FontSizeConverter))]
public double FontSize
{
get => (double)GetValue(FontSizeProperty);
set => SetValue(FontSizeProperty, value);
}
/// <summary>
/// Set if the entry field is a password field. Default is false.
/// </summary>
public bool IsPassword
{
get => (bool)GetValue(IsPasswordProperty);
set => SetValue(IsPasswordProperty, value);
}
/// <summary>
/// Set if spell check is enabled on the entry. Default is True.
/// </summary>
public bool IsSpellCheckEnabled
{
get => (bool)GetValue(IsSpellCheckEnabledProperty);
set => SetValue(IsSpellCheckEnabledProperty, value);
}
/// <summary>
/// Set if text prediction is enabled on the entry. Default is True.
/// </summary>
public bool IsTextPredictionEnabled
{
get => (bool)GetValue(IsTextPredictionEnabledProperty);
set => SetValue(IsTextPredictionEnabledProperty, value);
}
/// <summary>
/// The type of keyboard to use for the entry control. Default is <see cref="Keyboard.Default"/>.
/// </summary>
public Keyboard Keyboard
{
get => (Keyboard)GetValue(KeyboardProperty);
set => SetValue(KeyboardProperty, value);
}
/// <summary>
/// The maximum allowed length of input for the entry. Default is <see cref="int.MaxValue"/>.
/// </summary>
public int MaxLength
{
get => (int)GetValue(MaxLengthProperty);
set => SetValue(MaxLengthProperty, value);
}
/// <summary>
/// The text to use for the placeholder.
/// </summary>
public string Placeholder
{
get => (string)GetValue(PlaceholderProperty);
set => SetValue(PlaceholderProperty, value);
}
/// <summary>
/// The color of the placeholder text. Default is <see cref="Color.Black"/>.
/// </summary>
public Color PlaceholderColor
{
get => (Color)GetValue(PlaceholderColorProperty);
set => SetValue(PlaceholderColorProperty, value);
}
/// <summary>
/// The command that fires when the return button on the keyboard is tapped.
/// </summary>
public ICommand ReturnCommand
{
get => (ICommand)GetValue(ReturnCommandProperty);
set => SetValue(ReturnCommandProperty, value);
}
/// <summary>
/// The parameter to pass with the return command.
/// </summary>
public object ReturnCommandParameter
{
get => GetValue(ReturnCommandParameterProperty);
set => SetValue(ReturnCommandParameterProperty, value);
}
/// <summary>
/// The type of return button to display on the keyboard. Default is <see cref="ReturnType.Default"/>.
/// </summary>
public ReturnType ReturnType
{
get => (ReturnType)GetValue(ReturnTypeProperty);
set => SetValue(ReturnTypeProperty, value);
}
/// <summary>
/// The text of the entry.
/// </summary>
public string Text
{
get => (string)GetValue(TextProperty);
set => SetValue(TextProperty, value);
}
/// <summary>
/// The color of the text. Default is <see cref="Color.Black"/>.
/// </summary>
public Color TextColor
{
get => (Color)GetValue(TextColorProperty);
set => SetValue(TextColorProperty, value);
}
#endregion
/// <summary>
/// Constructor.
/// </summary>
public MaterialEntry()
{
InitializeComponent();
}
#region Methods
/// <summary>
/// Focuses the entry control.
/// </summary>
public void FocusEntry()
{
MaterialEntryEntry.Focus();
}
private void OnEntryCompleted(object sender, EventArgs e)
{
SendCompleted();
}
private void OnEntryTextChanged(object sender, TextChangedEventArgs e)
{
TextChanged?.Invoke(this, e);
}
private void SendCompleted()
{
if (IsEnabled)
{
Completed?.Invoke(this, EventArgs.Empty);
if (ReturnCommand != null && ReturnCommand.CanExecute(ReturnCommandParameter))
{
ReturnCommand.Execute(ReturnCommandParameter);
}
}
}
private void OnComponentFocused(object sender, FocusEventArgs e)
{
FocusEntry();
}
#endregion
}
}
To use the control, remember to import the namespace it into your view with:
xmlns:material="clr-namespace:x.x.x.Controls.MaterialControls".
Then using it would be something like:
<material:MaterialEntry Placeholder="Do something amazing"
Style="{StaticResource EntryStyle}"
Text="{Binding MyEntryText}" />