How to Center an image in each column inside one row in Xamarin forms?

Question

I know I have already asked this question here: How to Center an image in each column inside one row in Xamarin?, but I didnt have access to an actual device that time, so I just run the emulator and it looks like this:

But now that I have a phone to run it, the page now looks like this:

This is my code for this page:

<StackLayout> 
    <RelativeLayout>
        <Grid Margin="0,10,0,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="5*"/>
                <ColumnDefinition Width="5*"/>
            </Grid.ColumnDefinitions>

            <StackLayout Grid.Row="0" Grid.Column="0"  HorizontalOptions="CenterAndExpand">

                <Image x:Name="ImgSrcMale"                           
                    HeightRequest="165"
                    Source="male"
                    WidthRequest="200"
                    Aspect="AspectFit"
                    HorizontalOptions="CenterAndExpand"
                    VerticalOptions="CenterAndExpand">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer x:Name="MaleClick"
                                            NumberOfTapsRequired="1"
                                            Tapped="MaleClick_Tapped"/>
                    </Image.GestureRecognizers>
                </Image>                        
            </StackLayout>

            <StackLayout Grid.Row="0" Grid.Column="1" HorizontalOptions="CenterAndExpand">

                <Image Source="female1"
                    WidthRequest ="200"
                    HeightRequest="165"
                    HorizontalOptions="CenterAndExpand"
                    VerticalOptions="CenterAndExpand"
                    Aspect="AspectFit"                           
                    x:Name="ImgSrcFemale">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer x:Name="FemaleClick"
                                            NumberOfTapsRequired="1"
                                            Tapped="FemaleClick_Tapped"/>
                    </Image.GestureRecognizers>
                </Image>                        
            </StackLayout>
        </Grid>

        <Grid Margin="0,178,0,0">

            <ScrollView>
                <StackLayout>
                    <Grid VerticalOptions="CenterAndExpand" Margin="20,0,20,0" RowSpacing="20">
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>

                        <Label Text="Gender"
                                FontSize="Title"
                                TextColor="WhiteSmoke"
                                HorizontalOptions="Center"
                                FontAttributes = "Bold"
                                Grid.Row="0"/>

                        <local:RoundedEntry x:Name="EntryUsername"
                                Placeholder="Username"
                                TextColor="WhiteSmoke"
                                PlaceholderColor="WhiteSmoke"
                                Grid.Row="1"/>

                        <local:RoundedEntry x:Name="EntryPassword"
                                Placeholder="Password"
                                IsPassword="True"
                                TextColor="WhiteSmoke"
                                PlaceholderColor="WhiteSmoke"
                                Grid.Row="2"/>

                        <local:RoundedEntry x:Name="EntryEmail"
                                Placeholder="Email"
                                Keyboard="Email"
                                TextColor="WhiteSmoke"
                                PlaceholderColor="WhiteSmoke"
                                Grid.Row="3"/>

                        <Button Text="Sign Up"
                                HorizontalOptions="CenterAndExpand"
                                TextColor="WhiteSmoke"
                                BackgroundColor="Coral"
                                WidthRequest="150"
                                Clicked="Button_Clicked"
                                CornerRadius="25"
                                FontAttributes = "Bold"
                                FontSize = "Large"
                                Grid.Row="4"/>
                        <Label x:Name="GenderLabel" 
                                Text=""
                                TextColor="WhiteSmoke"
                                IsVisible="False"/>

                    </Grid>
            </StackLayout>
            </ScrollView>
        </Grid>
    </RelativeLayout>
</StackLayout>

Answer 1

You could easily create this layout with one grid. Remove the top-level StackLayout and RelativeLayout. You may want to put the whole grid inside a scrollview to allow the screen to move up with the keyboard.

I'd recommend a grid with two columns and six rows (the controls at the bottom will span both columns. Define the columns with width * (not sure why you had 5*). You don't need to wrap the images in anything, just place them in the grid directly.