AspectFill an image and overlay text

NatesCodeNatesCode USUniversity

I'm trying to overlay text onto an image and have the image fill the width of the screen. In order to overlay the text I use a RelativeLayout, by doing so the image's Aspect is no longer applied and doesn't stretch to the full width of the device. I can't seem to find a way to get the RelativeLayout to stretch its width either. Would a grid work better?

<RelativeLayout> <Image Source="officeproducts.png" Aspect="AspectFill"></Image> <Label TranslationX="20" TranslationY="100" FontSize="13" TextColor="White" Text="Get fast, free shipping." /> </RelativeLayout>

Answers

  • JohnMillerJohnMiller USForum Administrator, Xamarin Team Xamurai

    @NatesCode,

    An AbsoluteLayout works well for this.

    <AbsoluteLayout>
        <Image Aspect="AspectFill" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
        <Label ... AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0,0,-1,-1" />
    </AbsoluteLayout>
    

    Note, with AspectFill your image may not take up the entire width and height of the screen if the aspect ratio is different from the layout space/size. You can use Fill instead. However, that might give you results you don't want either.

Sign In or Register to comment.