I am kind of confused about managing graphic resources in Android.
Tried to read this doc but It only confuses me more. Can anyone give me some example of how should I handle the following case?
Lets assume that I have an image in my layout that will be scaled to fill screen width. What image sizes (in pixels) should I produce and what configuration qualifiers (drawable-{qualifier}) should I apply to those resources to cover all major dpi and screen sizes (both for tablet and handset)?
Thanks.
If you want to have an image, that is supposed to fill the screen it is best to use 9-patch images. This way your image can automatically scale to fit the device. Because even if an image has the correct density, the actual screen size can vary. For example a smartphone and a tablet can both be hdpi, but have completely different screen sizes (and actual pixel count).
So the easiest way to target most devices, when it comes to images that are supposed to fill up the full width of the screen is to have a 9-patch image and create ldpi, mdpi, hdpi and xhdpi versions of it. This way the image will automatically be choosen depending on the density and then stretched to fit the device.
The android sdk also provides a tool that helps with creating 9-patch images http://developer.android.com/tools/help/draw9patch.html
Related
I want to add a background image to one of the screens of an Android app. (This image is a photo so 9-patch will not work).
I want scale this image for various different resolutions.
Android organises images uses DPI (i.e. ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi). However this does not seem useful in this particular situation as I want to use an image that covers the ENTIRE screen. DPI does not tell me how big the entire screen is. For example, a xxxhdpi screen may have a lower resolution than a ldpi screen.
To illustrate this issue consider the following devices:
Samsung Galaxy Tab 10: mdpi, 800px x 1280px
Moto G: xhdpi, 720px x 1280px
As you can see the first device requires a larger resolution image, despite having a lower dpi.
Therefore my question is, how do I create an image that covers the screen for different screen sizes.
You can find several answer at stackoverflow like: Android: Background Image Size (in Pixel) which Support All Devices
Another reference including tablets can be found at: Is there a list of screen resolutions for all Android based phones and tablets?
The detailed description can be found at: https://developer.android.com/guide/practices/screens_support.html
One point you need to keep in mind is how the image will cover your layout, you need to fit using center crop as scale type.
Remember to leave some space from borders at least not including important information that could be cropped from the border based on the real device size.
Another way to add backgrounds for multiple size and densities is not trying to cover the entire scree just a mix. A gradient plus some image can give you enough flexibility many times.
Another solution is using a blurred image which do not interfere with the rest of the information shown. In this case because of the nature blurred of the image, it is not required to be detailed.
Hope it helps.
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 am creating an app for different devices and I added images with different sizes in drawable-small, drawable-medium... to add the same image for different devices but I need to increase the size of the image when the size of the screen increases is this the correct way?
plus I need to increase the font size when the screen size increases how can I do that and if I used the layout-small... folders what font size will be the perfect size for the devices with small screen size (portrait and landscape) and for the medium and large..?where can I find this info as I am trying and trying different font sizes but there must be another way!!
thanks.
This is a very rookie question but here goes:
You set the text and image sized in dp (density pixels) so screen size and resolution is irrelevant.
As for making multiple drawables for each screen size is a good idea but not a necessity since you can choose how much of the screen each picture will take, but on bigger screens make sure the resolution of your images are high enough to look good.
For scaling a particular image to all screen size you can use nine patch image. There will be drawninepatch.bat file in the tools folder of your sdk. Open that , drag and drop the image , and you want to expand the image based on your needs. Now after the nine patch is created put that in the drawable folder. This image will expand accordingto the screen resolution and densities.
I have a game which displays a full screen image in the background. At the moment I have one image size (1280x800). This works well on large resolutions but on smaller screens the shrinking somewhat degrades the image. You can see jagged edges and it is noticeably worse than what you could achieve using photoshop software.
I have different image sizes, but I am unsure how to utilize them. I know there are different dpi folders, but you can have resolutions of 480x320 and 1280x768 with the same dpi so I don't think these can be of use here.
I believe you can have different layout files for different screen sizes, but the image is not drawn using xml (and in fact would not be possible for my game).
I can only think that I must create a different file name for each size. Then when choosing which image to use I could take the screen dimensions and select the correct one? I am struggling to see how I can make an image look good on both 240x320 and 1280x800 resolutions.
All of the resource qualifiers in the framework can be applied to drawables, not just the dpi designators. In other words, you could create folders like this to segment your images as well:
drawable-ldpi
drawable-xlarge
drawable-normal
drawable-sw480dp
drawable-sw720dp
Even examples like these work...
drawable-v10
drawable-land
And so on...
You can create as many or as few different qualified directories for your image assets as you think necessary to preserve the quality. The Supporting Multiple Screens article in the SDK docs helps describe most of the qualifiers that best fit scaling image assets.
HTH!