I am building an android application and I have issues with images.
I use this image:
and here's my result:
As you can see, the first image is pretty clear but not on my android application. The image is blurry.
I tried using an ImageView and ImageButton but same result for both.
Any solution to this?
Why the image quality is blurry?
Simply because the image size and DPI is low. If you use a small images on a large device, the low resolution image will have to expand to the size in the ImageView or ImageButton property (layout_width and layout_height).
Let's pretend we need to use a small device phone like the Nexus One. This has a resolution of 480 pixels by 800 pixels.
If you have an image that is 128 pixels by 128 pixels within 100% scale, you will put 3 images side by side.
Let me demonstrate you with this example. I am using two images:
https://www.iconfinder.com/icons/310718/fiddle_instrument_music_violin_icon#size=128
https://www.iconfinder.com/icons/310718/fiddle_instrument_music_violin_icon#size=512
Here's the test:
Left Side
I use the 128x128 first, then the 512x512 using the layout_width and layout_height with 128xp as the value. (This is not recommended, just for test purposes).
As you can see, they are very similar in quality. Which make sense since both are sized at 128x128 pixels.
Right side
I used the same 128x128 first, then the 512x512 using the layout_width and layout_height with 130dp as the value. Now you can see the difference in quality (look at the strings). With high density pixels, the 128x128 will have to be stretched and the 512x512 will have to be shrunk. This way, the 128x128 will lose quality image and makes it blurry.
Conclusion
Make sure the images you use have a higher resolution and a high DPI and make sure you put them in their respective folders. (drawable-hdpi, drawable-ldpi,
drawable-mdpi, drawable-xhdpi,drawable-xxhdpi).
Perhaps you're inadvertently upscaling it. Try adding android:scaleType="center" to your ImageView's XML code. If it's then sharp, but not displaying at the size you need, you'll need a higher resolution source.
Convert the images to PNG i think have better quality in that picture. And check the size
Related
how to use vector images which scale up and down according to the screen sizes?
I m using a vector image in my project but it is not scaling in big screens.
what you mean by being scaled ? maybe you are misunderstanding.
if you mean the image size would be changed in various screen sizes such thing wont happen. the image size is what you provide in your imageview (or any otherview using the image).
the only different between vector assets and normal asset is that vector asset are redrawn every time so you wont have a low quality image no matter how big it is and which device it is being shown in. so you wont need to save various size of image for various size of screens.
if you want to change the size of image just change the imageView height and width. you can use dp (density independant) unit.
you dont have to do anything for support vector images for diffrent screens its already scale for the relevant dp, Can you give more details about your problem when you say "it is not scaling in big screens?"
maybe you want the image on tablets will be bigger?
I'm trying to make an activity with an image that is the same height as the screen. I tried going to easy route, and just using a really big image and then scaling it down within the app, but when I run it on a device with a smaller screen, I get an error saying the device ran out of memory. I was hoping to make several drawable folders for each dpi (drawable-mdpi, drawable-hdpi, etc.). I looked up the pixel dimensions for splash screens, but when I resize my image to fit those dimensions (https://stackoverflow.com/a/15744389/5909429), the image only fills about half the screen on my smaller device.
What dimensions should I actually use, or am I using the drawable folders wrong?
[...]or am I using the drawable folders wrong?
Yes and no. I don't know about any "perfect" values for your picture dimensions, and I doubt that there are any, due to the fact that there are too many different phones to support.
The usage of dpi ensures that everything has the same size. If you were to put a ruler on your screens on a xxxhdpi and a ldpi device, both pictures would be the same size. This is dpi.
What you are trying to do is filling a phone screen. This has not much to do with dpi, but is about the actual pixel size of the screen. If you have a 1920x1080 phone display, you want an image with the same resolution. This does not say anything about dpi or screen density, and it has frankly nothing to do with it.
To properly scale down your image—and not running into OOM—you can either use a designated image loading library, like Glide, or Picasso, or you can take a look at BitmapFactory which lets you supply a inSampleSize to load the image in the size needed yourself. The official documentation can be found here at Loading large bitmaps efficiently.
I have been looking around and can't find a positive answer to this. For images, do we use hard-coded dp for the layout width and height or do we use wrap_content? For example, say I have an imageview with an icon as its image. If I use wrap_content, the image is too big, and there is no way to resize it (image was made using xxhdpi in mind). If I set the dp manaully then the image doesn't scale with the device if its screen is larger (or does it, I'm not sure if it still does?).
I want to know the workflow we're suppose to follow, I have read all the documentation but it's vague in terms of scaling images. I have an image for each of the various screen sizes (hdpi, mdpi, etc.).
Questions
If I hardcoded the width and height, does android still use those
images (hdpi, mdpi, etc) for different screen sizes?
Is hardcoding the width and height bad practice, if so, what is the
alternative to resizing the image?
What if we hardcoded the size for each screen resolution? So for
example, I would use 200dp x 200dp for tablets and 100dp x 100dp for
phones when hardcoding the width and height of an image. Is this a
good approach?
What is the best workflow to follow when working with images? Should
I create a different size of an image for each screen resolution?
Should I use one large image and then hardcode the size for each
layout?
Is there a website or program in which I can provide an image and it automatically comes up with the various screen density images? For example, I upload an image and it will give me an mdpi, hdpi, hdpix, and etc images for it. I have looked around, but can only find programs that work with icons, not images.
You should be able to rely on the android system to scale your images appropriately. Check out the Dev docs for various scaling methods
http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
I have an application that uses ImageViews to show some pictures. The image sizes are 320x480px.
I use some animation to move these pictures to the center of the screen and when the phone has the resolution of 320x480, it works great.
However, when I tried it on emulator with the resolution of 240*320, there were some problems:
The ImageView is still 320x480 so it looks way too big
The animation that uses the screen resolution can't move the pictures to the center, it is at least 20-30 px off
I learned the when dealing with pictures, Android dynamically changes resolution of them to make the images fit in. How could I set that these images should be resized according to screen resolution?
It's hard to say what's wrong without seeing any code. Android resizes images from res/drawable according your screen resolution (ldpi, mdpi, hdpi, etc.). If you place pictures in res/drawable-nodpi, they will not be scaled. You could also use the density dependent folders res/drawable-ldpi, res/drawable-mdpi, res/drawable-hdpi etc. You should definitely read the docs here.
I believe that android:adjustViewBounds="true" and android:scaleType="fitCenter" is what I needed. The ImageViews are scaled down to 240x320 and the animation works well.
Interesting that the upscaling is not proper. When I used in the emulator at 480x800, my ImageView is scaled up to 480x720 so I get black edges. Any idea for that?
When 9patch png images are used, do we need to provide them in xhdpi, hdpi and mdpi format also or only one resolution is enough? Because either way they will resize on resolution... or am I thinking something wrong?
You should use different sizes, otherwise a border on a LDPI device would look much thicker than on an XHDPI device
For the Nine patch image only one resolution is enough because 9-patch image scales the image text according to the layouts...
Nine-patches are widely used for background kind of images: most typically it would be some sort of border and a fill. You should provide only one resolution of 9patch, Android would scale it appropriately.