CODEWITHSUNDEEP
xamarinxamarin.formsplaceholdersearchbar
user3452
user3452

Reputation: 359

How to reduce the font size of placeholder in xamarin forms?

I have a UI where the placeholder text fits the search bar. This is the UI which I need.

This is my UI

This is my custom renderer code

[assembly: ExportRenderer(typeof(searchTab), typeof(StyledSearchBarRenderer))]
namespace RestaurantApp.Droid.Renderers
{
#pragma warning disable CS0618 // Type or member is obsolete
    class StyledSearchBarRenderer : SearchBarRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                var color = global::Xamarin.Forms.Color.LightGray;

                var searchView = Control as SearchView;

                int searchPlateId = searchView.Context.Resources.GetIdentifier("android:id/search_plate", null, null);
                Android.Views.View searchPlateView = searchView.FindViewById(searchPlateId);
                searchPlateView.SetBackgroundColor(Android.Graphics.Color.Transparent);

                int searchIconId = Context.Resources.GetIdentifier("android:id/search_mag_icon", null, null);
                ImageView searchViewIcon = (ImageView)searchView.FindViewById<ImageView>(searchIconId);
                searchViewIcon.SetImageDrawable(null);

            }
        }
    }
#pragma warning restore CS0618 // Type or member is obsolete
}

This is my XAML code

 <Frame CornerRadius="10" Padding="0" OutlineColor="DarkGray" HasShadow="True" HorizontalOptions="Fill"  Margin="10,0,10,0" VerticalOptions="Center">
                <local:searchTab x:Name="searchBar"  Placeholder="Please search for a vendor or product name" PlaceholderColor="Black" TextColor="Black" HorizontalOptions="FillAndExpand" VerticalOptions="Center" />

            </Frame>

I don't know how to fix this. Any suggestions?

Upvotes: 0

Views: 1930

Answers (2)

Arvind Chourasiya
Arvind Chourasiya

Reputation: 17422

To change HintText of SearchView we need to find EditText of SearchView.

var textView = (searchView.FindViewById(textViewId) as EditText);

Now after getting instance of SearchView's EditText we can set textView we can set all types of properties like SetBackgroundColor, SetHintTextColor, to name a few.

So your code to change HintText (Placeholder) would look like this 

var textView = (searchView.FindViewById(textViewId) as EditText);
textView.SetTextSize(12);

Note: When we are changing the TextSize Hint Size as well getting changed.

Upvotes: 1

Tom
Tom

Reputation: 1749

First thing to understand is that your users' screen size will vary depending on the device they use. Setting the font size to an absolute is exponentially overcomplicating it.

Apple's HIG for the SearchBar keeps its guidelines short and simple, and should help you with the UI that will benefit your app (even if it targets Android only). In your example, you would like to display the text Please search for a product vendor or name. This is by every UI guideline out there an instruction. The searchbar placeholder needs to be a hint, for example Search, Product, Vendor, Product or Vendor name (the list goes on).

The text you have should appear as a label above the search bar, so that the user knows that is the instruction they must follow. Then in the search bar, you'd show a short placeholder for your search bar (examples above). In fact, you can improve the UI by having the instruction in a label, but have an example search string as your place holder (example: Apple iPhone) so that the user has an example of what to write.

Alternatively, you can remove the "please type in ..." and just have the search bar placeholder as Product/Vendor name. The user will still know to search for by product or vendor name.

Doing the above will avoid having to create unnecessary complex custom renderers.

Upvotes: 0

Related Questions