Google Material Design Entry in Xamarin Forms - xamarin.forms

Question

How to achieve a google material design entry / input in Xamarin.Forms (so no renderers, etc), even without the animation of the bottom label ?

Answer 1

Below code is a Xamarin.Forms google material design like entry approach. Total xaml + a little coding :)
Step1: Create a class in PCL project
public class CustomEntry : Entry
{
}
Step2: Create a control template in App.xaml
<ControlTemplate x:Key="MyControlTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<controls:CustomEntry x:Name="myEntry" Text="{TemplateBinding Text, Mode=TwoWay}" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Start" IsPassword="{TemplateBinding IsPassword}" MinimumHeightRequest="25"/>
<BoxView Grid.Row="1" BackgroundColor="#D2D2D2" HeightRequest="1" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
<BoxView.Triggers>
<DataTrigger TargetType="BoxView" Binding="{Binding Source={x:Reference myEntry}, Path=IsFocused}" Value="true">
<Setter Property="BackgroundColor" Value="Black" />
<Setter Property="HeightRequest" Value="2"/>
</DataTrigger>
</BoxView.Triggers>
</BoxView>
</Grid>
</ControlTemplate>
Step 3: Create a super material design entry class
public class MyMaterialDesignEntry : ContentView, INotifyPropertyChanged
{
public static readonly BindableProperty TextProperty =
BindableProperty.Create("Text", typeof(string), typeof(ContentPage), "");
public static readonly BindableProperty IsPasswordProperty =
BindableProperty.Create("IsPassword", typeof(bool), typeof(ContentPage), false);
public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, (string)value); }
}
public bool IsPassword => (bool)GetValue(IsPasswordProperty);
public MyMaterialDesignEntry()
{
ControlTemplate = (ControlTemplate)Application.Current.Resources.FirstOrDefault(x => x.Key == "MyControlTemplate").Value;
}
}
Step 4: Use your super material design entry in xaml
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<Label Text="Login"/>
<controls:MyMaterialDesignEntry Text="{Binding Login, Mode=TwoWay}"/>
</StackLayout>
Don't forget to add appropriate namespaces to your page xaml. It will tell you anyway.