Android, concerning the User Interface design - android

the more I read the Supporting Multiple Screens guide, the more I get confused.
if the layout folder's qualifier is based on size (small, normal, large and xlarge) and the drawable folder's qualifier is based on density (ldpi, mdpi,hdpi and xhdpi),
then how can I specify the size of the drawables/images??
should all the images inside the drawable folders have the same size (based on the normal screen size) but different densities (i.e. pic.png inside drawable.ldpi has the same width and height of pic.png inside drawable.mdpi but has different density)??
the problem is that each screen size may include the three densities (i.e. a large screen may be ldpi,mdpi or hdpi).
.how can I be designing the images on size basis and on density basis on the same time??
thank you.

36x36 for low-density
48x48 for medium-density
72x72 for high-density
96x96 for extra high-density
http://developer.android.com/guide/practices/ui_guidelines/icon_design.html
hope this helps.

In general you'll want the smallest pictures in ldpi, middle ones in mdpi, and larger in hdpi etc...
Even though it is technically possible for a device to have a "large" screen and an "ldpi" density manufactures have tended to stick to making devices with big screens be higher density as well.
EDIT:
The images only need to be designed with density in mind. Because if you take the same 100x100 pixel image and show it at 3 different densities it will appear largest (to human eyes) on the smallest density. So to account for that you make 3 images, lets say one 80x80, one 100x100, and one 120x120. Now if you show those 3 images across 3 densities the size that object appears to be to your eyes will be much closer than before.
the large, medium, small etc... qualifiers that you can add to the layout folders are not so much about any image resources themselves, but rather structuring the View components on the given page so as to make best use of the space available.
For instance, if your application has a list of items to choose from in it. On a tablet (large or xlarge) screen it may look nicer and be more effecient to have two or more columns of items displayed in your list on the screen. Whereas on a handset there may not be enough width (in portrait mode) to fit more than 1 column in. So to handle this situation you'd put a layout xml file inside the layout-normal folder that has a single column ListView. Then put another layout xml file in the layout-large folder that uses a GridView so that it can have an additional column
This image will show you roughly which folder the system will pull your images and/ or layout xml files from given the screen size and density.:
All of your image resources go in the drawable folders which are qualified with the densities. (ldpi, mdpi, hdpi etc)
The layout folders are what get qualified with the screen size (small, normal, large etc) The layout folders will contain xml layout files only, no images.

Related

How to make our layout adapt with our screen devices in android?

i've finished my layout for medium screen (5 inch i think), but i've trouble for adapting my drawable, button, and text for large and xlarge screen. How can i adapt them ? Please tell me step by step, because i feel very difficult for following many resource that i've got from many different resource and person. Thank you.
Firstly i strongly recommended you to go through the android developer docs for How to support multiple screen in Android and Supporting Different Screen Sizes
Coming to your question, For Different screen size, The following is a list of resource directories in an application that provides different layout designs for different screen sizes and different bitmap drawables for small, medium, high, and extra high density screens. you could use different size of the layout files in res folder and also vary for drawable images based on the density..
res/layout/my_layout.xml // layout for normal screen size ("default")
res/layout-small/my_layout.xml // layout for small screen size
res/layout-large/my_layout.xml // layout for large screen size
res/layout-xlarge/my_layout.xml // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation
You can use the following resource folders to create layouts for devices with larger screens : (for api level greater than 3.1 - mentioned here)
layout-sw320dp
layout-sw480dp
layout-sw600dp
layout-sw720dp
Your resource structure will be like this in your project
Coming to the conclusion of my answer, For supporting the multiple screen support there are different different ways is there, you need to find the better one among them.
Here is some approaches what you can try it !!
Instead of different layout folders try to create a different values folders in your project and place the dimens.xml folders in it and place all your dimension values there. here is my answer
Create the layout folder like mentioned in above answer and keep the
respective xml files in such folders. It automatically takes from
the respective folders for respective devices( ex; it will load the
xml resources form layout-sw<600> folder for a 7'inch tablet) here you can get this approach
Programatically differentiate your layout files for different set of
devices (bit of difficult approach,but works) here is link
You have to change the size of the image for different screen sizes. Android takes the image automatically depending on screen size.
The size of image for
ldpi is 36px * 36px
mdpi is 48px * 48px
hdpi is 72px * 72px
xhdpi is 96px * 96px
xxhdpi is 144px * 144px
You can get different sized images using online tools. Place proper images in different folders it will work fine.
Check this link for more information:
http://developer.android.com/guide/practices/screens_support.html

Android different screen size and different densities [duplicate]

This question already has answers here:
Android screen size HDPI, LDPI, MDPI [duplicate]
(4 answers)
Closed 9 years ago.
I have to manage different screen sizes and different densities in my Android app.
I am not getting directory structure properly.
What I understand so far is there are four types of screen sizes:
small
normal
large
xlarge
and different densities as well:
ldpi
mdpi
hdpi
xhdpi
Now each device size (small , normal , large and xlarge) shall map against each density. Because every size can have different density, right?
If yes, then we can say small screen have all the density i.e ( ldpi , mdpi , hdpi , xhdpi)
same for normal, large and xlarge.
The point is how I'll manage them in my drawable directories.
Will there be four folders for small screen size with different size (drawable-small-ldpi, drawable-small-mdpi, drawable-small-hdpi, drawable-small-xhdpi)?
And same for other screen sizes as well.
If not then how I'll manage all the image in ( drawable-ldpi , drawable-mdpi , drawable-hdpi , drawable-xhdpi) folder because different screen size I'll have different size of images. Then how can a small device with different density and large device with a different size be manageable in same density folder.
Please don't give me reference of any Android document as I read all that stuff.
If any one can't get my point, then please let me know. I'm very confused.
When I have started development in Android, I was confused about same issue.But now I have figured it out and I'm doing pretty well.
Anyways, You are absolutely right.you can provide different images by 4 folders for each.i.e.: drawable-small-ldpi, drawable-small-mdpi, drawable-small-hdpi, drawable-small-xhdpi
But it is just waste of your time.because you don't need to worry this much about it.Android can scale up/scale down according to the device configuration.so just provide extra images for those devices only if you don't get desired outputs for them.
As far as I know, supporting multiple devices, you have to consider few general criteria in your mind.
Density qualifiers: ldpi,mdpi,hdpi,xhdpi,etc are generally used when you want to provide different resolution images.
Size qualifiers + Orientation qualifiers: small,normal,large,xlarge,sw600dp,normal-land,normal-port,etc are generally used when you want to provide different layout designs.
i.e.: single pane layout,multi-pane layout,different elements in layouts according to different screen sizes.
For reference: Download the example app from here and try to understand how it is being supported for multiple screens.
I hope it will be helpful !!
Here are official docs for you to read about the subject: Supporting Multiple Screens then Supporting Different Screen Sizes
Put your all image in all different folder that is drawable-hdpi, drawable-ldpi, drawable-mdpi, drawable-xhdpi and drawable-xxhdpi. android will take care of it.
What I always do is just put all my images in one folder (usually xhdpi). The Android system will scale them for you so you don't have to worry about what to put in what folder.
Heres what Android says about this:
Provide different bitmap drawables for different screen densities
By
default, Android scales your bitmap drawables (.png, .jpg, and .gif
files) and Nine-Patch drawables (.9.png files) so that they render at
the appropriate physical size on each device. For example, if your
application provides bitmap drawables only for the baseline, medium
screen density (mdpi), then the system scales them up when on a
high-density screen, and scales them down when on a low-density
screen. This scaling can cause artifacts in the bitmaps. To ensure
your bitmaps look their best, you should include alternative versions
at different resolutions for different screen densities. The
configuration qualifiers you can use for density-specific resources
are ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high).
For example, bitmaps for high-density screens should go in
drawable-hdpi/.
You can find the documentation here:
https://developer.android.com/guide/practices/screens_support.html
Hope this helps

How sort images by resolution and density?

On this page in table 3 at the bottom it says there are small, normal, large and extra large screen for each density (ldpi, mdpi, hdpi, xhdpi): http://developer.android.com/guide/practices/screens_support.html#support
For example, if I create mdpi normal screen (320x480) and mdpi large screen (600x1024) should I put all images for both resolutions in mdpi folder? If yes, how should I name those images because those are the same images with different sizes?
should I put all images for both resolutions in mdpi folder?
Yes. The size of the images should be the same among all screen sizes, they should vary only by density.
In this case you should use drawable-mdpi and treat your layout to better use the extra space you may have in larger screens.
If you want to give images specifically for large screen mdpi then you can create a new folder drawable-large-mdpi.
Check out : http://developer.android.com/guide/practices/screens_support.html#qualifiers
What ever the screen size and resolution, same images apply for similar dpi screens. Android will automatically resize your images to fit in the screen as you defined regardless of the size and resolution but on basis of dpi.
That means you have to put same images for all same dpi layouts.
From the same link:
To use a configuration qualifier:
Create a new directory in your project's res/ directory and name it using the format: -
is the standard resource name (such as drawable or layout).
is a configuration qualifier from table 1, below, specifying the screen configuration for which these resources are to be used (such as hdpi or xlarge).
You can use more than one at a time—simply separate each qualifier with a dash.
Save the appropriate configuration-specific resources in this new directory. The resource files must be named exactly the same as the default resource files.
Search for "Using configuration qualifiers"

Background images for different screens

In my application I have a background for activity. This is an image, I am going to use fitXY for it. I am ok if it will be resized a little (keeping aspect ration is not very important) but not very much.
I am going to prepare few images with different size and for both Portrait and Landscape orientation. I am going to cover about 90% of devices.
My question is the following:
What images sizes I need for background?
What folders under "res" I should put these images?
I would like to get very specific file sizes and folder name where to put these files.
The solution should work on tablets as well.
I just used two images with maximum sizes (one portrait and one landscape). Then android resized the to smaller and it looks quite good for me.
I have one background with resolution: 800*1200 px in drawable folder
and another with resolution: 1200*800 px in drawable-land folder
This works pretty fine on tablets.
You have to create multiple resources for your app. Android has 4 resolutions (ldpi,mdpi,hdpi and xhdpi) and 4 generalized screen sizes (small, medium, large and extra large). So you have to make 4 layouts (or 3 if you don't plan on supporting tablets, since tablets come under the extra large category) to support the screen sizes.
Here's a general guide:
put layouts for small, medium, large and extra large in your res/ folder as follows:
res/layout/sample_layout.xml // default layout
res/layout-small/sample_layout.xml // layout for small screen size
res/layout-large/sample_layout.xml // layout for large screen size
res/layout-xlarge/sample_layout.xml // layout for extra large screen size
you can also use
res/layout-land/sample_layout.xml for landscape orientation for all screen sizes or you can target landscape layouts for specific screen sizes as res/layout-medium-land/sample_layout.xml
note that all the layouts have the same name.
once you have your layouts ready, you need to take care of image resolutions also
once again in your res/ folder add images like this:
res/drawable-ldpi/sample_image.png // low density
res/drawable-mdpi/sample_image.png // medium density
res/drawable-hdpi/sample_image.png // high density
res/drawable-xhdpi/sample_image.png // extra high density
once again, all the images have the same name.
general guidelines for designing images are:
ldpi is 0.75x dimensions of mdpi
hdpi is 1.5x dimensions of mdpi
xhdpi is 2x dimensinons of mdpi
generally, I design mdpi images for a 320x480 screen and then multiply the dimensions as per the above rules to get images for other resolutions.
Android will automatically select the best combination of layout and image depending on the device. For example, for a high resolution medium size device, layout-medium and high density image will be displayed to the user.
Make sure you create emulators for all these combinations and test your app thoroughly. here's the official docs for more info:
https://developer.android.com/guide/practices/screens_support.html
m/h/xh dpi are the most important. Combine that with the (most common) resolutions and you should be fine for your "90%" target.

How to make the graphic automatically adapt difference size of android phone and tablet?

I have written an android application, but I find that the graphic of app has different performance in different size of android phones. Some graphics will even become very bad in Tablet. Hence, I would like to know how to adjust the code of program so that the app can adapt difference size of android phone and tablet automatically. Thanks!
There are two important parameters which needs to taken cared when you are designing an app which
should run on multiple devices:
size(physical size of the device)
density of the device
Size: Size of a device in android is not defined as a unique physical value but as a range.
These are: small, normal, large and xlarge.
Density: Density is also defined as a range.
These are: ldpi, mdpi, hdpi and xhdpi.
For handling size you need to use have multiple layouts, one for each category of the size and you need to use different dp value for the height and width of the views for each of the layout as the sizeof a small and a large device will not be same.
For handling density you need to using different drawables for different screen densities i.e you need to place different density drawables in different drawable folders.
Eg:
These are the resolutions for a particular drawable
36x36 for low-density (placed in drawable-ldpi)
48x48 for medium-density (placed in drawable-mdpi)
72x72 for high-density (placed in drawable-hdpi)
96x96 for extra high-density (placed in drawable-xhdpi)
The ratio for this variation of the resolution is 3:4:6:8(ldpi:mdpi:hdpi:xhdpi)
For further reading you can refer to this android developer's link:
http://developer.android.com/guide/practices/screens_support.html
Use Relative Layout
Prepare Graphics for every density (ldpi, mdpi, hdpi, xhdpi)
Nine patch your graphics.
Use WaitSum in xml layout.
Waitsum is automatically set layout and views in different size density.

Categories

Resources