Hi all, I have problem with Canvas Background image quality. Despite of the size or resolution, my image quality is not very satisfying. Is there any way to make it better? Also is it possible to make zoom in to the background. I am happy to cover the cost for any improvement could help. Thank you,
This also seems to apply to the Screen and arrangement background images:
MIT have been alerted
Do you guys know how long we all have to wait roughly? Or on average how long does it take to sort a bug? Thanks
Some resolved in minutes/hours, others years - depends on a combination of the team’s priorities, and the triviality/or otherwise of the fix.
I can contribute some money if someone can build some kind of solution.
Ok, I found one solution which fix %80 of my problem. If you do fixed size Screen somehow it gives you better image quality for Canvas background. Also there is one more idea from Bobby (you can check his post on the link below). Which is little bit going around. I haven’t check that yet but I will check for sure and I will share the result.
Exactly! Better quality because the image is not compressed or skewed to fit the container. Use the same HxW image in pixels with a container sized exactly the same and you get superior image rendering.
Image quality is related to
- the type of image; most people find png images scale 'better' than jpg images
- the image rendered when the 'original' is the same size as the container on the device (is it being posted to a Canvas or an Image component or a Screen background?) that is exactly the 'original' image dimensions. If the image needs to be 'adjusted' to fit the container, the image may/will become compressed and may look blurred or fuzzy. ...and other 'things.'
Are you using
- exactly the image H and W in the container as the image?
- a jpg or png image?
- telling the Android to Scale the image:
- the advice using images here> Using Images with App Inventor
- using a Fixed or Responsive Screen Responsive Design in App Inventor. Which Sizing you use will affect the display quality off the image on different devices.
- is the H to W proportions of the image the same as the container H to W? They need to be to avoid compression.
If you provide a 'sample' aia of what you are doing, someone might provide suggestions?
If you programmed using Android Studio (the professional compiler) you would be REQUIRED to provide several sets of EACH image to accommodate display on various density/screen sizes bundled with your app. You don't have to provide images at different resolution with App Inventor 2 . The developers 'simplified' using images at the cost of image quality if you use the Android cpu to compress, squash images to fit automatically on all devices. Sometimes the compression works great; sometimes not.
Keep on experimenting Ulubilge. 20% to still 'fix'.
Hi SteveJG,
Thank you very much for your explanation. It clears a lot of my questions. Now I will try a few more things. But what I understood somehow we have to stop application to compress the picture as it is not a good compressor. So ScalePictureToFit is definetly not a good idea.
Problem with my application, My users has different type of device (tablet, phones with different resolution). So the higher the resolution of my picture is better the result for high resolution phones/tablets. I made a way responsive screen instead of using responsive screen option. Now I have to apply the same to my picture so I assume i will gain another %10 
. I will let you know the result
Consider providing multiple images of your 'pictures'. Display the appropriate one depending on the dimensions of the screen your app runs on (see Screen Size .
In Screen.Initialize, determine the screen dimensions the app is running on. Based on the dimensions tell your app to use a high or a low resolution version of your 'picture'. Mimicking the behavior of Android Studio apps should ensure large high quality images on tablets and clear, smaller images on small phone screens. Make your app behave like apps built using using Android Studio.
Let us know the results of your experiments. Provide a screen capture to show how you improved the images. Good luck.
Ok I did it. Perfect quality is with hightest resolution with perfect aspect ratio together with fixed screen sizing. But there is 2 more trick (I am not sure that it is really effective or not). As I find the solution I didn’t give a xxxxx to check that. Someone can check and tell the result also
Put your canvas in horizontal arrangement and set the height and width in percentage (with the ratio of your picture). And put the canvas in it and set height and width in fill the pattern. That is all fox. But of course I prefer someone fix the compressing issue rather then walking around to find a solution.
There is no compression issue. App Inventor 2 attempts to do what most developers are to lazy to do using this neat coding feature which 'eliminates' the need for multiple images at different resolutions. Compression works for most users and is dependent on how well each Android device can process using its cpu. You do not have to use Compression if you provide multiple images!
Well, I called it issue because it doesn’t give the correct result or lets say the result that I expected. Of course, nothing is perfect and cannot fulfill every request. Actually, my images are one fix resolution but my problem was wrong ratio. Anyway, it is good to have a solution. And for that thank you so much about the information to fix the problem. I have been trying to figure it out almost 2 months. Now I can sleep well
Hi SteveJB, Yes exacly I do it that way for responsive page size. Unfortunately, I cannot provide screenshots as they are confidential info of my customer. But when I have time, I will try to put some other pictures to show the difference.
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.