SearchView-Widget is not displaying caret and underline in Xamarin.Forms (Android)

Question

I try to put a searchbar in the navigation of a content page on Xamarin.Forms (Android). I use the following code (from https://www.linkedin.com/pulse/xamarin-forms-contentpage-searchbar-navigation-bar-vipin-mathews):

First i define my searchbar resource:

<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
  <item android:id="@+id/action_search"
        android:title="Search"
        android:icon="@android:drawable/ic_menu_search"
        app:showAsAction="always|collapseActionView"
        app:actionViewClass="android.support.v7.widget.SearchView"/>
</menu>

Then i use a custom renderer to display it inside the navigation-header of a ContentPage:

[assembly: ExportRenderer(typeof(SearchPage), typeof(SearchPageRenderer))]

namespace Muellerchur.Xamos.Streckenkontrolle.Droid.CustomRenderer
{
    using Android.Runtime;
    using Android.Support.V7.Widget;
    using Android.Text;
    using Android.Views.InputMethods;

    using Muellerchur.Xamos.Streckenkontrolle.Droid;

    using Plugin.CurrentActivity;

    using Xamarin.Forms;
    using Xamarin.Forms.Platform.Android;

    using Resource = Muellerchur.Xamos.Streckenkontrolle.Droid.Resource;

    /// <summary>
    ///     The search page renderer.
    /// </summary>
    public class SearchPageRenderer : PageRenderer
    {
        /// <summary>
        ///     Gets or sets the search view.
        /// </summary>
        private SearchView searchView;

        /// <summary>
        ///     Gets or sets the toolbar.
        /// </summary>
        private Toolbar toolbar;

        /// <summary>
        ///     Reaction on the disposing of the page.
        /// </summary>
        /// <param name="disposing">A value indicating whether disposing.</param>
       

        /// <summary>
        ///     Reaction on the element changed event.
        /// </summary>
        /// <param name="e">The event argument.</param>
        protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
        {
            base.OnElementChanged(e);

            if (e?.NewElement == null || e.OldElement != null)
            {
                return;
            }

            this.AddSearchToToolBar();
        }

        /// <summary>
        ///     Adds a search item to the toolbar.
        /// </summary>
        private void AddSearchToToolBar()
        {
            this.toolbar = (CrossCurrentActivity.Current?.Activity as MainActivity)?.FindViewById<Toolbar>(Resource.Id.toolbar);

            if (this.toolbar != null)
            {
                this.toolbar.Title = this.Element.Title;
                this.toolbar.InflateMenu(Resource.Menu.mainmenu);

                this.searchView = this.toolbar.Menu?.FindItem(Resource.Id.action_search)?.ActionView?.JavaCast<SearchView>();

                if (this.searchView != null)
                {
                    this.searchView.ImeOptions = (int)ImeAction.Search;
                    this.searchView.InputType = (int)InputTypes.TextVariationNormal;
                    this.searchView.MaxWidth = int.MaxValue;
                }
            }
        }  
       
    }
}

However, if the user enters the SearchView no caret and no underline is shown:

I want to display something like this (without icons)

How can I archieve this layout? Or is it phone-dependant? I'm using a HUAWEI P9 Android-Phone.

Answer 1

SearchView-Widget is not displaying caret and underline in Xamarin.Forms (Android)

I have reproduced your problem and I think it's not phone-dependant. There are some problems occurred in your AddSearchToToolBar method.

1. Display caret :

Delete the this.searchView.InputType = (int)InputTypes.TextVariationNormal, the caret will display normally.

2. Display underline :

Thanks for vArDo's advice, you could set a background which contains a underline for SearchView. To create drawable selector, so that proper image is displayed based on view state, one for state when text field is selected (named textfield_search_selected_holo_light.9.png) and one for where it's not (named textfield_search_default_holo_light.9.png).

Create file res/drawable/texfield_searchview_holo_light.xml with following content:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_focused="true" android:drawable="@drawable/textfield_search_selected_holo_light" />
   <item android:drawable="@drawable/textfield_search_default_holo_light" />
</selector>

Set Drawable selector for SearchView :

this.searchView.SetBackgroundResource(Resource.Drawable.texfield_searchview_holo_light);

Effect like this :