Center item in RelativeLayout

RedRaRedRa Member ✭✭✭

Hi guys,

I have faced with another issue ...
It is difficult to find how to center image or another item inside RelativeLayout ?!

I have found something like this solution:

<ffimageloadingsvg:SvgCachedImage
                    RelativeLayout.WidthConstraint="{ConstraintExpression 
                        Type=RelativeToParent,
                        Property=Width,
                        Factor=0.5,
                        Constant=0}"
                    RelativeLayout.HeightConstraint="{ConstraintExpression 
                        Type=RelativeToParent,
                        Property=Height,
                        Factor=0.5,
                        Constant=0}"
                    RelativeLayout.XConstraint="{ConstraintExpression 
                        Type=RelativeToParent,
                        Property=Width,
                        Factor=0.25,
                        Constant=0}"
                    RelativeLayout.YConstraint="{ConstraintExpression 
                        Type=RelativeToParent,
                        Property=Height,
                        Factor=0.25,
                        Constant=0}"
                    WidthRequest="50"
                    HeightRequest="50"
                    Source="resource://image.svg"/>

Is there better solution ?

Best Answer

  • RedRaRedRa ✭✭✭
    edited June 24 Accepted Answer

    @ColeX said:
    XConstraintProperty ,
    YConstraintProperty,
    WidthConstraintProperty,
    HeightConstraintProperty,
    BoundsConstraintProperty

    the above properties available in RelativeLayout .

    I'm afraid this is the only solution for centering item.

    Hi @ColeX again,

    Seems like I have found the better solution for me ...
    I've just implemented custom properties for view and here what I got:

    <ffimageloadingsvg:SvgCachedImage
        utilsprop:RelativeLayout.RelativePosition="{utilsme:RelativePosition X=0.25, Y=0.25}"
        utilsprop:RelativeLayout.RelativeSize="{utilsme:RelativeSize Width=0.5, Height=0.5}"
        Source="resource://image.svg"/>
    

    From my point of view this is more readable than solution based on using constraints straightforward ...

    If there is another better solution, please provide and I mark it also as answer :smile:

Answers

  • ColeXColeX Member, Xamarin Team Xamurai
    edited June 24
       XConstraintProperty ,
       YConstraintProperty,
       WidthConstraintProperty,
       HeightConstraintProperty,
       BoundsConstraintProperty
    

    the above properties available in RelativeLayout .

    I'm afraid this is the only solution for centering item.

  • RedRaRedRa Member ✭✭✭

    @ColeX said:
    XConstraintProperty ,
    YConstraintProperty,
    WidthConstraintProperty,
    HeightConstraintProperty,
    BoundsConstraintProperty

    the above properties available in RelativeLayout .

    I'm afraid this is the only solution for centering item.

    Is there any way to add custom property to any view for example like Lable ?!

    I what to add custom property for example:

    <ffimageloadingsvg:SvgCachedImage
                        utils:CustomProperty="24"
                        Source="resource://image.svg"/>
    

    Using this technique it would be possible to create custom property which set all needed properties by custom logic ...
    Is it possible ?

  • RedRaRedRa Member ✭✭✭
    edited June 24 Accepted Answer

    @ColeX said:
    XConstraintProperty ,
    YConstraintProperty,
    WidthConstraintProperty,
    HeightConstraintProperty,
    BoundsConstraintProperty

    the above properties available in RelativeLayout .

    I'm afraid this is the only solution for centering item.

    Hi @ColeX again,

    Seems like I have found the better solution for me ...
    I've just implemented custom properties for view and here what I got:

    <ffimageloadingsvg:SvgCachedImage
        utilsprop:RelativeLayout.RelativePosition="{utilsme:RelativePosition X=0.25, Y=0.25}"
        utilsprop:RelativeLayout.RelativeSize="{utilsme:RelativeSize Width=0.5, Height=0.5}"
        Source="resource://image.svg"/>
    

    From my point of view this is more readable than solution based on using constraints straightforward ...

    If there is another better solution, please provide and I mark it also as answer :smile:

Sign In or Register to comment.