Xamarin Forms Auto Size Font Based on Width of Control

Question

Xamarin Forms Auto Size Font Based on Width of Control

Tony Pitman 81

I have a cross platform Xamarin.Forms app that runs on iOS and Android. I would like to set the font size for my labels and entry fields to a single value and then if the width of the text exceeds the area given for the control, have the size of the font automatically reduced.

I found a component called Forms9Patch that does this. It works really good on iOS and works on the 2 development Android phones I have. As the text grows, the font size automatically adjusts smaller so the text still fits.

When I started testing with end users, however, we quickly found that if the Font Size setting is larger on their phone, the text doesn't fit anymore. I suspect this is some change in answer since the component was last updated in 2020. I don't know that for sure, but can't think of any other reason.

Can someone either explain that or tell me about some other way to support this? I don't want to have to figure out font sizes myself, or include platform specific coding if that is possible. It would be nice if there was a way to make Forms9Patch work or find another similar component that doesn't have this issue.

Accepted answer

0 additional answers

Your answer

Answer 1

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Microsoft External Staff

Hello,

As far As I known, there is no such an API or official plugin to do it in Xamarin.Froms.

You could try to use the following ways to implement Auto Size Font manually.

For Entry, you could use the TextChanged event to control the font size.

For example, you could use the following code to change the fontsize:

   private void Entry_TextChanged(object sender, TextChangedEventArgs e)  
   {  
       const int max_size = 18;  
       Entry en = sender as Entry;  
       if (e.NewTextValue.Length * en.FontSize > en.Width)  
       {  
           en.FontSize--;  
       }  
       if (e.OldTextValue != null)   
       {  
           if (e.NewTextValue.Length < e.OldTextValue.Length & (e.NewTextValue.Length * (en.FontSize + 1)) < en.Width & en.FontSize < max_size)  
           {  
               en.FontSize++;  
           }  
       }  
   }

For Label, you could use Custom Renderer to invoke the native API to control the font size:

On Android:

   protected override void OnElementChanged(ElementChangedEventArgs<Label> e)  
   {  
       base.OnElementChanged(e);  
       Control.SetAutoSizeTextTypeWithDefaults(AutoSizeTextType.Uniform);  
   }

On iOS:

   protected override void OnElementChanged(ElementChangedEventArgs<Label> e)  
   {  
       base.OnElementChanged(e);  
     
       var label = Control as UILabel;  
       if (label != null)  
       {  
           label.AdjustsFontSizeToFitWidth = true;  
       }  
   }

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Tony Pitman 81 Reputation points

2022-08-23T12:50:38.537+00:00

Thank you for your answer. I will give these a try.
Tony Pitman 81 Reputation points

2022-08-23T17:37:45.01+00:00
This works, but I need one additional thing. I don't want all of my labels to be auto sizing. How can I limit this change to only labels that I choose?

I tried creating a class called AutoFitLabel. I then added the namespace to my xaml file. I then call out my new label class using <controls:AutoFitLabel....

Then I changed the customer renderer like so:

[assembly: ExportRenderer(typeof(AutoFitLabel), typeof(AutoFitLabelRenderer))] namespace MSD6AL.Droid { public class AutoFitLabelRenderer : LabelRenderer { public AutoFitLabelRenderer(Context context) : base(context) { } protected override void OnElementChanged(ElementChangedEventArgs<Label> e) { base.OnElementChanged(e); if (Control != null) Control.SetAutoSizeTextTypeWithDefaults(AutoSizeTextType.Uniform); } } }

This builds and runs, but my code never gets run and if I try to set a breakpoint the breakpoint has an empty circle and is never hit.

I am not sure what the new AutoFitLabel is not using this new renderer. Hopefully someone can spot what I am missing.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2022-08-24T06:37:10.63+00:00
I have reproduced a project as you said.

I used your renderer and the following code in xaml:

xmlns:local="clr-namespace:LabelFit" ... <Label Text="A long content"/> <local:AutoFitLabel HeightRequest="30" MaxLines="1" Text="A long content" />

It works fine and could hit the breakpoint of Control.SetAutoSizeTextTypeWithDefaults(AutoSizeTextType.Uniform);.

If you create a new project to use the renderer, would the issue occur?

If not, you could try to delete the obj/ and bin folders in your project, then re-build it.

If so, could you please provide the information about your development environment? In my side, I use Xamarin.Froms 5.0.0.2196, Visual Studio preview 2022 17.4.0 and Pixel 5 with API 30 for testing.
Tony Pitman 81 Reputation points

2022-08-24T13:47:48.823+00:00

Can you share with me your AutoFitLabel class? Maybe I am missing something there.

Never mind, I just made a simple test app and it works for me too. I will have to dig into why it doesn't work in my main app.

Can you think of any reasons or settings or configuration or something that would cause the same label to work in a simple test app, but not in my main app? It is a pretty big app with a lot of projects and libraries and such.

Well, even more information now. I had to make some other bug fixes in this project, so I stashed my changes having to do with this font issue.

I just applied those stash changes and did a clean build and now it works. Before you say it was the clean build, I had done several clean builds and rebuilds and that didn't help before.

Somehow removing this code and then bringing it back caused it to start working.

Welcome to software development.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2022-08-25T08:16:57.033+00:00
Of course, it's my pleasure.:)

The AutoFitLabel class is very simple:

public class AutoFitLabel : Label { }

Can you think of any reasons or settings or configuration or something that would cause the same label to work in a simple test app, but not in my main app? It is a pretty big app with a lot of projects and libraries and such.

I found a issue similar as yours in GitHub: Custom renderer is not working while set control template in xamarin forms 5.0 preview version. #13180. It may be a cause of the issue.

Share via

Xamarin Forms Auto Size Font Based on Width of Control

0 additional answers

Your answer