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.

Answer 1

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>