androidxamarinxamarin.formssearchbarcustom-renderer

TextColor of Xamarin.Forms SearchBar

I have a Xamarin.Forms SearchBar on a StackLayout with a dark background color.

By default the input field is dark as well, probably due to a transparent background. To modify the search bar background color there is a BackgroundColor property. (In the example below I set it to dark gray.)

But how to adjust the text color? There is no such property. And even with a custom search bar renderer I don't find a solution.

This is how it looks with just the placeholder:

...and with some input (black "Hello world!" on a pretty dark background):

Solution

  • You can achieve this by creating a custom View that has a bindable-property like ForegroundTextColor and then create a custom renderer.

    In the custom renderer you can inherit from the platform specific renderer, i.e. on WindowsPhone it is:-

    Xamarin.Forms.Platform.WinPhone.SearchBarRenderer

    You can then monitor for property changes to the bindable-property you created and set the platform native control Text-color that is used to change the appearance of the non-editing view of the SearchBar.

    You also have to monitor for IsFocused and apply the colouring on WindowsPhone, at least, also. This may also apply for other platforms possibly as well.

    Update 1:-

    ========

    In reply to your comment you don't have to render the whole SearchBar yourself.

    If you inherit from the renderer you are able to customize things finer.

    With specific reference to Android to achieve this you have to get reference to AutoCompleteTextView and then you can call SetTextColor to change the color.

    Update 2:-

    ==========

    SearchBar is a composite control in Android.

    The AutoCompleteTextView is buried rather deep in the hierarchy.

    On 4.4 this can be found using the following code. Other versions may well differ. This is by no means a good approach necessarily for production using ordinal indexes however:-

    AutoCompleteTextView objAutoTextView = (AutoCompleteTextView)(((this.Control.GetChildAt(0) as ViewGroup).GetChildAt(2) as ViewGroup).GetChildAt(1) as ViewGroup).GetChildAt(0);

    Where this is the renderer class.

    You can then call objAutoTextView.SetTextColor with the color to achieve the change in color to the SearchBar foreground text.