I'm new on android studio and planning to design an app for tablets and phones. Therefore my app will be mostly used on normal and large screens.
Which dpi is best for my vector icons ?
Should I make different dpi versions of the same icon for multiple screen support ?
Why only making the icons wrap_content doesnt support multiple screen sizes. I thought vector images doesnt get blurred when they are distorted.
The "dpi" for vector icons is meaningless. Vector icons are DPI independent. That's the whole point of them. It doesn't matter what size you design them at. It only makes a difference what size you draw (render) them at at run time. The bigger the size it is displayed at, the more pixels have to be calculated and drawn.
That's what the second paragraph in #muhammad-younas answer (which is from this Colt McAnlis blog) is trying to say.
I use InkScape for editing and save my SVG files (vector images). In theory, it scales well for any size. In theory...
In Android Studio I use New, Vector Asset, and I select the SVG file and it generates a XML file, below drawables folder, under res folder. But sometimes, without any explanation, the image was blurred in my phone (Not blurred in the Android Studio preview). It's crazy.
I've tried everything, and just one action has solved my problem:
I've decided to change XML file directly in Android Studio. I read something about width and height specs (image size) vs viewportWidth and viewportHeight (image real size in the cell phone)
So I've decided scaled up the first width and height pair
For instance, one blurred image has:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="6.415605dp"
android:height="5.33568dp"
android:viewportWidth="6.415605"
android:viewportHeight="5.33568">
....
</vector>
I've set in my head the width = 25dp, so I've made 25 / 6.415605 = 3.89675. So I've multiplied both numbers in the first pair by 3.89675. So I've got new values for width and height.
It's just a random guess. The important is to make width and height much bigger than viewport width and viewport height, preserving the proportions.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="25dp"
android:height="20.7915dp"
android:viewportWidth="6.415605"
android:viewportHeight="5.33568">
....
</vector>
It works like a charm ...
Related
how to use vector images which scale up and down according to the screen sizes?
I m using a vector image in my project but it is not scaling in big screens.
what you mean by being scaled ? maybe you are misunderstanding.
if you mean the image size would be changed in various screen sizes such thing wont happen. the image size is what you provide in your imageview (or any otherview using the image).
the only different between vector assets and normal asset is that vector asset are redrawn every time so you wont have a low quality image no matter how big it is and which device it is being shown in. so you wont need to save various size of image for various size of screens.
if you want to change the size of image just change the imageView height and width. you can use dp (density independant) unit.
you dont have to do anything for support vector images for diffrent screens its already scale for the relevant dp, Can you give more details about your problem when you say "it is not scaling in big screens?"
maybe you want the image on tablets will be bigger?
What is the applications screen size without the status bar and softkeys(in some phones)?
Like for Example i know:
320X480 trimmed down to 320X455 which is the basesize.
but what about others , i have done many calculations and a lot of searches online to figure out a defined size for other screen but i seems can't, Also While applying the formula *.75 ldpi, *1.5 hdpi, *2.25 xhdpi to get other screen, it doesn't add up.
Like 320X480 is mdpi to get the hdpi do *1.5 and you will get 480X720 which is not the situation for devices out their ! and using this method my application images where stretched, this method is according to the Google documentation, i'm confused as hell.
I have tried to et sizes using the emulator also it was very different! for height.
So if the problem is with height only, i'm thinking creating background as patterns and then work only on the width of the screen size and re-size every other elements to screen width only like 240px, 320px, 480px, 720px and also consider the size of them to fit minimum height.
I believe it's not possible to define a height for android which will go like generic because of the variety of android devices.
So what do you think about this approach to use background as pattern and forget about every device on earth height ?
you can use tile pattern, create a small texture and then make it tileable drawable in xml, so it will be tiled across screen, or the second might be using 9-patch images, in that way you can select which area of the image scale and which area to not scale, so they will be scaled according to that way.
I'd like to ask about one of the hardest thing for me (as a programmer) in android. As I make software mostly without designer (to be honest - totally without a designer) I can't figure out the following:
When I draw a png I use px (not dp) as image width.
I drew a button image with the following sizes:
hdpi: 318x45
mdpi: 212x30
(6 to 4 ratio)
and I would like my button be 80% width of Galaxy s2 which is
Screen Size in Pixels: 480 Pixel x 800 Pixel Screen Size in dp: 352dp
x 587dp
But also I would like to have the same width (80%) for hdpi 10' tablet. Is it possible or I'm missing something?
And is it possible to make 80% but not more than XXX pixel width?
You just need to provide different size images for different screen sizes and densities. When you think about it there's only a few different formats you need to worry about. You will then just create an "80%" size image for each of those formats, place them in the seperate drawable folders, and use them accordingly.
The android docs on supporting multiplce screen size and providing alternative resources are actually pretty comprehensive on how to do this.
Otherwise I'm sorry you don't have a designer. My tip - make your icons originally in Adobe Illustrator if you have it that way you can easily scale them to whatever size you need. As vector images they won't lose quality so you can change the size all you want. When you're ready, just export for web and devices at the size break points and you should be fine.
You have to use the android:layout_weight attribute.
Details outlined in a similar question here
If I were to get an art asset made intended for use as the background of an ActionBar, what size (in pixels) should I request? Everything I have found referencing the size of an ActionBar has been in dp, so I'm unsure what would be the best absolute size to go with for the actual .png file. Thanks!
The action bar can be 40, 48, or 56 dp in height depending on configuration. This means that because of how Android scales things by density there are 9 different absolute pixel heights. The width varies depending on the device, of course.
Your best bet is to use 9-patch drawables or create the drawable using a shape XML so that it can adapt to the nearly infinite number of configurations of devices.
I have discovered the main idea of how to deal with regular PNG for Android.
Let's say I have created in my computer an icon the size of 60*120px. I know that for hdpi (800*480px) I need to divide it by 1.5 in order to get the right dp - so it will be 40*80dp.
so far so good - but - what happens when I need to define a 9-Patch so it won't get "pixelized". the problem is that all 9-patch files in my android looks all pixelized - I am sure it is because there is no definition in the file to "squeeze it" by 1.5 in order for it to display the 9.PNG well.
What am I missing? What do I need to do to achieve the right dp for a file that basically has a fluid height and width?
well you need to have 2 seperate icons for hdpi and mdpi for example. i usually have them laid out in a hdpi photoshop file and extract them from there (one png as hdpi and one as mdpi by scaling the hdpi one -preferably scale a vector graphic rather than a regular image by 1/3 from the hdpi graphic.) and also this way i almost never have to input my width and height restrictions to the image inside a layout because it looks exactly like in photoshop's layout. i just set it to wrap content. as far as making .9's you just need to do the same process as a regular png but define via the draw9patch tool an area that will be scaled in case the .9 needs to be rescaled.
just see how the button for example is made.
You have a 9 that has the normal height of the button but just defined an area which can be scaled(the middle of the button) in case the button is stretched by height or width which means the middle will get scaled but since its a color not an image it doesn't destort the look, however the edges of the button always stay the same and never get stretched no matter how big the button gets.