How to change searchbar cancel button image in xamarin forms

Question

I have used custom renderer to change the search bar underline color. But i don't know how to change the cancel button cross symbol(X) to image as shown in the attached screenshot. My custom renderer is as below,

 public class CustomSearchBarRenderer : SearchBarRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement == null)
            {
                LinearLayout linearLayout = this.Control.GetChildAt(0) as LinearLayout;
                linearLayout = linearLayout.GetChildAt(2) as LinearLayout;
                linearLayout = linearLayout.GetChildAt(1) as LinearLayout;

                GradientDrawable gd = new GradientDrawable();
                gd.SetStroke(0, Android.Graphics.Color.LightGray);

                linearLayout.Background = gd;                 

                AutoCompleteTextView textView = linearLayout.GetChildAt(0) as AutoCompleteTextView;
            }
        }

    }

Possible duplicate of [How to edit icon of SearchBar Xamarin Forms on Android?](https://stackoverflow.com/questions/36724216/how-to-edit-icon-of-searchbar-xamarin-forms-on-android) — Shiwanka Chathuranga, Nov 22 '17 at 04:09
Thanks for your reply @ Shiwanka Chathuranga . I want to change the search bar cancel button icon as shown in the screenshot. — Yogeshwaran, Nov 22 '17 at 07:10

score 2 · Accepted Answer · answered Nov 23 '17 at 06:02

How to change searchbar cancel button image in xamarin forms

Modify your code like this :

public class MySearchBarRenderer : SearchBarRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.SearchBar> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            var searchView = Control;

            int searchViewCloseButtonId = Control.Resources.GetIdentifier("android:id/search_close_btn", null, null);
            var closeIcon = searchView.FindViewById(searchViewCloseButtonId);
            (closeIcon as ImageView).SetImageResource(Resource.Drawable.cancel_icon);
        }
    }
}

Effect.

score 0 · Answer 2 · answered Jul 12 '18 at 03:50

You can use renderer like this for your code

using System;
using Android.Content;
using Android.Graphics.Drawables;
using Android.Support.V4.Content;
using Android.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using CustomRenderers

[assembly: ExportRenderer(typeof(SearchBar), typeof(CustomSearchBarRenderer))]
namespace CustomRenderers
{
    public class CustomSearchBarRenderer : SearchBarRenderer
    {
        Context context;
        public CustomSearchBarRenderer(Context context) : base(context)
        {
            this.context = context;
        }

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

            if (Control == null)
            {
                return;
            }

            if (e.OldElement == null)
            {
                //remove the underline line of the edittext
                LinearLayout linearLayout = this.Control.GetChildAt(0) as LinearLayout;
                linearLayout = linearLayout?.GetChildAt(2) as LinearLayout;
                linearLayout = linearLayout?.GetChildAt(1) as LinearLayout;

                if (linearLayout != null)
                {
                    //set transparent to remove the underline line of edittext
                    linearLayout.SetBackground(new ColorDrawable(Android.Graphics.Color.Transparent));
                }
            }

            //set rounded background
            Control.Background = ContextCompat.GetDrawable(Context, Resource.Drawable.RoundedSearchViewRectangle);

            //abc_ic_clear_material is system clear icon which is in gray color
            ImageView searchClose = (ImageView)Control.FindViewById(context.Resources.GetIdentifier("android:id/search_close_btn", null, null));
            searchClose?.SetImageResource(Resource.Drawable.abc_ic_clear_material);

        }
    }
}

this is the Resources\Drawable\RoundedSearchViewRectangle.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
       android:shape="rectangle">
    <corners android:radius="20dp" />
    <solid android:color="#ffff80" />
</shape>

Before apply this code, we have

it will looks like this before and after apply these code:

and you can change the icon of it with this code

searchClose?.SetImageResource(Resource.Drawable.ic_stop);

it will looks like this

If you want a clear button with gray circle around it, you can set background:

searchClose.SetBackgroundResource(Resource.Drawable.SearchViewClearButton);

Resources\Drawable\SearchViewClearButton.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape 
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="12dp"
            android:useLevel="false">
            <solid android:color="#a9a9a9" />
        </shape>        
    </item>   
</layer-list>

and it will look like this:

If you want to hide the cancel button, you can use this code

Control.ShowsCancelButton = false;

You can reference this source of searchview https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/layout/search_view.xml, — vu ledang, Jul 12 '18 at 03:54
more source for it https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/layout/search_view.xml — vu ledang, Jul 12 '18 at 03:55

How to change searchbar cancel button image in xamarin forms

2 Answers2

Linked