Xamarin XAML: Placing a Grid over an Image (responsive to screen size)

I'm a complete newbie to XAML and Xamarin forms.

I was looking for a way to design a UI where transparent buttons are placed on a background image, which will function as a remote (The buttons will be placed on the icons in the screenshot below):

I was trying to alter Xamarin's GridDemoPage for this. I have a 3*3 Grid. This is what I've been able to do so far:

And here's my code:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
            x:Class="iRemote.RemotePage"
            Title="REMOTE"
            BackgroundImage="light.png"
            BackgroundColor="Transparent">

    <RelativeLayout VerticalOptions="Center" HorizontalOptions="Center">

        <Grid IsVisible="false" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" WidthRequest="330" HeightRequest="330" Padding="0,0,0,0">
            <Button x:Name="Btn1" Text=""
                   Grid.Row="0" Grid.Column="0" Clicked="OnClickCommand" BackgroundColor="Aqua"/>
            <Button x:Name="Btn2" Text=""
                   Grid.Row="0" Grid.Column="1" Clicked="OnClickCommand" BackgroundColor="White"/>
            <Button x:Name="Btn3" Text=""
                   Grid.Row="0" Grid.Column="2" Clicked="OnClickCommand" BackgroundColor="Red"/>
            <Button x:Name="Btn4" Text=""
                   Grid.Row="1" Grid.Column="0" Clicked="OnClickCommand" BackgroundColor="Blue"/>
            <Button x:Name="CenterButton" Text=""
                   Grid.Row="1" Grid.Column="1" Clicked="OnClickSend" BackgroundColor="Black"/>
            <Button x:Name="Btn5" Text=""
                   Grid.Row="1" Grid.Column="2" Clicked="OnClickCommand" BackgroundColor="Green"/>
            <Button x:Name="Btn6" Text=""
                   Grid.Row="2" Grid.Column="0" Clicked="OnClickCommand" BackgroundColor="Yellow"/>
            <Button x:Name="Btn7" Text=""
                   Grid.Row="2" Grid.Column="1" Clicked="OnClickCommand" BackgroundColor="Maroon"/>
            <Button x:Name="Btn8" Text=""
                   Grid.Row="2" Grid.Column="2" Clicked="OnClickCommand" BackgroundColor="Lime"/>
        </Grid>
        <Image x:Name="RemoteCenterImage" Source="r_720_inactive.png"/>
    </RelativeLayout>
</ContentPage>

Quite evidently, I haven't gotten very far.
I was thinking of enclosing the buttons in an absoluteLayout and placing/resizing them to fit on the icons.

But, I'm faced with multiple problem. I have hard-coded the Grid's height and width, so this code is not adaptive wrt screen-size.

1. Is my approach of using a Grid to accomplish this alright? Or is there a better way to do this?

2. How can I change the XAML to make the UI responsive?

3. How should I position/place the buttons within the Grid in a responsive fashion?