How to add background image to Entry in Xamarin.Forms?

Question

my designer created a background image to style the inputs it looks like this:

How could I accomplish that in Xamarin.Forms? The easy part I'm guessing is removing the border, but I also need to position it on top of that image (I'd assume using RelativeLayout?) and the hardest (in my point of view) setting its proper size to "fill" the remaining of the image. I'm using XAML, but if you know in C# I can extrapolate that, no problem. Any ideas?

EDIT: This is what I've managed to do so far:

The code:

<RelativeLayout>
  <Image Source="input_selected.png"></Image>
  <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
    <Image Source="ico_password.png" Scale="0.7"></Image>
    <Entry x:Name="PasswordT" Placeholder="Senha" IsPassword="True" HorizontalOptions="CenterAndExpand" Text=""></Entry>
  </StackLayout>
</RelativeLayout>

EDIT2:

<?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="LoginPage"
             Style="{StaticResource LoginBackground}">
  <ScrollView>
    <RelativeLayout x:Name="RelativeLayoutLogin">
      <StackLayout x:Name="BackgroundLayout" Spacing="15" HorizontalOptions="Center" VerticalOptions="Start">
        <StackLayout.Padding>
          <OnPlatform x:TypeArguments="Thickness" iOS="15, 38, 15, 15" Android="15, 18, 15, 15" WinPhone="15, 18, 15, 15" />
        </StackLayout.Padding>
        <StackLayout.Children>
          <Image Source="logo.png" Aspect="AspectFit" HeightRequest="75"></Image>
          <Image x:Name="BackgroundBox" Source="box_completo.png" Aspect="AspectFill"></Image>
        </StackLayout.Children>
      </StackLayout>

      <StackLayout RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=BackgroundLayout, Property=Y, Constant=111}"
                   RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=BackgroundLayout, Property=Width, Factor=1}">
        <!--<StackLayout.Padding>
          <OnPlatform x:TypeArguments="Thickness" iOS="15, 38, 15, 15" Android="15, 18, 15, 15" WinPhone="15, 18, 15, 15" />
        </StackLayout.Padding>-->
        <RelativeLayout>
          <Image Source="input.png" x:Name="BgUsername"></Image>
          <Image Source="input_selected.png" x:Name="SelectedBgUsername" IsVisible="False"></Image>
          <StackLayout RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=8}"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=8}"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=-16}"
                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-16}"
                    Orientation="Horizontal">
            <Image Source="ico_user.png" Scale="0.6"></Image>
            <Entry x:Name="UsernameOrEmail" Placeholder="Nome de usuário" IsEnabled="True" HorizontalOptions="FillAndExpand" Text="" TextColor="Black"></Entry>
          </StackLayout>
        </RelativeLayout>
        <RelativeLayout>
          <Image Source="input.png" x:Name="BgPassword"></Image>
          <Image Source="input_selected.png" x:Name="SelectedBgPassword" IsVisible="False"></Image>
          <StackLayout RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=8}"
                      RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=8}"
                      RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=-16}"
                      RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-16}"
                      Orientation="Horizontal">
            <Image Source="ico_password.png" Scale="0.6"></Image>
            <Entry x:Name="Password" Placeholder="Senha" IsPassword="True" HorizontalOptions="FillAndExpand" Text="" TextColor="Black"></Entry>
          </StackLayout>
        </RelativeLayout>
        <!--<RelativeLayout Scale="0.85">
          <Image Source="input.png" x:Name="BgUsername"></Image>
          <Image Source="input_selected.png" x:Name="SelectedBgUsername" IsVisible="False"></Image>
          <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Padding="15, 5, 0, 0">
            <Image Source="ico_user.png" Scale="0.6"></Image>
            <Entry x:Name="UsernameOrEmail" Placeholder="Nome de usuário" IsEnabled="True" WidthRequest="300" HorizontalOptions="CenterAndExpand" Text="" TextColor="Black"></Entry>
          </StackLayout>
        </RelativeLayout>
        <RelativeLayout Scale="0.85">
          <Image Source="input.png" x:Name="BgPassword"></Image>
          <Image Source="input_selected.png" x:Name="SelectedBgPassword" IsVisible="False"></Image>
          <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Padding="10, 5, 0, 0">
            <Image Source="ico_password.png" Scale="0.6"></Image>
            <Entry x:Name="Password" Placeholder="Senha" IsPassword="True" HorizontalOptions="CenterAndExpand" WidthRequest="300" Text="" TextColor="Black"></Entry>
          </StackLayout>
        </RelativeLayout>-->
        <Image x:Name="LoginButtonFm" Style="{StaticResource FmLoginButton}" Scale="0.85"></Image>
        <Label Text="OU" TextColor="Black" HorizontalOptions="CenterAndExpand"></Label>
        <Image x:Name="LoginButtonFacebook" Style="{StaticResource FacebookLoginButton}" Scale="0.85"></Image>
        <Image x:Name="LoginButtonGoogle" Style="{StaticResource GoogleLoginButton}" Scale="0.85"></Image>
        <Image x:Name="LoginButtonTwitter" Style="{StaticResource TwitterLoginButton}" Scale="0.85"></Image>
      </StackLayout>
    </RelativeLayout>
  </ScrollView>
</ContentPage>

Thanks!

Answer 1

You're definitely on the right track. Just need to add a few constraints to one of the View s in your RelativeLayout .

<RelativeLayout>
  <Image Source="input_selected.png"></Image>
    <StackLayout
      RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=8}"
      RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=8}"
      RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=-16}"
      RelativeLayout.HeightConstraint="{ConstraintExpression Type=Constant, Constant=48}"
      Orientation="Horizontal">
      <Image Source="ico_password.png" Scale="0.7"></Image>
      <Entry x:Name="PasswordT" Placeholder="Senha" IsPassword="True" HorizontalOptions="FillAndExpand" Text="offspring"></Entry>
    </StackLayout>
</RelativeLayout>

That will position the StackLayout to fill the entire RelativeLayout with 8dpx padding on each side. Then because the Entry is set to FillAndExpand , it will take up all the space in the StackLayout not occupied by ico_password.