How to left align a button in Xamarin forms ?

I've a button in xamarin forms. I want it to left align on my device. On iOS it is by default left aligned but for android it is center aligned. I tried using custom renderer for button and set it gravity to left as shown in code below but it does not work for me. Below is my code snippet of button and it's custom renderer. I've added this CustomButton in horizontal stack layout. So, my question is how to left align a button on android ?

`
public class CustomButton : Button
{
public CustomButton ()
{
}
}

var editButton = new CustomButton () {
TextColor = Color.Gray,
Text = Constants.mStringEdit,
BackgroundColor = Color.Green,
FontSize = 18,
HorizontalOptions = LayoutOptions.Start,
};

public class CustomButtonRenderer : ButtonRenderer
{
public CustomButtonRenderer ()
{
}

    protected override void OnElementChanged (ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged (e);

        Android.Widget.Button button = Control as Android.Widget.Button;

        if (button != null) {
                button.Gravity = GravityFlags.Left;
        }
    }
}

`

Answers

  • SKallSKall USMember ✭✭✭✭

    XLabs.Forms (available from NuGet) has ExtendedButton with content alignment properties for both vertical and horizontal.

    https://github.com/XLabs/Xamarin-Forms-Labs/blob/master/src/Forms/XLabs.Forms/Controls/ExtendedButton.cs

    iOS implementation

    Android implementation

    WP implementation

  • ChaitanyaKulkarniChaitanyaKulkarni INMember ✭✭
    edited May 2015

    After several hours of trial and error I found that there's some padding to button. I Changed the button gravity and set it's padding like button.Gravity = GravityFlags.Left; button.SetPadding (0, 15, 0, 0);
    and my button is left aligned now.

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    @ChaitanyaKulkarni said:
    After several hours of trial and error I found that there's some padding to button. I Changed the button gravity and set it's padding like button.Gravity = GravityFlags.Left; button.SetPadding (0, 15, 0, 0);
    and my button is left aligned now.

    I have not found these properties...

  • Matthew.4307Matthew.4307 USMember ✭✭✭

    When you say align do you mean text on button or button? To align the whole button a renderer isn't required, you just set HorizontalOptions=Start.

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    Text, I have used XLabs ExtendedButton

  • SujaBSujaB USUniversity ✭✭✭

    @AlessandroCaliaro Hi
    I have also used extendedbutton .But it is not taking in ios
    < controls:ExtendedButton Text="{Binding PRLineItem.SelectedCategory.Value,Mode=TwoWay}" HorizontalContentAlignment="Start" HorizontalOptions="FillAndExpand" x:Name="CatPickerButton" Style="{StaticResource PickerDataStyle}"/>

    It is working fine in android.

  • Light1c3Light1c3 USMember ✭✭
    edited September 9

    So I installed the NuGet package for XLabs and confirmed it working in the editor by changing the button from new Button => new ExtendedButton and it asked if I want to add a using statement which I did. I then added the VerticalTextalign and set it to start but it's not actually changing the way the button looks. Any ideas?

    Edit: I'm an absolute idiot! I tried changing the Vertical Position when I wanted the Horizontal... Now that I changed that it works.

Sign In or Register to comment.