I have an icon image at 800x800, it's a circle (transparent corners). I used that tool to create all the different resolutions for me into mipmap folders. I can't understand why the rest of the apps on my phone appear to have bigger icons if I followed the guidelines.
EDIT: I think it's the tool that gets rid of at least 10% of my icon and makes it smaller, which is quite annoying but does anyone have another tool that does the same effects to icons? Making it appear folded like Google Calendar for example...?
Also, the dp unit grid section of this document confuses me even more - "Android expects product icons to be provided at 48dp..." We have to then scale it? What does this mean? It sounds a bit like 9patch.
Anyway, here's how my icon looks compared to other apps.
and my app icon (from xhdpi folder at 96x96):
EDIT: I had my phone's DPI changed from the CM settings from 320 to 300. However I tried changing back to 320 and restarting phone and reinstalling the app. It was still smaller than others.
Related
I'm quite new to Android development, and this time, not a programming question on SO, but rather a question about image design on Android.
I'm a bit lost in the densities of the devices.
The goal of my application is to support as much as possible devices.
Now, I own a Nexus 5 device, of which I know that it's a xxhdpi screen with a resolution of 1920 x 1080.
Since it's an xxhdpi device, the scaling factor is 3, so for simplicity, I divide it by 3 which given me the following resolution on mdpi and on mdpi 1px is equal to 1dp.
Therefore, my Android device is 360 x 640dp.
So, I create a new document in InkScape or Illustrator, whatever you want and create my design based on that particular resolution.
Now, I know that on my device the navigation bar is 48dp and the and the status bar is 25dp, which gives me a content area of 360 x 567 dp.
I've found the information about the screens here: http://www.emirweb.com/ScreenDeviceStatistics.php
What I see on this page is that other devices have another status bar height, another action bar height and that the DP's doesn't equal accross various devices.
So, the question is, how can I design a screen of which I'm sure that it will support all the available screens on the market?
Kind regards
Read this carefully
Supporting multiple screens
Edit :
Create designs for phones of hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi densities and test them on emulator.
Extend designs for 7" tablet and test them on emulator.
Move on to 10" tablets.
Use available online tools to test your design on a variety of screens and create specific folders using "New Size Qualifiers" as mentioned in the doc above to support those devices in which you don't see your design properly
Use Android Asset Studio to scale your icons for different screen densities. For backgrounds, create 9-patch version of your images from the same tool. They will also be generated for different screen densities
I think there's no need to care about the height of the ActionBar's height and all. If you put the images of multiple resolution in the respective drawable folders that's enough. e.g. Same image with different resolutions has to be put in drawable-hdpi, drawable-mdpi, drawable-xhdpi etc. That's all you need to do. Android will automatically choose the image from these folder according to device's screen resolution.
I agree #geekoraul that you'll need to read Supporting Multiple Screens first to give you that foundation.
The take away from it is that dp are Android's way of defining a predictable metric to bridge across multiple device densities. The main goal is to scale them correctly so that it still looks consistent.
A basic workflow would be, select a target density (usually hdpi/xhdpi), create your assets, and use tools to create appropriate resources for the other densities.
Some tools are,
Zeplin - You can create you UI and all assets/resources will be generated for you (dimensions, colours, spacing, drawables etc.)
Android Asset Studio - Generates assets like icons, themes and styles
Say, I have an ImageView with both sizes set to wrap_content, and it has some image: android:src="#drawable/xyz".
If this image appears only in xxxhdpi folder, then everything is fine. However, if it appears in any of the other drawable directories (xxhdpi, xhdpi, hdpi, mdpi, or even sw320dp), then it doesn't use the image from xxxhdpi and, as a result, the image is blurred. (it's not easy to notice, but I can notice this and I don't think QHD displays make any sense if their full resolution is not used)
Is it possible to solve this issue without resorting to multiple APKs?
More precisely, this is LG D856 phone (dual SIM), with Android 4.4.2.
update
This is weird, but if I create project in Android Studio instead of this tool for coding for Android in Scala, then there's no such issue…
update 2
APK file: http://dropbox.com/s/lqdj9w7iimh2gj9/magicgoose-example-debug.apk?dl=0
Source code: http://dropbox.com/s/cs4pngpkvkoe5q2/dpi-example-src.zip?dl=0
Source can be built using SBT (scala build tool)
I'm using this plugin: https://github.com/pfn/android-sdk-plugin
read here:
http://developer.android.com/design/style/iconography.html
Provide an xxx-high-density launcher icon
Some devices scale-up the launcher icon by as much as 25%. For
example, if your highest density launcher icon image is already
extra-extra-high density, the scaling process will make it appear less
crisp. So you should provide a higher density launcher icon in the
drawable-xxxhdpi directory, which the system uses instead of scaling
up a smaller version of the icon.
Note: the drawable-xxxhdpi qualifier is necessary only to provide a
launcher icon that can appear larger than usual on an xxhdpi device.
You do not need to provide xxxhdpi assets for all your app's images.
I know for some cases you really wish it used the xxx but what I understand for this text is: "Android only uses xxx for the launcher icon and nothing more." So I believe you'll have to find some work around (e.g. set a bigger PNG and scale it down on the ImageView, or mipmaps) until Android as a platform uses the triple X everywhere.
The problem was in that the plugin did set target API level to 1 by default. When I set it explicitly to 21, the problem is gone.
Alright now this problem might sound funny but I am not here for jokes. However, I use eclipse for android developement, the problem is that whenever i place my icons in the res/drawables
and run the application in emulator the images in the icons become blurry, this is with out the nine patch. However , when i change the icons to nine patch and then place them, the icons become more blurry i dont understand why. Now you see the best part is that the icons dont appear blurry in an android mobile phone(ldpi screen), i suppose the same will go for the others hdpi and mdpi. Why is this happening ? Is there a problem in the transparency ?Are there some changes need to be done in the xml file? Answers , Tips , advices required please .
:)
What is the screen density for the emulator? If you are using small images, when you put them in resources they probably become blurry when they get scaled up.
It may be possible that the density of the emulator is low due to which your images' size get increased and they get faded. try to align the image size and density according to the density of emulator or device. I solved my problem with this.
I am going to develop an android app, but unlike my previous apps, this time I have to tell someone what graphics and assets I require even before starting the development. The designer has designed all the screens, and now looking at those screens I have to tell him what resources(in what sizes and densities), fonts, icons etc I require.
Does there exist a checklist, which cleanly lists all the required graphics(for different sizes and densities), and assets including those graphics which are required only at the time of app publishing.
I work in a company where I have to tell designers as well. So despite any hard mapped check list, it always helps if you make the designer understand a bit on how the Android works.
Don't forget that color codes, XML drawables (borders, gradients) and 9-patch are way more efficient than static PNGs.
Then I make him do everything just for the Galaxy Nexus on XHDPI and only after the whole development is complete that I ask for the other resized assets (because assets tend to change throughout the project and then I don't have to be updating all of them).
Despite what is on the mock-ups is just a few more assets:
launcher icon,
high-res launcher (512 x 512)
promotional graphs (180w x 120h)
feature graphic (1024 x 500)
the other you'll use registering on Google Play is the screen shots which you can get from the real app, after it's complete.
The previous answers totally answers this question but I just wanted to add something to Budius. I know I am not suppose to reply to other answers but as a Designer I think I should point something out.
Budius said "make him do everything just for the Galaxy Nexus on XHDPI". I would suggest having him make everything on MDPI as MDPI is the current baseline. Reasoning behind this is that in no matter what program used, ex: Photoshop, it is much more cleaner to scale up than to scale down. Scaling down sometimes results in weird artefacts and require adjustments where as scaling up usually results in a perfect scale.
I developed and application and uploaded all the images in the respective drawable folders (different pixels for different desnities).
Now I am confused when it comes to layout. If I used the layout editor with 4.1 inc (thats considered Med screen I guess?) everything looks great.
Now when I use the editor with 10.1 inch which is the tablet, then I see icons very small and the text is small. I have not run the emulator yet.
So I am wondering:
1- why would the text be small although I didn't specify text size? Shouldnt scalle appropriately? or should I give it a specific size for bigger layouts?
2- Why the icons are small given that I provided the different drawables? I thought it would scale up accordingly.
Please don't give me the supporting multiple screens link in android as an answer, as I already went through it and still no luck with above. I need your personal advice as I think I am missing something here
Thank you so much in advance
Android support for different screens is a little tricky. That's because you can have large, small, medium and xlarge screens, plus high, medium and low density ones. There are a dozen possibilities (xlarge low density, small high density) and not a single resolution is defined. So you must know the principles which the API is designed upon and must define your layout thinking about the role the widget has inside your UI. You also must bear in mind that your layout won't be pixel perfect on 100% of devices, so your aim should be being usable on all possible devices.
In your specific case it seems that either you don't manage to specify the correct resources, or the system doesn't pick up the right ones for you, but I must remark that it doesn't make sense on Android to talk about big, small and scale: you should design your layout with a (good) webdeveloper mindset, who daily deals with tons of different displays, resolutions, physical sizes and even devices.
I also suggest not using the graphical builder if you are new to Android, because you really need to know how Android lays out components, otherwise you will come back to SO very often :)
If you do not specify the text size in your layout file Android will take the default value, which is most likely in DIP (density independent pixel) therefore it will be the same physical size on any devices. That should explain why the text looks so small on your 10 inch tablet.
What I would do in this case is have 3 layouts for each activities and specify the text size for larger devices (given you already like the look on phones) and put them in this folder scheme :
res/layout/layout.xml // phones
res/layout-sw600dp/layout.xml // 7” tablets
res/layout-sw720dp/layout.xml // 10” tablets
Information above was taken in this article. I have this applied in my current personal project and so far it works like a charm.
Secondly, as far as icons go, I'm no drawable expert but if you provided the same file in each folder (like I think you did from what I understand in your question), it will not make it scale. You'll have to create 4 difference icons, one for each possible pixel density.
Information about icon sizes can be found on this page.
Hope this is of some help to you.
My experience with the Android device zoo drew me to the sad conclusion that the built-in screen size/layout facility is useless. Cases in point, straight from support:
a 10 inch tablet with Android 2.2. Screen size xlarge is not supported by Android 2.2
Kindle Fire, which is 7 inch and claims it's xlarge.
I ended up putting all three layouts (med/large/xlarge) into layout, loading one based on run-time density and resolution, and providing an option for user to force a specific layout.
Just sayin'.