There are so many material on densities, multiple screen support, so many questions on SO, but I still have not got it.
My goal is simple: display a bitmap as large as available space for ImageView. I need BitMap as I will do some operations on it.
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/figureView" />
I will have some pictures to be used in the bitmap. I will place them in drawables directory. I will reference them with R.drawable.pictureX. I will use Picasso to load them and scale them:
Bitmap bitmap = Picasso.with(getContext()).load(resourceId).resize(w, h).get();
The unclear part for me is all those xxhdpi folders and Android heuristic to select the best.
When a documentation says that Android will automatically scale the image does it apply to my case? I do not want to scale already scaled pictured.
How many dpi variants shall I store in my case and where? Shall I have single file in no-dpi folder or shall I create picture variant for each dpi folder?
How can I determine a dimension for picture resource? It is easy for icons: for example 24x24 dpi and then multiple it with DPI formula. But I want to cover complete screen height. A chapter Configuration examples lists: 240x320 ldpi, 320x480 mdpi, 480x800 hdpi, 720x1280 mdpi, 800x1280 mdpi etc. There are no screen size qualifiers for resources.
Thanks for clarification.
I realized that in fact it is easy to find out Android behavior. I just need each DPI variant different so I can distinguish between them. I put a text with DPI name and pixel resolution inside each picture.
There is a sample GitHub Test DPI project. It has two ImageViews. The first is initialized from XML and Android does scaling. The second is a placeholder that I fill with a BitMap. I entered 200dp as its size and that was correct. Pixel size of MDPI = size in dp.
What I found is logical. Android does not know anything about my intentions. It just selects the best available resource for current DPI.
Nexus 5x uses XXHDPI by default, Samsung SIII Mini uses HDPI. If I delete their default DPI folders, they down-scale higher available variant: XXXHDPI and XHDPI. If I delete all variants except NODPI, this will be used.
And finally if I change the dimensions of ImageView dynamically loaded from source code to 300dp, then it will be scaled and look ugly. Android cannot know at decodeResource execution that I will scale it later and that there is a better resource available.
What remains unknown is how to find out dimensions of picture that fits the screen.
Java:
BitmapFactory.Options opt = new BitmapFactory.Options();
opt.inScaled = false;
Bitmap figureBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_test, opt);
ImageView imageView=(ImageView) findViewById(R.id.testView);
imageView.setImageBitmap(figureBitmap);
Activity:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_test" />
<ImageView
android:id="#+id/testView"
android:layout_width="200dp"
android:layout_height="200dp" />
Update 30th august
Original picture: 230x541 px, loading with
Picasso.with(getContext()).load(R.drawable.amalka).into(target)
stored in nodpi, loaded as 230x541 px Bitmap
stored in xxhdpi, loaded as 230x541 px Bitmap
1.Android will automatically scale image in case when you provided image for one screen dencity and there is no such image for another one. e.g. if you add your image only in drawable-xxxhdpi folder, Android will generate images for xxhdpi, xhdpi screen dencities etc.
2.You can save your image in one folder drawable-xxxhdpi and let Android make the downscale, if you don't like the result you can create images for different dencities on your own.
name dencity scale
mdpi 160dpi x1
hdpi 240dpi x1.5
xhdpi 320dpi x2
xxhdpi 480dpi x3
xxxhdpi 640dpi x4
3.You can define dimensions of your images based on size of you ImageView and dpi scale. For example if your ImageView has width 80dp and height 40dp then your image for drawable-mdpi folder should have size 80x40px because mdpi is a baseline dencity, for drawable-hdpi then you need to have image 120x60px (scale is 1.5) etc. For drawable-xxxhdpi your image will be 320x160px.
If you want your image to fit all the screen on all devices you can use parameter android:scaleType="centerCrop", it will make the image take all the space but little part of image can be hidden depending on screen aspect ratio. You can also try to specify image resorces based on shortest dimension of the available screen area, e.g. drawable-sw720dp. Read more about this here.
Related
I see a lot of post on this topic, however I haven't seen an explanation on what image size to take as a reference, let me explain.
I want to add a background image and make it suitable for each phone screen size so from mdpi to xxhdpi (if I'm not talking nonsense)
What size should my base image be?
I used a 600x1200 image and a 1080x1920 then converts using this site
https://romannurik.github.io/AndroidAssetStudio/
Unfortunately I noticed that on my two phones the image was distorted, I'm starting to think my base image size was wrong
So my question
What image size should I take to then create multiple densities ?
Sorry if it's redundant !!!
I'm starting to learn how to adapt and it's not that easy
If you want to create a background picture, your reference size is mdpi with 320x480px. You can then calculate the size according to the factor
hdpi: 1.5 (480x720)
xhdpi: 2.0 (640x960)
xxhdpi: 3.0 (960x1440)
xxxhdpi: 4.0 (1280x1920)
Note however, that nowadays devices have all kinds of other aspect ratios (mostly longer). So you have to design your background in a way, that the outer area does not contain important content. Then use ScaleType CENTER_CROP and your image should not be distorted (https://developer.android.com/reference/android/widget/ImageView.ScaleType)
I think the site is for (mainly launcher) icons.
If your target device's display has 1080x1920 size with xxhdpi (3x) density, just put an image of the size in the res/drawables/xxhdpi folder. No other densities are needed to be prepared. They will be re-scaled from the xxhdpi image if needed.
If you still want to prepare for those densities, first prepare the highest density. If you want to use xxxhdpi (4x), you should start with xxxhdpi sized image. Then scale it down to xxhdpi (3x), xhdpi (2x), hdpi (1.5x) and mdpi (1x).
xxxhdpi (4x): 100%
xxhdpi (3x): 75%
xhdpi (2x): 50%
hdpi (1.5x): 37.5%
mdpi (1x): 25%
Support different pixel densities: Provide alternative bitmaps
I'm making an android App that shows images at full screen.
I learned some about dpi and dp, but I didn't find how many pixel must be the largest side of my images (in prospective to good fit also in landscape mode) to appear good in different devices.
As in the documentation, the most used screen configurations are normal with hdpi, xhdpi and xxhdpi density:
So, if my thinking is correct, I can make only one image to fit the xxhdpi to works fine also with the other two densities, and put it in Android Studio under the "res/drawable" folder (without qualifier).
Specifying the image size in dp in the layout, Android should scale the image for the smaller configurations.
But, for the xxhdpi, how many pixel must be the largest side of my image, in pixel, to show good?
Edit: how many pixel must be the longest side of my image to be showed properly in a device with xxhdpi density without the image appearing grainy?
All images are photo, not icons, so I can't use the vector graphics.
By looking at the Android Documentation. One can estimate the size of the picture. look at below picture
So, your image resolution should be in similar resolution
LDPI: 200 X 320px
MDPI: 320 X 480px
HDPI: 480 X 800px
XHDPI: 720 X 1280px
XXHDPI: 960 X 1600px
XXXHDPI: 1440 x 2560px
A little bit of +/- won't affect the outcome because with these standard sizes the aspect ratio of any portrait picture should be respected.
Well, if you put the image which fits the xxxhdpi inside the folder drawable, then it will fit all the screens.
But there is another way to use only one image instead of using multiple images for different resolutions. It's by using svg images which are vector images that will not be affected by zoom in or zoom out.
To use svg you need to follow these instructions:
Make the icon to be icon.svg
In the Android Studio, right click on drawable folder
Choose New -> Vector Asset
Choose Local File (SVG, PSD)
Choose your svg file
Click Next and choose the name
Click Finish
In the app build.gradle add the following inside android block:
vectorDrawables {
useSupportLibrary true
}
In the xml layout file, add the following:
<AppCompatImageView
android:width="wrap_content"
android:height="wrap_content"
app:srcCompat="#drawable/your_svg_file"
/>
Android have ratios defined for a image to set in all different drawables
Android icons require five separate sizes for different screen pixel densities. Icons for lower resolution are created automatically from the baseline.
mdpi: 160 dpi 1×
hdpi: 240 dpi 1.5×
xhdpi: 320 dpi 2×
xxhdpi: 480 dpi 3×
xxxhdpi:640 dpi 4×
Above size is for normal pixel icons. There are fix android size for Action bar, Dialog & Tab icons, Launcher icons & Notification icons
Check this link for more details http://iconhandbook.co.uk/reference/chart/android/
You have to take a look at the current market of smartphones.
Here you can see the screen sizes and resolutions of the most popular devices in the market.
http://screensiz.es/
Order the list in pixel per inch and you will see that top smartphones have resolutions bigger than 500 ppi or another way to see it, much bigger than 72ppi of your images.
If you have enough space to store or mechanism to download images try to test with full quality. If thats too much try to find a compromise. Lower image quality and see the result in high resolution screen.
Note that you didn't posted here the total size of image, in case is bigger than screen size, take a look at total size of image and compress it to fit your needs, maintaining as much as possible the resolution.
Edit: Looking only to size of image in pixels, the current biggest screen in smartphone is 2560 x 1440 pixels, so you wont need any image bigger than this.
If I understand your answer correctly, you are talking about images (pictures of lovely cats and dogs?) and not about icons?
I prefer putting images into the nodpi folder.
nodpi Resources for all densities. These are density-independent
resources. The system does not scale resources tagged with this
qualifier, regardless of the current screen's density.
Afterwards I would create a fullscreen ImageView and let imageView do the scaling if needed
most resources have pointed out that when we using (ldpi, mdpi,hdpi, xhdpi,xxhdpi,xxxhdpi), the android doesn't need to rescale image and we won't have cpu overhead for rescaling image.
but i didn't got that point yet, suppose i have an icon image with all size that already mentioned (36px, 48px, 72px, 96px, 144px and 192px), well, in bellow code you see i use 40dp that it doesn't match any above sizes, so android would rescale the image again, then what is advantage if multiple drawable?
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android: src="#drawable/icon"
/>
You'll often not have an image with an exact Pixel match for the DPs you describe in the layout -- like the case you describe above. When this happens Android will still need to do some scaling.
The benefit isn't CPU savings, its Memory savings.
Scaling operations on large images can require a great deal of memory, especially if scaling from small to large, or large to small.
If you're starting with an image that is close and only need to scale a little, the memory cost is less significant.
If an image is w500px, h500px, that is 250000 pixels. Even if that image is a jpg and compressed to be 10kb on the disk, scaling requires Android to convert to RGB or ARGB which is 3 or 4 bytes per pixel.
4 bytes x 250000 = 1M of memory.
500px on a device that is XXXHDPI is only about 1 inch on the screen.
So you can see how this can add up quickly.
EDIT: This might be useful https://developer.android.com/topic/performance/graphics/load-bitmap.html
Contrary to what Aaron says, the benefit of providing these images is not about system resources, it is about how your app will look to users on different devices. By providing high-resolution copies of the same image, users on high-resolution devices will see crisp, clear images instead of upscaled fuzzy images.
Your question mentions specific pixel dimensions for an image. I assume these values are taken from https://developer.android.com/guide/practices/screens_support.html
36x36 (0.75x) for low-density
48x48 (1.0x baseline) for medium-density
72x72 (1.5x) for high-density
96x96 (2.0x) for extra-high-density
144x144 (3.0x) for extra-extra-high-density
192x192 (4.0x) for extra-extra-extra-high-density
When you provide all of these different resolutions for your image, you are not providing different physical sizes. Of course 144x144 is three times larger than 48x48, but this 144x144 image will not appear three times larger when the user sees it on their device.
The system will only choose to display the 144x144 image when the user has a device with a high-resolution screen. This means the individual pixels in their display will be smaller, which means the 144x144 image will take up the same physical space as the 48x48 would on a lower-resolution screen.
In short: all of the images in this example are 48dp x 48dp.
Now, if you display this image in an ImageView that is 40dp x 40dp, the image will either be cropped or scaled down. But this has nothing to do with the extra images you've provided. Whether on a very low-resolution screen or a very high-resolution screen, the system will still be stuffing a 48x48 image into a 40x40 container.
Update
Here's an example. I've used Android Studio's New -> Image Asset menu to create an image. You can see that AS generates multiple copies of the same image with different dimensions:
Next, I create two emulators:
Nexus S (hdpi): http://www.gsmarena.com/samsung_google_nexus_s-3620.php
Nexus 5 (xxhdpi): http://www.gsmarena.com/lg_nexus_5-5705.php
And then I run an app that just displays my image on both of them:
You can see that the status bars, action bars, and the little android all appear the same size. But the Nexus S is displaying the hdpi image (48px x 48px) while the Nexus 5 is displaying the xxhdpi image (96px x 96px). Both look sharp!
Finally, I delete all copies of my image except for the mdpi one. Now both emulators use the mdpi image, but you can see that they still display at the same size. The image's intrinsic size is 32dp x 32dp, so even though both emulators are using a 32px x 32px image, both have to scale it up (the Nexus S has to scale it 1.5x and the Nexus 5 has to scale it 3x).
As you can see, the little android is the same size, but it looks much worse. This is why you provide copies of the same image at different resolutions: so that your images always appear crisp!
For my app I need several small icons. I put them at a size of 15dp * 15dp in the layout xml file. The problem is that they do not look good on the device. If I look at the standard android Icons, e.g. for refresh, they look very sharp.
What I did was, I created a 15*15 pixel image with Gimp and tried to use it. I guess that is not a good approach since 15dp != 15 px, right? What is the usual workflow for creating nice, good looking icons, even if they need to be small?
Density-independent pixels (i.e. dip or dp in XML) are designed to provide a more consistent visual appearance across devices by scaling the UI to look roughly the same size on each device. This is not the exact same as physical size scaling, but rather the pixel density (dpi) of the screen. There are basically four buckets any device can fall into (ldpi, mdpi, hdpi, xhdpi). The dp unit is modeled after mdpi, and all other buckets are scale factors from there. In other words, 15dp does equal 15px on an mdpi device, but not on others.
What you need to do for optimum performance is to create your icon in four sizes, and place them in corresponding drawable/ directories. For instance, with your 15dp icon you should have:
A 12x12px image in a res/drawable-ldpi folder (LDPI is 75% of MDPI)
A 15x15px image in a res/drawable-mdpi folder (MDPI is the base)
A 23x23px image in a res/drawable-hdpi folder (HDPI is 150% of MDPI)
A 30x30px image in a res/drawable-xhdpi folder (XHDPI is 200% of MDPI)
The application will grab the proper asset to match the resolution of the device you are running on. If you do not create an asset for each level, the application will take the closest match and scale it up or down (You are probably using an HDPI device to test and your 15px image was getting scaled up to 23px, causing pixelation).
HTH!
According to this page, dp is a unit of scale-independent pixels: 160dp always makes 1 inch on your screen. This should answer your question whether pixel is dp or not: It is only the case with a screen supporting 160dpi. This is a lot more than e.g. the usual PC screens these days (96 dpi).
Should be a simple one.
When I pull image.getDrawable().getIntrinsicWidth() I get a value larger than the source image width. It's X coordinate is returning 2880 instead of 1920 which is 1.5 times too big?
I wondered wether the ImageView having a scaleType of "center" effected it but, according to the documentation:
"Center the image in the view, but perform no scaling."
Here is the source:
<ImageView
android:id="#+id/backgroundImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/background"
android:scaleType="center"/>
You said the drawable is from your /res folder. Which folder is it in?
/res/drawable
/res/drawable-mdpi
/res/drawable-hdpi
etc..
And what is the density of the device you are testing on? Is it a Nexus S with general density of 240dpi? Because if your source drawable is located in the drawable-mdpi folder and you are testing on a 240dpi device, then the Android system will automatically scale the drawable up by a factor of 1.5 so that the physical size will be consistent with the baseline device density at 160dpi.
When you call getIntrinsicWidth() what is returned is the size the drawable wants to be after Android scales the drawable. You'll notice that 2880 = 1920 * 1.5
If you placed the drawable in /res/drawable the Android system treats those drawables as meant for mdpi devices, thus the upscaling in your Nexus S. If this was meant for hdpi screens and you do not want this to upscale then try placing it in drawable-hdpi
Have you tried to multiply height and width by density:
getResources().getDisplayMetrics().density
Is your drawable in ressources or download from the web? If it is downloaded, you have to give it the density:
DisplayMetrics metrics = new DisplayMetrics();
getContext().getWindowManager().getDefaultDisplay().getMetrics(metrics);
Resources r = new Resources(getContext().getAssets(), metrics, null);
BitmapDrawable bmd = new BitmapDrawable(r, bitmap);
Check if it is returning the value of it's displayed size, which is not it's actual size. For example, a 50x320px banner ad on a traditional 800x480 phone displays as 75x480.
Should be able to compare against density (or your eyes!) to see what it is doing.
This is probably going to be nothing to with the issue you're having, but just for kicks I'll suggest it to be sure anyway: Are you specifying android:minSdkVersion in your manifest?
Only reason I mention this is because for a while I wasn't doing so in a project, and I learned that this screws the screen density up and caused all sorts of strange problems.