Xamarin forms: Hide and show password feature is not working for entry

Question

I have implemented the hide and show password feature for the entry component. It is not working initially, but after one hide and show, it starts working. The icons are changing but the password is not showing. This issue is only on the android platform.

My code:

Xaml.cs:

bool showPassword = true;
private void PasswordIcon_Clicked(object sender, EventArgs e)
{
    if (showPassword)
    {
        password_icon.Source = "ic_show_password_xx.png";
        password_entry.IsPassword = false;
        showPassword = false;
    }
    else
    {
        password_icon.Source = "ic_hide_password_xx.png";
        password_entry.IsPassword = true;
        showPassword = true;
    }
}

Xaml:

Instead of the bool variable, I have tried with password_entry.IsPassword, but no luck. I have uploaded a sample project here for reference.

Accepted Answer

Hello,

Welcome to our Microsoft Q&A platform!

You could use TriggerAction to achieve it.

   using System.ComponentModel;  
   using Xamarin.Forms;  
     
   namespace ShowHidePasswordTrigger  
   {  
       public class ShowPasswordTriggerAction : TriggerAction, INotifyPropertyChanged  
       {  
           public string ShowIcon { get; set; }  
           public string HideIcon { get; set; }  
     
           bool _hidePassword = true;  
     
           public bool HidePassword  
           {  
               set  
               {  
                   if (_hidePassword != value)  
                   {  
                       _hidePassword = value;  
     
                       PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(HidePassword)));  
                   }  
               }  
               get => _hidePassword;  
           }  
     
           protected override void Invoke(ImageButton sender)  
           {  
               sender.Source = HidePassword ? ShowIcon : HideIcon;  
               HidePassword = !HidePassword;  
           }  
     
           public event PropertyChangedEventHandler PropertyChanged;  
     
       }  
   }

Then use it in the ImageVIew.

In your layout, you can add following code,

Best Regards,

Leon Lu

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer

Please change your custom-renderer's code like following format.

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace BibleGenius.Droid.Renderer
{
    public class CustomEntryRenderer : EntryRenderer
    {
        public CustomEntryRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            Control?.SetBackgroundColor(Android.Graphics.Color.Transparent);
            //if (Control != null)
            //{
            //    GradientDrawable gd = new GradientDrawable();
            //    gd.SetColor(global::Android.Graphics.Color.Transparent);
            //    this.Control.SetBackgroundDrawable(gd);
            //    this.Control.SetRawInputType(InputTypes.TextFlagNoSuggestions);
            //    //Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.White));
            //}
        }
    }
}

Then change the Entry to local:CustomEntry like following layout.

Share via

Xamarin forms: Hide and show password feature is not working for entry

1 additional answer

Your answer