Maui android button text not centered

Question

Maui android button text not centered

Haviv Elbsz 2,071

Hi all

The text in my maui app not show exactly at
the centre of the button.

is horizontaloption = centre not works ?

the button corners are rounded is this
concerning.

Thank you very much

Anonymous

2022-12-09T02:38:41.077+00:00
HorizontalOptions="Center" will make the button to the pages' center. I use following code, this text is centered

<Button x:Name="CounterBtn" CornerRadius="50" Text="Click me" HorizontalOptions="Center" />

Could you share related code with us to reproduce this issue?
Haviv Elbsz 2,071 Reputation points

2022-12-09T06:38:05.553+00:00

Hi Leon Lu

my code is the same but with heightrequest
set to 40 and the radius to 20.

see the image below

do I need to remove the height settings.

Anonymous

do I need to remove the height settings.

No need to do that, could you share a screenshot with me? You can post image in the comment directly.

You can try to add ButtonHandler in your layout background code.

   public MainPage()  
       {  
           InitializeComponent();  
          Microsoft.Maui.Handlers.ButtonHandler.Mapper.AppendToMapping("MyCustomizationButton", (handler, view) =>  
           {  
   #if ANDROID  
               handler.PlatformView.Gravity = Android.Views.GravityFlags.Center;  
   #endif  
           });  
       }

Accepted answer

0 additional answers

Your answer

Anonymous

2022-12-09T02:38:41.077+00:00

HorizontalOptions="Center" will make the button to the pages' center. I use following code, this text is centered

<Button x:Name="CounterBtn" CornerRadius="50" Text="Click me" HorizontalOptions="Center" />

Could you share related code with us to reproduce this issue?
Haviv Elbsz 2,071 Reputation points

2022-12-09T06:38:05.553+00:00

Hi Leon Lu

my code is the same but with heightrequest
set to 40 and the radius to 20.

see the image below

do I need to remove the height settings.
Anonymous

2022-12-09T06:54:50.227+00:00

do I need to remove the height settings.

No need to do that, could you share a screenshot with me? You can post image in the comment directly.

You can try to add ButtonHandler in your layout background code.

public MainPage() { InitializeComponent(); Microsoft.Maui.Handlers.ButtonHandler.Mapper.AppendToMapping("MyCustomizationButton", (handler, view) => { #if ANDROID handler.PlatformView.Gravity = Android.Views.GravityFlags.Center; #endif }); }

Answer 1

Anonymous

Hello,

Try to add the blew padding and set width request in the button like following code.

   <Button  
                   x:Name="CounterBtn"  
                   HeightRequest="40"  
                   WidthRequest="70"  
                   CornerRadius="20"  
                   Padding="0,0,0,2"  
                   BorderColor="Black"  
                   Text="size +"  
                   HorizontalOptions="Center"  
                   />

===========
Update ===========

Or you can open the style.xaml(Resources folder=> Styles.xaml) to find the <Style TargetType="Button"> tag and remove <Setter Property="Padding" Value="14,10"/> line.

Best Regards,

Leon Lu

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.

Haviv Elbsz 2,071 Reputation points

2022-12-09T09:12:06.883+00:00

it raise it slightly.

so I need to play with padding manually
to bring it to centre.
Anonymous

2022-12-09T09:32:36.577+00:00

Please see my updated answer.
Haviv Elbsz 2,071 Reputation points

2022-12-09T11:25:47.733+00:00

Note

I did it in my UI

padding 0,0,0,0,0 this override
the resources style

Thank you

Share via

Maui android button text not centered

0 additional answers

Your answer