Xamarin forms: Image entry is not working as expected in android

Question

I follow this blog for adding an image inside of an entry. It was working fine in android and IOS initially.

But when I changed the android target version and target framework to 9.0 this feature start breaking. Please see the following screenshot.

The image inside entry is zoomed in and not showing as expected. I have updated all the android SDK but no change in the output. Should I do anything else for solving this issue in android?

My Code:

 <StackLayout 
          HorizontalOptions="FillAndExpand"
          Padding="5"
          VerticalOptions="CenterAndExpand">

          <Label
              Text="Email"
              TextColor="Black"
              FontSize="Medium"/>

           <Frame 
              CornerRadius="15"
              Padding="2,-3,-3,-3"
              HasShadow="false"
              BorderColor="#c0eefb"
              OutlineColor="#c0eefb">

               <local:ImageEntry
                    Image="ic_email_entry_image_xx"
                    x:Name="username_entry"
                    Text="charlesgeorge.admin"
                    FontSize="Medium"
                    HorizontalOptions="FillAndExpand"
                    Keyboard="Email"/>
           </Frame>

           <Label
               Text="Password"
                Margin="0,5,0,0"
                TextColor="Black"
                FontSize="Medium"/>

                <Frame 
                       CornerRadius="15"
                       Padding="2,-3,-3,-3"
                       HasShadow="false"
                       BorderColor="#c0eefb"
                        OutlineColor="#c0eefb">

                       <local:ImageEntry 
                              Image="ic_password_entry_image_xx"
                               x:Name="password_entry"
                                FontSize="Medium"
                                Text="admingeorge1@"
                                HorizontalOptions="FillAndExpand"
                                 IsPassword="True"/>
                     </Frame>

                      <Button 
                              Text="SIGN IN"
                              Margin="0,15,0,15"
                              HeightRequest="40"
                              WidthRequest="180"
                               FontSize="Large"
                               TextColor="White"
                                HorizontalOptions="CenterAndExpand"
                                BackgroundColor="#26B5D6" 
                                 Clicked="SignInButtonCliked"
                                  BorderRadius="20"/>
                         </Button>
</StackLayout>

If I downgrade the version from 9.0(pie) to 8.1(oreo), the UI will work as expected. Why in 9.0 it is not working?

Answer 1

After Android 9.0(API 28) , you should provide more size of image asset .

Solution 1:

Put the same image in Drawable and xxx-hdpi,xxx-mdpi and so on .

Solution 2:

You can handle the different logic in different version of Android .

in ImageEntryRenderer

private BitmapDrawable GetDrawable(string imageEntryImage)
{
   int resID = Resources.GetIdentifier(imageEntryImage, "drawable", this.Context.PackageName);
   var drawable = ContextCompat.GetDrawable(this.Context, resID);
   var bitmap = ((BitmapDrawable)drawable).Bitmap;

   if(Android.OS.Build.VERSION.SdkInt < Android.OS.BuildVersionCodes.P)
   {
     return new BitmapDrawable(Resources, Bitmap.CreateScaledBitmap(bitmap, element.ImageWidth * 2, element.ImageHeight * 2, true));
   }

   return new BitmapDrawable(Resources, Bitmap.CreateScaledBitmap(bitmap, element.ImageWidth , element.ImageHeight , true));
}