CODEWITHSUNDEEP
xamarin.formsandroid-relativelayout
kesarling
kesarling

Reputation: 2260

How does one position elements in RelativeLayout in Xamarin?

I relation to my question No property, BindableProperty, or event found for “HeightRequest”, or mismatching type between value and property error in Xamarin.Forms, is there any way I can place the username and password entry elements right below the Welcome Label?

So, basically, the app should look like:

[Welcome Label]




  [username]
  [password]


   [login]

I tried using

<RelativeLayout>
    <Label
        Text="Welcome" 
        BackgroundColor="Yellow" 
        TextColor="Green" 
        FontSize="Medium"
        VerticalTextAlignment="Center"
        HorizontalTextAlignment="Center"
        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Factor=1, Property=Width, Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Factor=0.1, Property=Height, Constant=0}"
    />

    <Entry
        Text="Username"
        IsPassword="False"
    />
</RelativeLayout>

(Currently just the username field) but to no avail. Why is the entry field being placed over the label?

Upvotes: 0

Views: 703

Answers (2)

Leo Zhu
Leo Zhu

Reputation: 15031

You could use RelativeToView property to indicate a constraint that is relative to a view

<RelativeLayout>
        <Label
            x:Name="label"
            Text="Welcome" 
            BackgroundColor="Yellow" 
            TextColor="Green" 
            FontSize="Medium"
            WidthRequest="100"
            VerticalTextAlignment="Center"
            HorizontalTextAlignment="Center"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Factor=1, Property=Width, Constant=1}"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Factor=0.1, Property=Height, Constant=0}"
            />

        <Entry
            x:Name="name"
            Text="Username"
            IsPassword="False"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=label,Property=Width,Factor=0.50,Constant=-50}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=label,Property=Y ,Constant=200}"

            />
        <Entry
            x:Name="password"
            Text="Password"
            IsPassword="False"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=name,Property=X}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=name,Property=Y ,Constant=50}"
            />
        <Button Text="Login" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=password,Property=X}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=password,Property=Y ,Constant=200}"/>

</RelativeLayout>

effect like:

enter image description here

Upvotes: 1

I Am The Blu
I Am The Blu

Reputation: 863

Try making something like this & change the alignment according to you.

            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <Label Text="Welcome" HorizontalOptions="Start" Margin="10, 30, 0, 0"/>
                <Entry Placeholder="User Id" Margin="10, 20, 0, 0"/>
                <Entry Placeholder="Password" IsPassword="True" Margin="10"/>
                <Button Text="Login" HorizontalOptions="Center"/>
            </StackLayout>

I used stack layout just for basic purpose, its not perfect UI but just for reference.

Upvotes: 0

Related Questions