CODEWITHSUNDEEP
xamarinxamarin.formsxamarin.androidxamarin.ios
Leks G
Leks G

Reputation: 53

How to change Text Alignment of button on Android (Xamarin Forms)?

align_text_iOS

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!

Upvotes: 5

Views: 14515

Answers (5)

Momodu Deen Swarray
Momodu Deen Swarray

Reputation: 169

I recommend using Syncfusion Button (SfButton). It has it all. It may not be free though but you can do more research on that.

Upvotes: 2

user20279729
user20279729

Reputation:

I had the same issue, the best way I found is to change the Button to a Label, align the label and use the <Label.GestureRecognizers/> to use Tapped="" instead of Clicked="" from the button.

Upvotes: 1

inno
inno

Reputation: 494

U can literally just set a padding to the button to push the text around. (Margin for the button, padding for the text)

            <Button Text="Log In"
                    Margin="0,15,0,30"
                    FontFamily="ButtonFont"
                    Padding="0,0,0,5"
                    FontSize="20"
                    BackgroundColor="#2c2c2c"
                    TextColor="#ffffff"
                    BorderRadius="20"
                    BorderWidth="2"
                    BorderColor="Aqua"
                    Grid.Column="1"/>

Upvotes: 9

SergioAMG
SergioAMG

Reputation: 428

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.

Upvotes: 1

FreakyAli
FreakyAli

Reputation: 16459

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)
    {
        if (e.PropertyName == ExtendedButton.VerticalContentAlignmentProperty.PropertyName ||
            e.PropertyName == ExtendedButton.HorizontalContentAlignmentProperty.PropertyName)
        {
            UpdateAlignment();
        }
        else if (e.PropertyName == Button.FontProperty.PropertyName)
        {
            UpdateFont();
        }

        base.OnElementPropertyChanged(sender, e);
    }

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

    /// <summary>
    /// Sets the alignment.
    /// </summary>
    private void UpdateAlignment()
    {
        var element = this.Element as ExtendedButton;

        if (element == null || this.Control == null)
        {
            return;
        }

        this.Control.Gravity = element.VerticalContentAlignment.ToDroidVerticalGravity() |
            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)
    {
        base.OnElementChanged(e);

        var element = this.Element;

        if (element == null || 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

Upvotes: 5

Related Questions