Difference position of elements between device and android emulator

Question

I am testing a project on both a physical device and with the android emulator. There are small elements that appear displaced in the emulator compared to the physical device

Why this difference?

<RelativeLayout>   
      <yummy:PancakeView  
           RelativeLayout.XConstraint="{ConstraintExpression   
           Type=Constant,  
           Constant=286}"  
           RelativeLayout.YConstraint="{ConstraintExpression   
           Type=Constant,  
           Constant=5}"  
           HeightRequest="27"  
           WidthRequest="27"  
           CornerRadius="100"  
           xct:TouchEffect.NativeAnimation="True">  
              <yummy:PancakeView.GestureRecognizers>  
                  <TapGestureRecognizer Tapped="btMenuDiario_Clicked"/>  
              </yummy:PancakeView.GestureRecognizers>  
                   <Grid>  
                       <BoxView  
                        Color="#404040"  
                         CornerRadius="100"  
                        Opacity="0.6"/>  
                       <abstractions:TintedImage                 
                             Margin="4"  
                            x:Name="ViewPkDiario"  
                            TintColor="White"  
                             Source="ArrowSmall.png"/>  
                  </Grid>  

Answer 1

Hello,

Welcome to Microsoft Q&A!

Why this difference?

It is because the screen size(width) is different between device and emulator , here you should not set Absolute value on the XConstraint , we could use Relative value instead .

   <yummy:PancakeView  
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=-5}"  

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.