Xamarin Forms image not showing

Question

I have a Xamarin Forms (2.0) Android app where I'm trying to show an image. I've got an icon called icon-pages-r1.png which I'm trying to show using the following code:

<Image Source="icon-pages-r1.png" />

The image isn't showing though. When I change the source to Icon.png (the default Xamarin icon) it does work.

The image is a semi-transparent PNG (thus a colored icon in the middle and transparent around it), it's 46x46 and in Windows it shows fine as item type PNG File. I tried opening the image in Paint and re-saving it (which kills the transparency) but that doesn't work either. The Build Action for the images are AndroidResource with Copy to Output Directory set to Do not copy.

Does anyone know why I can't get this image to show in my app?

Is it in Resources/drawable? You also might try cleaning your solution and manually nuking the bin and obj folders. Sometimes that helps. — Jason, Mar 02 '16 at 20:22
@keanu101 you can set it by going to the properties for the object (rightclick in solution explorer -> properties). — Leon Cullens, Jun 30 '16 at 23:40
I was clueless for the longest time. I was clicking on the project itself but I realized it now that I am supposed to select properties of the image itself. Thanks @LeonCullens — nishantvodoo, Jul 05 '16 at 16:41

score 22 · Accepted Answer · answered Mar 02 '16 at 23:20

22

You can't use hyphens in image names for Xamarin Android. Get rid of the hyphens (in both the file name and the Image reference) and you'll be set.

answered Mar 02 '16 at 23:20

DavidS

2,904
1
15
21

4

Ugh, this was the issue. Damn, I wasted HOURS to figure out this stupid undocumented rule. Tip to others: go to tools -> options -> projects and solutions -> build and run -> MSBuild project build output verbosity -> set it to 'normal' instead of 'minimal'. This will actually show this as an error in the output. – Leon Cullens Mar 03 '16 at 22:18
1

"Normal" didn't cut it for me. I had to set it to "Diagnostic" until I actually managed to see the errors related to PNGs. – Eric Wu Nov 09 '16 at 12:31
But why does Xamarin Android not allow hyphens? Is there any work around to trying to get those hyphen images to work for when you can't update them? – PizzaHead Apr 02 '19 at 18:53
Just to clarify, the underlying issue is Android, not a rule that Xamarin put on top of it. Drawable resource names are used as identifiers in Java/C#, and hyphens cannot be used as identifier names in either. – DavidS Apr 02 '19 at 20:20
1

Also appears that dots/fullstops/periods aren't allowed in the file name, other than just before the file extension, for the same reason. – Netricity Jan 20 '22 at 23:13

score 12 · Answer 2 · answered Oct 01 '16 at 10:14

12

For others who may end up here...

Make sure the image file is actually a part of the project (Resources\drawable) and that the build action is AndroidResource.

answered Oct 01 '16 at 10:14

James John McGuire 'Jahmic'

11,728
11
67
78

That's what did it for me. Had to include images in project after manually pasting them in the folder. Is there a better way to do this so new images are automatically added tot he folder? – Bryan Feb 15 '19 at 16:52
@Bryan You might want to try to experiment with .net standard project files. In a .net standard project, at least, source files (*.cs) are added automatically. But Xamarin android projects may not, yet, be compatible with .net standard projects. – James John McGuire 'Jahmic' Feb 16 '19 at 11:20

score 9 · Answer 3 · answered Apr 10 '17 at 15:15

9

When binding to the name of an image resource in android I found it must be:

in Resources/Drawable folder
set Build Action: AndroidResource
set Copy to Output: Do not copy
doesn't allow hyphens in name
name is case sensitive

answered Apr 10 '17 at 15:15

Mike Benkovich

91
1
1

score 3 · Answer 4 · edited Jun 20 '20 at 09:12

I had this issue.I set MSBuild project build output verbosity as Diagnostic. Now I found the following in my Output window when I searched for OOM.

ImageRenderer: Error loading image: Java.Lang.OutOfMemoryError: Failed to allocate a 571513228 byte allocation with 2140744 free bytes and 92MB until OOM

Now tried

Create a png image which has less than 200KB size and less than 1400 X 1050 size (for testing purpose).

It worked fine.

Note: "MSBuild project build output verbosity" can be found under Tools -> Options -> Projects and Solutions -> Build and Run

General Checkpoints

Read Local Images
Make sure the file name has only lowercase alphabets.
Add that png file into Resources/drawable folder.

Create a content page as follows

<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
    <Label Text="Pre" />
    <Image Source="abstracttriangleg.png"  
           Aspect="AspectFill" VerticalOptions="End" HorizontalOptions="CenterAndExpand"/>
    <Label Text="Post" />
</StackLayout>

Clean solution.
Clean bin and Obj files.

Resources says:

Android supports bitmap files in three formats: .png (preferred), .jpg (acceptable), .gif (discouraged).

Compress PNG and JPEG files says:

You can reduce PNG file sizes without losing image quality using tools like pngcrush, pngquant, or zopflipng. All of these tools can reduce PNG file size while preserving the perceptive image quality.

The pngcrush tool is particularly effective.

To compress JPEG files, you can use tools like packJPG and guetzli.

References:

More reference: [Loading Large Bitmaps Efficiently](https://developer.android.com/topic/performance/graphics/load-bitmap.html) and [Load Large Bitmaps Efficiently](https://developer.xamarin.com/recipes/android/resources/general/load_large_bitmaps_efficiently/) — LCJ, Jul 14 '17 at 20:44

score 1 · Answer 5 · answered Aug 07 '17 at 07:15

1

For iOS

Step 1: Add your image into ios -> Resources folder (If not create it)

Step 2; Right click image -> Properties -> Build action -> set as "Content"

answered Aug 07 '17 at 07:15

Ranjithkumar

16,071
12
120
159

Xamarin Forms image not showing

5 Answers5

Linked