Xamarin Forms - how create images overlay?

Question

I created Xamarin Forms app(for Android) with master detail navigation. For my menu in header(ListView.Header) I want to create it:

1 - background image

2 - logo my app

3 - avatar user for social network. Avatar is smaller than the logo and is inside in logo.

and user name(under the logo).

This is my exist code (without logo):

 <RelativeLayout>

                <Image
                    Aspect="Fill"
                    HeightRequest="150"
                    HorizontalOptions="FillAndExpand"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                          Property=Width,
                                                                          Constant=0}"
                    Source="bg.png" />

               <custom1:CircleImageViewCustom
                    x:Name="Avatar"
                    Margin="5"
                    HeightRequest="100"
                    HorizontalOptions="Start"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                          Property=Width,
                                                                          Factor=1,
                                                                          Constant=0}"
                    VerticalOptions="Center"
                    WidthRequest="100" />


                <Label
                    x:Name="UserName"
                    Margin="10,5,5,5"
                    FontSize="Small"
                    RelativeLayout.XConstraint="5"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                      Factor=0,
                                                                      Property=Y,
                                                                      Constant=110}" />


 </RelativeLayout>

I tried to insert a logo but it does not work. Is it possible better to use AbsolutyLayout? Any help.

*"I tried to insert a logo but it does not work.*" **What** does not work? Is the logo not visible at all, is it distorted, is it cropped? Are you able to add a screenshot how it looks like when you run it in the simulator or on the actual device? — Paul Kertscher, Jan 12 '18 at 11:41
[At this answer](https://stackoverflow.com/a/45942380/8093394) I've did something like that using `Grid`. Have you tried such a thing? — Diego Rafael Souza, Jan 12 '18 at 11:57

Luccas Clezar · Answer 1 · 2018-01-13T16:29:10.840

In my experiences with Xamarin.Forms, I came to understand that, almost always, is better to use a Grid than a RelativeLayout.

So, I advise you to use a Grid instead. I don't use XAML much so I can't post a full XAML code here, but the idea would be something like this:

<Grid>
    <Column Width="1 Auto">
        <Row Width="1 Star">
            <YourAppLogo Height=150 />
            <Avatar Width="100 Absolute" HorizontalOptions="Center" VerticalOption="Center" />
        </Row>
        <Row Width="1 Auto">
            <UserName />
        </Row>
    </Column>
    <Column Width="1 Star" />

    <Background Column=0 ColumnSpan=2 Row=0 RowSpan=2 />
</Grid>

Remember: This is NOT actually XAML. It's just a representation, but it should be pretty straightforward to implement the actual Grid.

EDIT

I'll try to post the full XAML code here:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="16" /> <!-- Margin -->
        <RowDefinition Height="1*" /> <!-- Logo and Avatar -->
        <RowDefinition Height="Auto" /> <!-- User name -->
        <RowDefinition Height="16" /> <!-- Margin -->
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="16" /> <!-- Margin -->
        <ColumnDefinition Width="Auto" /> <!-- Logo, Avatar and Username -->
        <ColumnDefinition Width="1*" /> <!-- Empty space -->
        <ColumnDefinition Width="16" /> <!-- Margin -->
    </Grid.ColumnDefinitions>

    <Image Grid.Column="0" Grid.ColumnSpan="4"
           Grid.Row="0"    Grid.RowSpan="4"
           Source="bg.png" /> <!-- Background -->

    <Grid Grid.Column="1" Grid.Row="1"> <!-- Logo and Avatar -->
        <Image HeightRequest="150" Source="[LOGO]" /> <!-- Logo -->

        <custom1:CircleImageViewCustom VerticalOptions="Center"
                                       HorizontalOptions="Center"
                                       HeightRequest="100"
                                       Source="[AVATAR]" /> <!-- Avatar -->
    </Grid>

    <Label Grid.Column="1" Grid.Row="2"
           HorizontalAlignment="Center"
           Margin="10, 5, 5, 5"
           FontSize="Small" /> <!-- Username -->
</Grid>

This should work. Of course, you'll have to change some values to customize it.

Good call - relative layouts can get expensive due to the number of calculations to draw the final version. As an added bonus, Grids are much easier to visualize, IMO +1 — Joe, Jan 12 '18 at 15:27
I know that the background occupies the entire space, that why I set `RowSpan` and `ColumnSpan` to 2. What exactly is happening? Is there a Padding in the Grid? — Luccas Clezar, Jan 13 '18 at 13:53
thanks, but that's not exactly what I need. I solved this with RelativeLayout — FetFrumos, Jan 25 '18 at 09:10

score 2 · Accepted Answer · answered Jan 25 '18 at 09:13

I solved this with RelativeLayout:

 <RelativeLayout>

                <Image
                    Aspect="Fill"
                    HeightRequest="160"
                    HorizontalOptions="FillAndExpand"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                          Property=Width,
                                                                          Constant=0}"
                    Source="background" />

                <Image Source="logo" HeightRequest="140" WidthRequest="116"
                       Margin="5,0,0,0"
                       RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0.5, Constant=0}"
                       RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0.5, Constant=0}"/>

                <custom1:CircleImageViewCustom
                    x:Name="Avatar"
                    Margin="5"
                    Source="avatar"
                    HeightRequest="100"
                    HorizontalOptions="Start"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y,  Factor=0.5, Constant=15}"
                    RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0.5, Constant=8}"
                    VerticalOptions="Center"
                    WidthRequest="100" />

                <Label
                    x:Name="UserName"
                    Margin="10,2,2,2"
                    FontSize="Small"
                    RelativeLayout.XConstraint="5"
                    TextColor="White"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                      Factor=0,
                                                                      Property=Y,
                                                                      Constant=135}" />


</RelativeLayout>

Xamarin Forms - how create images overlay?

2 Answers2