What I have In my project is a drawable folder in which I've placed all the drawables I need to resize some of them to do that I placed values folder:
values-normal-xhdpi
values-normal-mdpi
...
all the values that are in the xhdpi must be divided by 80/60=1.333
so that I get the same display for both devices...
why is it like that? when I divide it by 2 I get small buttons on the mdpi device;
and when I keep the dimensions the same I get very big buttons on the mdpi device;
Example:
in the values-normal-mdpi:
<!-- In the about the progragm activity the buttons -->
<dimen name="aboutproductimgwidth">73.5dp</dimen>
<dimen name="aboutproductimgheight">73.5dp</dimen>
<!-- the logo in the animation activity -->
<dimen name="logoimgwidth">162dp</dimen>
<dimen name="logoimgheight">162dp</dimen>
in the values-normal-xhdpi:
<!-- In the about the progragm activity the buttons -->
<dimen name="aboutproductimgwidth">98dp</dimen>
<dimen name="aboutproductimgheight">98dp</dimen>
<!-- the logo in the animation activity -->
<dimen name="logoimgwidth">216dp</dimen>
<dimen name="logoimgheight">216dp</dimen>
when I placed these values I've got the exact same display on both devices..
and that's what I need.
EDIT1
Even when I did it in another way, and that's by placing an image of 160px in the drawable-normal-xhdpi folder and another one with 80px in the drawable-normal-mdpi folder I've got different display on both devices; on the mdpi device I've got really large buttons and on the xhdpi device I've got a nice display why?!! although I did what they said I divided the image of xhdpi on 2;
EDIT2
sorry I placed some photos but can't keep them online for too much time.. but what I have in my display:
ONE DEVICE HAS A TEXT UNDER THE BUTTONS AND A TEXT ABOVE THE BUTTONS BECAUSE THE BUTTONS ARE TOO LARGE AND IN THE OTHER DEVICE I AM GETTING THE TWO TEXTS ABOVE THE BUTTONS BECAUSE THE BUTTONS ARE JUST AS BIG AS I NEED THEM TO BE.. ALTHOUGH I USED IN THE FIRST DEVICE BUTTONS 80PX BECAUSE IT'S A MDPI DEVICE AND IN THE SECOND ONE 160 PX BECAUSE IT'S XHDPI
If you did it properly, then the image in your drawables-mdpi should be 1/2 the size of the image in xhdpi.
What you're seeing on the screen is that a typical mdpi device is 320 px while a typical xhdpi is 720 px. So if you made two buttons, each 1/2 the screen size, then the xhdpi buttons should be 360px. Following "procedure" means half sized 180px buttons in mdpi. But on the mdpi screen 2 buttons would be 360px, and not fit. To get them to fit you would need to reduce them 30 px, or about 13.33%
Sounds like the screens you are looking at may not be typical screens, but the root of the problem is that you are adjusting the image size in both the drawables and in the values folders. You need to redesign your approach to handling different screen densities - pick one or the other, but probably not use both unless you have a very unusual use case.
You are having problems in setting the correct dpi of image for different drawable folders. If you want to automatically generate a image for all required sizes the please use http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html.
Here you can upload your image or use text/clip art and it will provide you with a zip containing images of all dpi.
You need to add settings for different device sizes in your AndroidManifest.xml.
You can see that settings here.
Related
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
I have a Micromax AQ5000 with Screen Resolution- 1280*720 pixels and Motorola Moto G XT1033 with resolution 720 x 1280 pixels.I have a layout folder named layout-sw360dp which I designed for devices like Samsung s4,s3,Micromax canvas etc but this Motorola device is also using the same layout and this creates the images displayed as distorted in it.
How can I create a folder for the small device(Moto g) I tried layout-xhdpi but it doesn't work how can I name layout with height and width.
Well you are right in some sense android should take layout dependent on different densities but some mobile do not fall under specific density. Therefore android will pick up default layout from layout directory.
to support multiple screen resolution provide different layout for different screen sizes, you can make following directories in res directory like this
layout-hdpi
layout-mdpi
layout-xhdpi
layout-xxhdpi
layout-w320dp-h408dp
layout-w480dp-h800dp
layout-w480dp-h854dp
layout-w720dp-h1280dp
layout-w1080dp-h1920dp
when you provide layout in all this directories you will give multiple screen support for different sizes as well
layout-w1440dp-h2560dp
Use "dip" instead they will help you in debugging your layout as they will try to keep a coherent size to multiple screen resolutions,
<ImageView
android:id="#+id/avtar_animation_11"
android:layout_width="45dip"
android:layout_height="45dip"
android:src="#drawable/avtar011"/>
while supporting multiple screen when you give "dp" to dimensions, Actually android expects you to provide different values for different screen resolution. Lets say below is your imagview dimensions make few folders in res folder in your android project like these below
values-hdpi, values-mdpi, values-ldpi, values-xhdpi, values-xxhdpi
and in them make a dimens.xml file each of them and write
<dimen name="image_view_width">28dp</dimen>
<dimen name="image_view_height">28dp</dimen>
now that i have mentioned "dp" here instead of dip android wants me to keep track for different dimensions for different screen resolution, So i will change the image_view_width and image_view_height values are in separate values folders where dimens.xml is located. Make sure your dp values change as per your screen resolution you want your view to fit in.
<ImageView
android:id="#+id/avtar_animation_11"
android:layout_width="#dimen/image_view_width"
android:layout_height="#dimen/image_view_height"
android:src="#drawable/avtar011"/>
hard part is over now android will pick one of dimens.xml values depending on which screen your app is running, Voila now your layout rocks
I'm working on an application and i've provided all the resources from ldpi to xhdpi, but some tablets use hdpi (or tvdpi in the case of the nexus 7 i'm testing on) so when i open the app on a tablet everything is small, i would like to force them to use the xhdpi resources how can i do that?
I don't want to create separate files just for the tablets or the size of the app would increase, the xhdpi resources would work fine
On the phones everything is displaying properly, the tablets are the problem because they take small resolution assets for their big screens, so the actual size in inch( 4cm, measured with a ruler) is correct, but they actually look small making the overall design incorrect
Usually, downscaling is the best option (as opposed to up-scaling).
If your images don't degrade or loose information when they are downscaled, put the 2x version of your images in the res/drawable-xhdpi folder. Android will scale these images down appropriately on lower density devices.
E.g. if you put a 64x64 pixel jpg/png in res/drawable-xhdpi, Android will show it as a 32x32 pixel on mdpi devices, as a 48x48 pixel image on hdpi devices and as a 64x64 pixel image on xhdpi devices.
If downscaling your images would deteriorate your them (e.g. you have 1 pixel lines in your image that would disappear when scaled down), then the only option is to add the variations of your images in the drawable-mdpi, drawable-hdpi, etc. directories.
Update after comments:
You'd want to have your images appear larger on larger screens (not on higher density screens). You could do this by still putting your images in the drawable-xhdpi folder only, but then do this:
E.g. you'll have this layout in res/layout with an ImageView that shows one of your images:
res/drawable-xhdpi/one_of_my_images.png
res/layout/somelayout.xml
....
<ImageView
android:layout_height="#dimen/image_height"
android:layout_width="#dimen/image_width"
android:src="#drawable/one_of_my_images"
android:scaleType="fitCenter"
....
/>
res/values/dimens.xml
....
<dimen name="image_height">100dip</dimen>
<dimen name="image_width">150dip</dimen>
....
res/values-large/dimens.xml
....
<dimen name="image_height">150dip</dimen>
<dimen name="image_width">225dip</dimen>
....
res/values-xlarge/dimens.xml
....
<dimen name="image_height">200dip</dimen>
<dimen name="image_width">300dip</dimen>
....
As you can see, the larger the screen, the larger (in dip and therefore in inches) the image.
You can experiment with different values for image_height and image_width in dimens.xml in res/values-xlarge-hdpi, res/values-xlarge-xhdpi, etc and see what looks best.
Update 2 after comments:
If you want your own 'custom' scheme of loading the appropriate resource, put them id res/drawable-nodpi:
E.g
res/drawable-nodpi/one_of_my_images_normal.png
res/drawable-nodpi/one_of_my_images_large.png
res/drawable-nodpi/one_of_my_images_xlarge.png
Then put in the appropriate drawable dir (res/drawable/, res/drawable-large, /res/drawable-sw360dp/, etc, whatever you can come up with) an xml file that indirectly references the correct resource from the nodpi directory:E.g.
res/drawable-xlarge-mdpi/my_images.xml
<resources>
....
<item type="drawable" name="one_of_my_images">#drawable/one_of_my_images_large</item>
....
</resources>
This means that for extra-large mdpi screens, Android will load the 'one_of_my_image_large.png' from the drawable-nodpi directory.
I am developing for android and my code runs perfect on nexus or any 3.7 inch device.
If I run it on tablet (7 or 10.1 inch) then the fonts and buttons are very small and the spacing is way too big.
If I run it on 2.7 QVGA then the buttons are too big and overlap.
I am using dp and sp all over the layout so I am surprised it didn't adjust according to different screen size/density.
Does that mean that I have to wrte the same XML layout in 3 layout folders (large, medium and small) and put my drawable in 3 different density folders?
Or am I amissing something here. Yes I read the "Supporting multiple screen" document and it just loses me with the details (but I did follow the tips of using dp and sp). I am looking for more of a summary/general approach answer.
dp and sp adjusts according to screen density. Therefore, a screen with 500 dpi and 4000 dpi but with the same SCREEN DIMENTIONS will looks the same.
If they have different screen sizes, it won't fit as you want. If you want to support multiple screen sizes, you'd have to use weights or percentages.
The key is that dp = device independent pixel and it only adjusts according to density, not screen size.
In the most cases if you don't make a tablet app, you don't need to make more than one XML layout for different densities/sizes. All you must do is define dimensions with DP and SP as you said.
But is necessary to provide different images in the drawable folder to show one or other in function on screen size/density.
If you put all images in drawable folder (without specify hdi,ldi or mdi) Android will try to adjust the images but not always works fine.
Hope it helps.
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.