Styjun

• I use Xamarin Forms,


• on iOS: Text Alignment of button display that nice

align_text_iOS

• But on Android: Text Alignment of button always display "center"

align_text_Android

I can't find property change Text Alignment of button on Android.

On Android, I want to text align of button is "Start" or Change button of Android as same as button of iOS.

This is my code:

 <Button 
 HeightRequest="15"
 Text="Binding Phone2"
 BackgroundColor="Aqua"
 TextColor="x:Static color:BasePalette.DarkestColor"
 HorizontalOptions="Start"
 VerticalOptions="Center" />

Please support me!

Thanks!

What you are looking for is something like in this XLab Control

 public class ExtendedButton : Button

 /// <summary>
 /// Bindable property for button content vertical alignment.
 /// </summary>
 public static readonly BindableProperty VerticalContentAlignmentProperty =
 BindableProperty.Create<ExtendedButton, TextAlignment>(
 p => p.VerticalContentAlignment, TextAlignment.Center);

 /// <summary>
 /// Bindable property for button content horizontal alignment.
 /// </summary>
 public static readonly BindableProperty HorizontalContentAlignmentProperty =
 BindableProperty.Create<ExtendedButton, TextAlignment>(
 p => p.HorizontalContentAlignment, TextAlignment.Center);

 /// <summary>
 /// Gets or sets the content vertical alignment.
 /// </summary>
 public TextAlignment VerticalContentAlignment
 
 get return this.GetValue<TextAlignment>(VerticalContentAlignmentProperty); 
 set this.SetValue(VerticalContentAlignmentProperty, value); 
 

 /// <summary>
 /// Gets or sets the content horizontal alignment.
 /// </summary>
 public TextAlignment HorizontalContentAlignment
 
 get return this.GetValue<TextAlignment>(HorizontalContentAlignmentProperty); 
 set this.SetValue(HorizontalContentAlignmentProperty, value); 
 

Android renderer:

public class ExtendedButtonRenderer : ButtonRenderer

 /// <summary>
 /// Called when [element changed].
 /// </summary>
 /// <param name="e">The e.</param>
 protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
 
 base.OnElementChanged(e);
 UpdateAlignment();
 UpdateFont();
 

 /// <summary>
 /// Handles the <see cref="E:ElementPropertyChanged" /> event.
 /// </summary>
 /// <param name="sender">The sender.</param>
 /// <param name="e">The <see cref="PropertyChangedEventArgs"/> instance containing the event data.</param>
 protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
 

 /// <summary>
 /// Updates the font
 /// </summary>
 private void UpdateFont()
 
 Control.Typeface = Element.Font.ToExtendedTypeface(Context);
 

 /// <summary>
 /// Sets the alignment.
 /// </summary>
 private void UpdateAlignment()
 
 element.HorizontalContentAlignment.ToDroidHorizontalGravity();
 

iOS Renderer:

 public class ExtendedButtonRenderer : ButtonRenderer

 /// <summary>
 /// Called when [element changed].
 /// </summary>
 /// <param name="e">The e.</param>
 protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
 this.Control == null)
 
 return;
 

 this.Control.VerticalAlignment = this.Element.VerticalContentAlignment.ToContentVerticalAlignment();
 this.Control.HorizontalAlignment = this.Element.HorizontalContentAlignment.ToContentHorizontalAlignment();
 

 /// <summary>
 /// Handles the <see cref="E:ElementPropertyChanged" /> event.
 /// </summary>
 /// <param name="sender">The sender.</param>
 /// <param name="e">The <see cref="PropertyChangedEventArgs"/> instance containing the event data.</param>
 protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
 
 switch (e.PropertyName)
 
 case "VerticalContentAlignment":
 this.Control.VerticalAlignment = this.Element.VerticalContentAlignment.ToContentVerticalAlignment();
 break;
 case "HorizontalContentAlignment":
 this.Control.HorizontalAlignment = this.Element.HorizontalContentAlignment.ToContentHorizontalAlignment();
 break;
 default:
 base.OnElementPropertyChanged(sender, e);
 break;
 
 

 /// <summary>
 /// Gets the element.
 /// </summary>
 /// <value>The element.</value>
 public new ExtendedButton Element
 
 get
 
 return base.Element as ExtendedButton;
 
 

Do not forget to add the ExportRenderer Attribute on both renderers [assembly: ExportRenderer(typeof(ExtendedButton), typeof(ExtendedButtonRenderer))]

Goodluck feel free to revert in case of queries

You need to create a custom renderer for the button then in the customization of the control, call:

button.Gravity = GravityFlags.Left;

You will see your texts aligned to the left.