I'm trying to develop for an android tab with the resolution of 1280x720. But when I place an image, say 1000x500, into the xml view it appears almost two times smaller. When I change its height and width from wrap_content to 1000px and 500px, it looks ok in xml, but when I launch it in the emulator, it gets very blurry, as if it would be at first scaled down and then expanded again.
Any ideas?
Thanks!
Put the drawables for tablet in the drawable-xlarge folder and the problem may dissapear.
Maybe your problems is that the most tablets have xlarge screens and mdpi screen density and you put the drawables in the hdpi folder.
For more info see this page.
Try using "dp" instead of pixels. Also place the drawable in the density specific folder. between ldpi and hdpi the size in pixels need to be twice for them to show up as of same size on the device. For example a launcher icon on ldpi device is 36 x 36px while on hdpi it is 72 x 72 px
Use same ratio to create your image in higher resolution with larger size.
Related
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
I still can't understand how images are scaled. I have this 600px x 600px image. I scaled it to different sizes (ie. to 450 x 450, 300x300 and 225x225). I did that in order for devices with different screen densities adjust the size of the image. Then I placed an imageview to a generic 1280x800 10.1" tablet, which is mdpi as stated by the ADT. It views properly on the 10.1 tablet graphical layout but seems oversized on the other devices especially on the phone category. Here is the link to image:
The layout width and height are also set to wrap_content, should I set it to a value in dp?
since, its an mdpi tablet, the resource is being picked from the drawable-mdpi folder and thus appearing that small.
Perhaps you can create a layout-mdpi-xlarge folder and then in that layout refer a copy of the image from the xhdpi folder.
I use .png as a background for a custom button that I declare in XML like this
android:background="#drawable/samplepng"
But I can't get the resolution right for tablet screens :
For example, my ressource is a 200x200 pixels .png (initially designed for iOS and retina)
I place a 100x100 px version in the drawable-mdpi folder and a 200x200 px version in the drawable-xhdpi folder.
I also need to have a layout for a typical 320x480 screen in the layout folder and another layout for 10" tablets in the layout-xlarge folder.
The size of the button is 100x100 dp in the normal layout and 200x200 dp for xlarge layout, so that it looks right.
With the Android emulator, a 10" tablet uses mdpi ressources and xlarge layout.
As a result, the button background is drawn with a scaled version of the 100x100 image which looks very blurry, as opposed to the crisp 200x200 original image.
If I don't use a mdpi ressource, it looks blurry just as well.
Am I doing something wrong ? is it only an emulator problem and it looks nice on a real device ?
Please help, I read 10 times google's doc but can't find an answer.
If you don't launch the emulator with 'Scale display to real size' checked, then it will always use mdpi drawables.
See here for more.
Your issue might be in the android version your targeting. Try switching the emulator to android 3.0 and 3.1.
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).
I know there are tons of questions on this topic, but I tried searching through tons of "android dpi" posts and read the online documentation but haven't found the exact question that I have.
If I want to create a button (or any image resource) that will take up the same space on the screen on all devices - how do I do that?
I understand that there are specific screen sizes and dpi's that Android looks at etc. but I don't quite understand how big a specific image should be to look right on any screen.
Say that I have the following setup for my drawable and layout folders (Application is only landscape):
res/drawable-ldpi/button.png (120 dpi)
res/drawable-mdpi/button.png (160 dpi)
res/drawable-hdpi/button.png (240 dpi)
res/layout-small/main.xml - button is set to 100dp
res/layout-normal/main.xml - button is set to 100dp
res/layout-large/main.xml - button is set to 100dp
Say I have a button that I want to be 100dp on any screen. Following the 3:4:6 scale ratio rule it seems that if I have a button resource that's 100px wide for the mdpi density I should make another button for the ldpi density that's 75px, and one for the hdpi density that's 150px. Is that correct? Do I create the 75px button at 120dpi, the 100px button at 160dpi and the 150px button at 240dpi and then just say android:layout_width="100dp" in all three layout files? Or do I make all three buttons 100px at the different dpi's?
Now what if I have that button 9 patched. Do I have to create the button three times at 120dpi, 160dpi and 240dpi all of which are 100px in size? Or do I just create one 9 patched button at 100px and 160dpi and place it in the mdpi drawable folder?
The online documentation is a bit confusing for me so I'm looking for a simplified answer.
This is for Android versions 1.6+ (Not the new stuff for 3.2 etc)
Thanks for your help ... I just want a button to take up the same space on a 3.7" screen as a 7" screen and not be blurry!
Did you sort this? Afaik, and from my experience, don't change the dpi when creating the images in say, Photoshop. I always left mine at standard which is 72 I think. Regardless, I don't think it matters if you set it to a million.
The px values you mentioned are correct for l m and h.
I would leave the mdpi qualifier off the folder name though; I'm unsure of the protocol if on an xhdpi device there is no drawable folder with no xhdpi qualifier and no folder without qualifiers.
Workflow:
Create your images at 75, 100 and 150.
Put 75 in ldpi folder, 100 in drawables folder with no qualifier, and 150 in hdpi.
Leave your layouts as they are now, with the 100dp. They should scale correctly. That said, I don't think you need to specify the image size if you're using the full resolution.
Comments to address inaccuracies in my answer are always welcome, even years down the line.