Forum Xamarin.Forms

Changing Entry's placeholder color when it is focused (Material visual on Android)

ghasanghasan Member ✭✭

Hi,

Just like the title says, I want to change the color of the placeholder when the Entry is focused, and when it is unfocused, I want it to go back to its initial color.

I have tried couple of attempts but to no avail, I feel like XF somehow override whatever I set.

Here is a video; you can see that the color is reflected initially, but then, its is override by black color, which I am not sure where it is coming from.

https://1drv.ms/v/s!AkHTq-TpveXUg8g3SYhB41FvuCVTKg?e=1Lm056

And this is the code I use (I am inheriting from MaterialEntryRenderer):

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

            if (EditText != null)
            {

                EditText.SetHintTextColor(new Android.Content.Res.ColorStateList(new int[][] {
                        new int[] {Android.Resource.Attribute.StateFocused },
                        new int[] { },
                    },
                    new int[] { Android.Graphics.Color.Blue, Android.Graphics.Color.Red }));


                Control.DefaultHintTextColor = new Android.Content.Res.ColorStateList(new int[][] {
                        new int[] { Android.Resource.Attribute.StateFocused },
                        new int[] { },
                    },
                    new int[] { Android.Graphics.Color.Blue, Android.Graphics.Color.Red });
            }
        }

Best Answer

  • LandLuLandLu Member, Xamarin Team Xamurai
    Accepted Answer

    Add some delay to remain the animation:

    private async void Entry_Focused(object sender, FocusEventArgs e)
    {
        await Task.Delay(100);
        var entry = sender as Entry;
        entry.PlaceholderColor = Color.Black;
    }
    
    private async void Entry_Unfocused(object sender, FocusEventArgs e)
    {
        await Task.Delay(100);
        var entry = sender as Entry;
        entry.PlaceholderColor = Color.Red;
    }
    

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    We could register the focused and unfocused event on Forms to achieve it without using a custom renderer.
    Register them in xaml:

    <Entry Visual="Material" Placeholder="Username" PlaceholderColor="Red" Focused="Entry_Focused" Unfocused="Entry_Unfocused"/>
    

    Change the color in the event:

    private void Entry_Focused(object sender, FocusEventArgs e)
    {
        var entry = sender as Entry;
        entry.PlaceholderColor = Color.Black;
    }
    
    private void Entry_Unfocused(object sender, FocusEventArgs e)
    {
        var entry = sender as Entry;
        entry.PlaceholderColor = Color.Red;
    }
    

    Here is the effect:

  • ghasanghasan Member ✭✭
    edited March 31

    Hi LandLu,

    I forgot to mention, I have tried that. But as your see, the animation is gone :neutral:

    The animation of placeholder moving to top.

    Thanks.

  • LandLuLandLu Member, Xamarin Team Xamurai
    Accepted Answer

    Add some delay to remain the animation:

    private async void Entry_Focused(object sender, FocusEventArgs e)
    {
        await Task.Delay(100);
        var entry = sender as Entry;
        entry.PlaceholderColor = Color.Black;
    }
    
    private async void Entry_Unfocused(object sender, FocusEventArgs e)
    {
        await Task.Delay(100);
        var entry = sender as Entry;
        entry.PlaceholderColor = Color.Red;
    }
    
  • ghasanghasan Member ✭✭

    Wow, that did not occur to me. Thanks for the help, LandLu :smile:

Sign In or Register to comment.