Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

AbsoluteLayout.LayoutBounds units

MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭

I have an image which I want to place at an absolute position on the screen.

        <Image
            Source="{Binding Mark}"
            AbsoluteLayout.LayoutBounds="{Binding MarkPosition}"
            AbsoluteLayout.LayoutFlags="None" />

On iOS and Windows Phone the position has to be in device pixels. On Android (at least on my Nexus 10 and Sony Xperia Z1 Compact) it has to be device pixels / 2.

It is not device independent pixels as a Android developer would expect (and which would be a good idea in a framework targeting many very different devices). It is not device dependent pixels like on iOS and WP. It is half that number.

  • Is this a bug which will be fixed in a future release?
  • Is it the same on all devices so that I can rely on it?
  • If it is different on other devices or it will be fixed in a future release, how can I calculate the value I need?

Posts

  • MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭

    This seems to work as designed. But the 2 is not hardcoded, it depends on the device. The value for the current device is available with Xamarin.Forms.Forms.Context.Resources.DisplayMetrics.Density in the Android project.

  • MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭

    The best explanation of units I found so far is on http://blogs.plainconcepts.com/xamarinteam/2015/04/06/translating-designs-into-layouts-units-conversion/

    So it is actually different on every device and you cannot rely on anything.

    Maybe https://download.xamarin.com/developer/xamarin-forms-book/BookPreview2-Ch05-Rel0203.pdf explains it. I'll read those 21 pages when I have time.

  • MichaelWatsonMichaelWatson USXamarin Team Xamurai

    You would want to use Device Independent Pixels for Android and real pixels for iOS and Windows Phone. I implement this in all of my projects by creating two static integers in my subclassed Application file:

        public class App : Application
            {
                public static int ScreenHeight;
                public static int ScreenWidth;
    
                public App ()
                {
                    // The root page of your application
                    MainPage = new ExpandableListPage();
                }
            }
        }
    

    Then in my MainActivity.cs OnCreate override, I set the values using the following (Make sure to set values before calling LoadApplication()):

        var pixels = Resources.DisplayMetrics.WidthPixels; // real pixels
        var scale = Resources.DisplayMetrics.Density;
        int dps = (int)((pixels-0.5f)/scale);
    
        App.ScreenWidth = dps;
    
        pixels = Resources.DisplayMetrics.HeightPixels; // real pixels
        dps = (int)((pixels-0.5f)/scale);
    
        App.ScreenHeight = dps;
    

    Then in my AppDelegate.cs FinishedLaunching override, I set the values using the following (Make sure to set values before calling LoadApplication()):

        App.ScreenWidth = (int)UIScreen.MainScreen.Bounds.Width;
        App.ScreenHeight = (int)UIScreen.MainScreen.Bounds.Height;
    

    Now in my PCL, I can utilize the screen size for my elements:

        Label text = new Label {
                WidthRequest = (double)App.ScreenWidth
        };
    

    I know this doesn't directly answer your question around AbsoluteLayouts, but it demonstrates another way to handle rendering elements on devices that will work across the board.

  • MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭

    Thanks @MichaelWatson
    so you calculate all sizes based on those two values?

  • MichaelWatsonMichaelWatson USXamarin Team Xamurai

    @MichaelRumpler yup!

    I utilize it in all my applications for sizing and positioning elements. If you want to check out an example, I released my first Xamarin.Forms application on GitHub to help anyone out. It's called BrewMate and shows the user interface being built with both XAML and programmatically in a simplistic style utilizing the screensize. I'm still working on the testing suite with it, but I have ran it on 130 unique Android devices with the elements rendering perfectly on all the screens. Once I have the results cleaned up, I will post them on that GitHub also.

    https://github.com/michael-watson/BrewMate

Sign In or Register to comment.