Using AbsoluteLayout for a background image but an element not correctly positioned

Hi, I am using a relative layout to add a background image so that I can set the aspect property, however now that I've done that, the share button which was supposed to be at the bottom of the screen is no longer there.

This is my code (inside the ContentPage):

<RelativeLayout Parent="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

    <Image Source="Background.jpg" Aspect="Fill" RelativeLayout.WidthConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width}"
            RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height}"></Image>

    <StackLayout>

        <Label Text="Timetable" TextColor="Silver" HorizontalOptions="EndAndExpand" Margin="0, 10, 20, 0">
        </Label>

        <Image Margin="15, 20" HorizontalOptions="Center" WidthRequest="350" Source="subtle-logo.png"></Image>

        <Image HorizontalOptions="Center" x:Name="PlayPauseButton" Source="play.png" WidthRequest="75">
        </Image>

        <Image HorizontalOptions="Center" x:Name="shareButton" Source="share-button.png" WidthRequest="50" 
               VerticalOptions="End" Margin="0, 0, 0, 20">
        </Image>

    </StackLayout>

  </RelativeLayout> 

This is it currently:
us.v-cdn.net/5019960/uploads/editor/ew/7on5hu6uszq0.png

This is where it should be (without the background image and without the relative layout).

us.v-cdn.net/5019960/uploads/editor/i4/r20ottjzqdhc.png

Best Answer

  • alexcons123alexcons123 ✭✭
    Accepted Answer

    I managed to solve it with this code:

    <AbsoluteLayout>
    
        <Image Source="Background.jpg" Aspect="AspectFill" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" />
    
        <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
    
            <Label Text="Timetable" TextColor="Silver" HorizontalOptions="EndAndExpand" Margin="0, 10, 20, 0">
            </Label>
    
            <Image Margin="15, 20" HorizontalOptions="Center" WidthRequest="350" Source="logo.png"></Image>
    
            <Image HorizontalOptions="Center" x:Name="PlayPauseButton" Source="play.png" WidthRequest="75">
            </Image>
    
            <Image HorizontalOptions="Center" x:Name="shareButton" Source="share-button.png" WidthRequest="50" 
                   VerticalOptions="EndAndExpand" Margin="0, 0, 0, 20">
            </Image>
    
        </StackLayout>
    
    </AbsoluteLayout> 
    

Answers

  • DianaZDianaZ Member ✭✭

    Test your code on my side, same effect if I don't use RelativeLayout and Image, I think you should adjust your layout file according your needs.

  • alexcons123alexcons123 Member ✭✭
    Accepted Answer

    I managed to solve it with this code:

    <AbsoluteLayout>
    
        <Image Source="Background.jpg" Aspect="AspectFill" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" />
    
        <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
    
            <Label Text="Timetable" TextColor="Silver" HorizontalOptions="EndAndExpand" Margin="0, 10, 20, 0">
            </Label>
    
            <Image Margin="15, 20" HorizontalOptions="Center" WidthRequest="350" Source="logo.png"></Image>
    
            <Image HorizontalOptions="Center" x:Name="PlayPauseButton" Source="play.png" WidthRequest="75">
            </Image>
    
            <Image HorizontalOptions="Center" x:Name="shareButton" Source="share-button.png" WidthRequest="50" 
                   VerticalOptions="EndAndExpand" Margin="0, 0, 0, 20">
            </Image>
    
        </StackLayout>
    
    </AbsoluteLayout> 
    
Sign In or Register to comment.