Image quality very low when set image on "Image"

[Kang_Kamal]

Original Image:

Low output:

HI. I have an image and set it to Background and always got blurred when set "Fill parent". how exactly is image resolution for showing HD images (I have been set for Screen1, Image or canvas and the output is always the same)?

[Gordon_Lu]

Welcome Kang,

1. Is your image a JPG? Better make it a PNG image.

2. You set it to Fill parent. The size of your image is 414 x 896 pixels, so it is better to use this scale (i.e. Height: 414 pixels, Width: 896 pixels).

Canvas Background image Quality Problem

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…

[Kang_Kamal]

Thanks for Reply, Sir
I used PNG, SVG, BMP, and the output was always the same (blurred).

I tried your suggestion and it looks nice, but how exactly is my phone size in pixels?

In MIT Apps :

on my phone :

Looks better but needs more size. Please more helps Thanks

[Gordon_Lu]

Have you tried setting 'ScaleImageToFit' to true and Height and Width to Fill parent?

[Kang_Kamal]

Yes, I did it ('ScaleImageToFit' to true and Fill parent), but the output was always the same (always got the blurred image). Do you have any image for fit on phone (Portrait) and I will try to my project?

[vknow360]

You can try:

Picasso: Extension to load images efficiently with Picasso

1.Introduction Description: Extension to load images with Picasso Latest Version: 2 Released: 2021-03-08T18:30:00Z (UTC) Last Updated: 2023-06-29T18:30:00Z (UTC) 2.Blocks [image] [image] 3.Usages The extension can be used with any view component. A good example will be this: [image] [image] If you want to resize image then make sure you provide both, height and width. Delete cache if you want to load fresh image [image] 4.Source Code You can find the source code at the below…

[Kang_Kamal]

Thanks,. this is great. I will use this extension later, cause what I want to use image background, then use the button and set transparent for "inject" my image as button

[Anke]

@Kang_Kamal

I tried your suggestion and it looks nice, but how exactly is my phone size in pixels?

Get Device Metrics → DisplayMetrics │ Resolution - Density - Font scaling

With this extension you can get various information about the screen → DisplayMetrics : screen dimensions, aspect ratio, pixel resolution, dp (or density-independent pixel, Android’s logical pixel), density, font scale, ... GetMetrics.aix (6.7 KB) [grafik]

Example - blocks

<a class="lightbox" href="https://community.appinventor.mit.edu/uploads/default/original/3X/c/6/c6c37081f690a26dd6f646d06eca19985e4d4354.png" data-download-href="https://community.appinventor.m…

[Anke]

[Kang_Kamal]

Thanks for the extension, I used your extension and works like a charm. Even i know my phone resolution, my image still blurred

[Anke]

@Kang_Kamal

my image still blurred

Try this (720x1440px):

[Kang_Kamal]

ok, I tried with those values. The preview on appinventor looks HD, but when I preview on my phone, got still blurred.
my app inventor :

my phone output :

i tried setting size every i know, but still no luck

[Anke]

Which device & Android version?

[Anke]

@Kang_Kamal

but still no luck

Did you use the image that I posted (in post #11)?
... uploaded it to the assets (Media)?

[Kang_Kamal]

yes, i used your image (720x1440px), i set with percentage, fillParent or pixel value still no luck (blurred).
this is my phone version and dimension :

I also follow this tutorial, but sometimes it works but when I drop layout (verticalArrangement), the image got blurred again.

I have 2 androids with different versions but still no luck,. now I will try using a simulator to try it.

[Anke]

Try this: bgImage.aia (460.1 KB)

[Kang_Kamal]

Your project cannot show the image, but I can download the assets then reupload and set them to fill parent. This image (720x1440px) is a proper image but still not showing HD. Thanks for your advice and if anyone gets better quality, then dm me. Thanks again Anke for replying my noob question.

[Anke]

bgImage2.aia (460.1 KB)