Problem with jumpy page size on Android when using ToolbarItems with images

ProcogProcog GBMember ✭✭
edited January 15 in Xamarin.Forms

If I add images to the ToolBarItems on my main page then during app start-up on an Android device the page is initially shown at a smaller size (360 x 464) then resized to fill the device (360 x 512). This gives a jarring UI experience particularly if the page is "heavy" for example it contains a Map control. I can reproduce the problem in the Master Detail boiler plate project by just adding an image to the toolbar item on the ItemsPage:

    <ContentPage.ToolbarItems>
            <ToolbarItem x:Name="addToolBarItem" **IconImageSource = "ic_list_white_24dp.png"** Clicked="AddItem_Clicked"/>
    </ContentPage.ToolbarItems>

and adding the relevant images to my drawables in Android.

I can see the resize by overriding SizeAllocated on the ItemsPage:

        protected override void OnSizeAllocated(double width, double height)
        {
            base.OnSizeAllocated(width, height);

            System.Diagnostics.Debug.WriteLine($">>>>>>>> SIZE ALLOCATED: {width} x {height}");
        }

If I take the image off and use Text then the resize doesn't occur.

I've upgraded to the latest version of Xamarin.Forms - 4.4.0.991477

The only way I can avoid this problem is to delay setting the IconImageSource until LayoutChildren runs for the first time:

        protected override void LayoutChildren(double x, double y, double width, double height)
        {
            base.LayoutChildren(x, y, width, height);

            // Yukky workaround...

            if (addToolBarItem.IconImageSource == null)
            {
                addToolBarItem.IconImageSource = "ic_list_white_24dp.png";
            }
        }

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    I appreciate the feedback on this question, are the images ic_list_white_24dp.png (in different folders drawable-hdpi, drawable-mdpi etc) in different sizes?

  • ProcogProcog GBMember ✭✭

    Hi Jezh, they are all different sizes I downloaded from Material Icons website so I'm hoping the sizes are correct:

    mdpi = 24 x 24
    hdpi = 36 x 36
    xhdpi = 48 x 48
    xxhdpi = 72 x 72
    xxxhdpi = 96 x 96

    I'm debugging on an old Moto-G3 (my S9 USB-C port is broken for data) I haven't tried it on the Google Pixel 3a yet.

Sign In or Register to comment.