Entry Show/Hide Password on Xamarin.Forms

Hello, in this post i will talk about a way of how to implement a Show/Hide password on Entry control.
In our Xamarin.Forms project, we add  a CustomRender for iOS, and  for Android we are using a Effects in order of have a result almost equals.


I'm gonna start with the iOS functionality, so I will add a class render:

using System;
	using Xamarin.Forms;
	namespace ShowHidePasswordEntryXF
	{
	public class ShowHidePasswordEntry:Entry
	{
	public ShowHidePasswordEntry()
	{
	}
	public string EntryText { get; set; }
	}
	}

After that, in the iOS project, i will create the renderer, in which I add a UIButton and add a EventHandler in order to know if the user want to look the password or not:

buttonRect.TouchUpInside += (object sender, EventArgs e1) =>
                {
                    if (Control.SecureTextEntry)
                    {
                        Control.SecureTextEntry = false;
                        buttonRect.SetImage(new UIImage("hide_pass"), UIControlState.Normal);
                    }
                    else {
                        Control.SecureTextEntry = true;
                        buttonRect.SetImage(new UIImage("show_pass"), UIControlState.Normal);
                    }
                };

In order to avoid that the password is erase each time that the user try to delete a character we add the next method:

Control.ShouldChangeCharacters += (textField, range, replacementString) =>
                {
                    string text = Control.Text;
                    var result = text.Substring(0, (int)range.Location) + replacementString + text.Substring((int)range.Location + (int)range.Length);
                    Control.Text = result;
                    (Element as ShowHidePasswordEntry).EntryText = result;
                    return false;
                };

Now, we implement it in our page:

<?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:local="clr-namespace:ShowHidePasswordEntryXF" 
        x:Class="ShowHidePasswordEntryXF.ShowHidePasswordEntryXFPage">
    <StackLayout Padding="30" Spacing="10" VerticalOptions="CenterAndExpand">
        <Entry Placeholder="User name" Text="{Binding Email}">
        </Entry>
        <local:ShowHidePasswordEntry IsPassword="true" Placeholder="Password" Text="{Binding Password}">
        </local:ShowHidePasswordEntry>
        <Button Text="Sign Up" Command="{Binding SignInCommand}"></Button>
    </StackLayout>
</ContentPage>


This work on iOS, look a screenshot, when we make click on the UIButton the password is showed or hidden:

Now, for android I use a effect to do that, I will add a class for define the effects:

using System;
using Xamarin.Forms;

namespace ShowHidePasswordEntryXF
{
    public class ShowHiddenEntryEffect : RoutingEffect
    {
        public ShowHiddenEntryEffect() : base("Effects.ShowHiddenEntryEffect")
        {
        }
    }
}


After that in the Android project, I need to create the effect class that apply the effect that I want in the native way:

on the method:

protected override void OnAttached()

I add a method with the logic to handle this effects:

First make a instance for the native control EditText and add a image for know if the password is hidden or not, and also add a listener for to know when the view is affected:

EditText editText = ((EditText)Control);
            editText.SetCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, Resource.Drawable.show_pass, 0);
            editText.SetOnTouchListener(new OnDrawableTouchListener());



Now when the image view is clicked, whe make a validation for to know if the password is visible or not, and depends of it, show a different image:
if (editText.TransformationMethod == null)
                    {
                        editText.TransformationMethod = PasswordTransformationMethod.Instance;
                        editText.SetCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, Resource.Drawable.show_pass, 0);
                    }
                    else {
                        editText.TransformationMethod = null;
                        editText.SetCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, Resource.Drawable.hide_pass, 0);
                    }


Look a screenshot:

Here is the url for the complete code on Github:

https://github.com/osvaldosantiago/ShowHidePasswordEntryXF

Follow me on Twitterhttps://twitter.com/OsvaldoSan

Or find me in Linkedinhttps://mx.linkedin.com/in/osvaldo-santiago-estrada-15480741

For more information about effects, please go to:
https://developer.xamarin.com/guides/xamarin-forms/effects/introduction/