Hello, I am using a relative layout to display round buttons. I use the width property to make it responsive, but I don't get the corner radius responsive. It looks good on the iPhone 11 Pro, but on the iPhone SE is the radius too high. How can I make it reponsive? Here a screenshot of the iPhone 11 Pro and SE:
Here is my code:
<RelativeLayout x:Name="mainLayout"> <Button Text="Button" TextColor="White" CornerRadius="40" BackgroundColor="Gray" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.2}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.2}"/> </RelativeLayout>
Is there any solution for this? Thanks in advance.
You can do this by adding converter or behaviour. i am giving you an example how can you do this.
at XAML
<Button x:Name="button" Padding="0" Margin="0" Text="Button" TextColor="White" BackgroundColor="Gray" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.2}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.2}"/>
at backend
button.PropertyChanged += (s, e) => { if (e.PropertyName.Equals(nameof(Height))) ((Button)s).CornerRadius = (int)((Button)s).Height / 2; };
Answers
You can do this by adding converter or behaviour. i am giving you an example how can you do this.
at XAML
<Button x:Name="button" Padding="0" Margin="0" Text="Button" TextColor="White" BackgroundColor="Gray" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.2}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.2}"/>
at backend
This works great! Thanks, you made my day.