I read a lot about supporting multiple screens problems in Android, but I didn't solve mines yet. If I understood well, there are at least 2 ways to show images on different screens and to make it look normal. First, to make many images (xhdpi, hdpi, mdpi, ldpi). Second, is to create layouts(big, medium, small and etc.) My question is: which method is better? Now, my problem. I took first method, create my image in different sizes and copied to folders according to image's size. I used DEVS BITMAP app to get size, which I want my image to look like for different screens. I'm getting perfect view when I look on the 7' screen, but the view gets terrible on 3' screen. I copied this code to my Manifest:
<supports-screens
android:anyDensity="true"
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:xlargeScreens="true" />
I think it isn't necessary, but I wanted to be sure I am doing everything good. Could anyone answer my question and solve my problem? I would appreciate your help! ;)
Create a new Project.
There is a layout folder ,values-sw600dp,values-dw720dp-land. In both these folders, there is a dimens.xml file. What is written in it is this :-
<resources>
<!--
Customize dimensions originally defined in res/values/dimens.xml (such as
screen margins) for sw720dp devices (`e.g. 10" tablets)` in landscape here.
-->
<dimen name="activity_horizontal_margin">128dp</dimen>
That mean folders with sw-720 dp are for 10 inch devices, similar 600dp are for 7 inch devices and default layout folders vary from 3 to 5 inch device.
layout-sw600dp -> This folder will have xml in PORTRAIL Orientation for 7 inch devices
layout-sw600dp-land -> This folder will have xml in LANDSCAPE Orientation for 7 inch devices. When you rotate your device, view will be formed from this folder
Based on the dpi/resoulution of your devices, you can create unlimited number of layout folders.
Similarly, there are folders for images called drawable ->hdpi ldpi mdpi xhdpi xxhdpi. Based on the resolution of devices, images are picked from their respective category.
xxhdpi will contain images with the highest resolution. So try to download big resolution images and downsize them and put them in the other folders.
Now how to know which device will take which image ? See the image below :-
See the drop down. It contains a list of devices with their resolutions and image type -hdpi ldpi mdpi xhdpi xxhdpi. Moreover, you can GOOGLE for the devices and their resolutions and dpi's.
So whatever app you are making for a device, choose that device and look at its resolution and see whether it is hdpi or ldpi etc. Accordingly, put the images and layouts.
This is my understanding. I create my layouts with this understanding. I hope you got a clear picture
For Multiple Screen Support
Add Different size of images to
drawable-ldpi/
drawable-mdpi/
drawable-hdpi/
drawable-xhdpi/
drawable-xxhdpi/
Suppose you have Imageview in layout folder
<ImageView
android:layout_width="#dimen/horizontal_len"
android:layout_height="#dimen/vertical_len" />
Do the following values
values/dimens.xml (Normal mobile)
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="horizontal_len">16dp</dimen>
<dimen name="vertical_len">16dp</dimen>
values-large/dimens.xml (7 inch)
<dimen name="horizontal_len">20dp</dimen>
<dimen name="vertical_len">20dp</dimen>
values-xlarge/dimens. xml (10 inch)
<dimen name="horizontal_len">22dp</dimen>
<dimen name="vertical_len">22dp</dimen>
So you have to try like this.
Related
I have been trying to understand why these two devices even though having same screen size and pixel density behave differently.
Please Note: The Font size and Display size are set to "Default" on both the devices.
EDIT 1: I have created the following folders in the layout folder.
layout-hdpi
layout-xhdpi
layout-xxhdpi
layout-xxxhdpi
Each folder has the activity's layout with the dimension and image size fixed. My point is, if the two mobiles are using xxhdpi layouts or the Google Pixel is using xxxhdpi and Google Pixel 2 is using xxhdpi?
I think it depends on DPI of your phone. Two phones may have different dpi. You can change dpi if phone is rooted. I dont know if stock supports.
Please Note: The Font size and Display size are set to "Default" on both the devices.
No , You have to using dimens.xml for different devices of android for Example see Below structure :
res/values/dimens.xml
res/values-small/dimens.xml
res/values-normal/dimens.xml
res/values-large/dimens.xml
res/values-xlarge/dimens.xml
dimens.xml file contains
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="text_size">18sp</dimen>
</resources>
In Textview add this
android:textSize="#dimen/text_size"
This is my first time working with multiple screens. I want to build my application for multiple screens i.e from sw320dp to sw720dp. I have created the following layout folders.
res/layout-sw320dp
res/layout-sw360dp
res/layout-sw480dp
res/layout-sw600dp
res/layout-sw720dp
I have copied all the xml files inside these folders. Is there anything else I need to add to make sure all the layouts support multiple screens. I have gone through the android documentation but I am not clear with the manifest.xml part. If anyone implemented multiple screen support in their application, so please do provide a description and implementation of the same.
Step 1 -You have to create different values folder for Different values for different screens.
Go to Your Project / app / src / main / res.
Right click on res and create different values folder in it.
Step - 2. Create folders named
values-large
values-small
values-sw320dp
values-sw320dp-hdpi
values-sw320dp-xhdpi
values-sw320dp-xxhdpi
values-sw480dp
values-sw600dp
values-sw720dp
Step - 3. Create dimensions.xml file in values folders.
Different values for different screen size.
values-ldpi 2.7" 240*320 ldpi
values-ldpi 3.3" 240*400 ldpi
values-ldpi 3.4" 240*432 ldpi
values-mdpi 3.2" 320*480 mdpi
values-hdpi 4.0" 480*800 hdpi
values-hdpi 3.7" 480*854 hdpi
values-xhdpi 4.7" 1280*720 xhdpi
values-xhdpi 4.65" 720*1280 xhdpi
values-sw480dp 5.1" 480*800 mdpi
values-sw480dp 5.4" 480*854 mdpi
values-sw600dp 7.0" tablet 1024*600 mdpi
values-sw720dp 10.1" tablet 1280*800 mdpi
when you attach dimension.xml file with your layout than you will get direct effect with your screen size.
This will help you to set dimensions for all type of screens.
There is a difference between supporting multiple screen sizes and creating different layout.xml files for each screen size.
In all the apps I've ever worked on, there were really only three different kinds of screens we cared about: small phones (years-old devices that our users weren't upgrading), "regular" phones (e.g. modern-day Samsung or LG phones etc), and tablets. Even considering those three kinds of screens, we often didn't need to create more than a single layout.xml file for a single screen.
If you have just one layout.xml file, it will display itself on any screen size. To "support" multiple screen sizes, you just need to make sure that your content looks good on short phones and tall phones, on wide phones and narrow phones, on phones and tablets, etc. This generally comes down to using dimensions like match_parent, or layout_weight to fill available space, etc.
It is only when you actually need to change what elements are on screen (as opposed to how big elements are) that you need to create extra layout.xml files. For instance, perhaps you know that a certain set of text + images just won't fit on smaller phones. Then you can create one res/layout/layout.xml that has only the text, and another res/layout-sw360dp/layout.xml that has the text + the image. Or maybe you have some content that you want to display side-by-side on a tablet, but you only want part of it on phones. Then you can make one res/layout/layout.xml with the normal content and one res/layout-sw600dp/layout.xml with the tablet-only content.
Regardless, when you decide that you do want to make multiple versions of a layout for different screen sizes, the only thing you have to do is create copies of your layout.xml in different layout-swXXXdp folders. Don't bother with layout-large unless your app supports really old API levels; the swXXXdp method is much more accurate and solves the same problem (but was only added in API 13).
Hey you dont need to do anything in manifest.
You have done the part with layouts.
Next you can do is to add support in drawable folder i.e. different density images for different sizes.
And if different screens require different values(dimentions etc) you need to create multiple file in values.
I was working on android app based on phone. However, recently the app need to support the tablet.
The design was based on 1920 * 1080, I put all images/ icons into the xxhdpi folder and for lower resolution I just let android to help me rescale it.
The problem is , it works well on phone(1280 * 800 5"), but when I use tablet to check it (say , galaxy tab 2 which resolution is only 1280 * 800 10.1" and 1024 * 600) but it looks like very blur . How to fix it ? Thanks for helping.
Added
<supports-screens
android:resizeable="true"
android:smallScreens="true"
android:largeScreens="true"
android:xlargeScreens="true"
android:normalScreens="true"
android:anyDensity="true"/>
already but still the same
Update: I also find that the dp is too small for the tablet
<style name="AppBaseTheme" parent="#style/Theme.AppCompat.Light">
<!-- API 11 theme customizations can go here. -->
<item name="android:actionBarSize">60dp</item>
</style>
I was using a custom actionBarSize , it works nice on phone, but the 60dp is too small for tablet, how can I fix it as well? Thanks
Well, I don't think you following the guidelines when you're using images. The android documentation doesn't say anything about screen resolutions when dealing with images, it rather focuses on pixel density when referring image resources (usually drawables) which is explained here. Remember that you can have two types of images (as far as I know):
Image resources (usually drawables)
Image assets
When using drawables you have to focus on pixel density rather than screen resolution because as you have just found out a small (or regular) screen device can have exactly the same resolution as a large screen device, to top it off, sometimes a normal screen device (handset) can have a higher resolution than a large screen device (tablet) where obviously in this case the handset has a much higher pixel density. So, you need to follow their guidelines take a medium pixel density (mdpi) device as the baseline to design your image resources as follows...taking a 96px image as an example...
for a medium density device (mdpi) provide an image with 96px in the drawable folder...this is your baseline
then, target a high pixel density(hdpi) device by multiplying your baseline image by 1.5...that is, 96x1.5 = 144px...place this image inside the drawable-hdpi folder with exactly the same name
a x-large pixel density device image would be the baseline image multiplied by 2 (96x2=192px). This goes inside the drawable-xhdpi folder
for an xx-large picel density (xxhdpi) device multiply the baseline image by 3 (96x3=288) and place it inside the drawable-xxhdpi folder
Notice in the link provided that you don't need to provide an image for a device with a low pixel density since Android scales it down from mdpi without any problems...
Note: Android also supports low-density (LDPI) screens, but you normally don't need to create custom assets at this size because Android effectively down-scales your HDPI assets by 1/2 to match the expected size.
In your case, whats happening is that your Galaxy tablet has a lower pixel density and Android down-scales the image from a xxhdpi to whatever density the tablet has (hdpi or xhdpi)....so, it your image is a 512px image Android would down-scale it to 341px for xhdpi or 256px for an hdpi device.
If you follow these guidelines and focus on pixel density, you should be fine. However, for images in the assets folder there's no much you can do apart from using the ScaleType enum or using stretchable 9-patch images
Hope this helps
Update
Actually, according to this link, the Galaxy Tab 2 has mdpi screen, which means your image will be scale down three times from xxhdpi. You should provide the same images with different sizes inside the appropriate drawable-x folders
I know its a way too late but recently I faced the same issue about the way app launcher icons looks on a tablet and they are blurry. I'm sure that AOS honestly chooses mdpi drawables for tablets with mdpi display density and thats the problem. So I solved this by placing smartphones icons to a tablet resources dirs as following (left column - usual smartphone drawables-density and the right - tablet dirs):
drawable-xhdpi -> drawable-large-mdpi (these are 96x96px)
drawable-xxhdpi -> drawable-large-hdpi (these are 144x144px)
drawable-xxxhdpi -> drawable-large-xhdpi (these are 192x192px)
drawable-xxxhdpi -> drawable-xlarge (these are 192x192px)
I'm not sure if last two has to be 288x288 px but since I don't have such icons in the project I guess 192x192 should be enough.
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.
Essentially, an application should support various devices. I'm using these guides: mult.screen.supp, screen.stat.
Design for both tablets and handsets on most of the activities is similar. What i'm puzzled about is how to provide drawables for both versions knowing that their density groups provide different resolutions and hence the drawables are not substitutable.
For example, compare xlarge(tablet) - mdpi to normal(handset) - mdpi:
Normal screen, Medium density (160), mdpi: 320x480
Extra Large screen, Medium density (160), mdpi: 1280x800
So, if I create foo.png(50px x 50px) for the first group and then test the same layout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/foo" />
on the second group, which will lookup for the same image in the mdpi folder, - the image will look tiny.
I have a solution but I'm not sure whether I'm doing it right:
Create attr.xml for each Screen size configuration.
Create <item name="foo" type="drawable">#drawable/h_foo</item> in handset-resources folders, which references image with appropriate for normal(handset) - mdpi resolution h_foo, say 50x50.
Create <item name="foo" type="drawable">#drawable/t_foo</item> in tablet-resources folders, which references image with appropriate for xlarge(tablet) - mdpi resolution t_foo, say 150x150.
Could you elucidate whether this approach is fine and what are other solutions out there ?
It is better when you keep the same resource name and just use different folders to put the actual png:
drawable-mdpi -> used for normal screens
drawable-large-mdpi -> used for large screens
See providing resources for the available configuration qualifiers.
To avoid duplicates I keep all my images in the drawable-nodpi folder, and suffix the file names with a size (e.g. image-small.png, image-medium.png etc). Then I have XML definitions in the device-specific (drawable-normal-mdpi, drawable-large-mdpi) folders for each item. For example:
drawable-normal-mdpi/image.xml:
<bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="#drawable/image-medium" />
drawable-large-mdpi/image.xml:
<bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="#drawable/image-large" />
Note that I saw a comment on here from a Google engineer (can't find it now) that didn't recommend this functionality, but until someone comes up with a better solution (that is compatible with older Android versions) then I'm sticking with it.