For android, there is space in cancel button from right side. how can i remove that?

Question

For android, there is space in cancel button from right side. how can i remove that ?

<StackLayout Padding="0,5,0,5" Spacing="0">
    <StackLayout.BackgroundColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="Android" Value="{StaticResource 02dp}" />
            <On Platform="iOS" Value="{StaticResource 02dp}" />
        </OnPlatform>
    </StackLayout.BackgroundColor>

    <Border Padding="0" Style="{StaticResource SearchBorderStyle}">

        <SearchBar ios:SearchBar.SearchBarStyle="Default" x:Name="SearchBar"
            TextChanged="SearchBar_TextChanged" SearchCommand="{Binding SearchCommand}"
            SearchCommandParameter="{Binding Text, Source={x:Reference SearchBar}}"
            Placeholder="Search">

            <SearchBar.CancelButtonColor>
                <OnPlatform x:TypeArguments="Color">
                    <On Platform="iOS" Value="White" />
                    <On Platform="Android" Value="White" />
                </OnPlatform>
            </SearchBar.CancelButtonColor>
            <SearchBar.PlaceholderColor>
                <OnPlatform x:TypeArguments="Color">
                    <On Platform="Android" Value="White" />
                    <On Platform="iOS" Value="Gray" />
                </OnPlatform>
            </SearchBar.PlaceholderColor>
            <SearchBar.Margin>
                <OnPlatform x:TypeArguments="Thickness">
                    <On Platform="Android" Value="0, 6 , 0, 6" />
                    <On Platform="iOS" Value="0,0,0,0" />
                </OnPlatform>
            </SearchBar.Margin>

            <SearchBar.TextColor>
                <OnPlatform x:TypeArguments="Color">
                    <On Platform="Android" Value="White" />
                    <On Platform="iOS" Value="White" />
                </OnPlatform>
            </SearchBar.TextColor>
            <SearchBar.BackgroundColor>
                <OnPlatform x:TypeArguments="Color">
                    <On Platform="Android" Value="red" />
                    <On Platform="iOS" Value="{StaticResource 00dp}" />
                </OnPlatform>
            </SearchBar.BackgroundColor>
        </SearchBar>


    </Border>

</StackLayout>

please be advised. I tried to remove stacklayout and border as well. same result. how can i resolved this. Thanks

Answer 1

You can use the following code to achieve your need.

Page.xaml:

<SearchBar BackgroundColor="Grey"/>

Page.xaml.cs:

using SearchView = AndroidX.AppCompat.Widget.SearchView;
using Android.Views;

namespace MauiApp1;

public partial class NewPage2 : ContentPage
{
    public NewPage2()
    {
        InitializeComponent();
        ModifySearchBar();
    }

   void ModifySearchBar()
    {
        Microsoft.Maui.Handlers.SearchBarHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
        {
#if ANDROID
            var close_btn_view = (handler.PlatformView as SearchView).FindViewById(Resource.Id.search_close_btn);
            ((ViewGroup)close_btn_view.Parent).RemoveView(close_btn_view);
#endif
        });
    }
}

This is the effect:

Update:

For removing the space in cancel button from right side. You can add WidthRequest to shorten its space:

<SearchBar x:Name="searchbar" BackgroundColor="Grey" WidthRequest="420"/>

If you don't set specific value to WidthRequest of SearchBar:

<SearchBar BackgroundColor="Grey"/>

As you describe it will exist a large gap space：