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.
Related
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 ...
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?
I am using the "Icon Pack Drawable Importer" plugin which I think is probably importing the icons from "https://design.google.com/icons". Each icon has many sizes (18dp, 24, 36, 48...) and for each size, there are multiple DPIs (mdpi ~ xxxhdpi) for it.
This is a little bit confusing, because as far as I know on Windows, you just define multiple resolutions of the same icon, and the system will automatically choose the closest resolution (best) version for the actual drawing size.
Suppose I want to display two arrows in two different sizes on the same device. Suppose I only added one arrow icon whose size is 48dp but has 5 different DPI versions in it. If I specified the final drawable size programmatically, does Android select the closest one? For example, mdpi version for the small arrow and the xxxhdpi version for the large arrow? Or does Android select one version that matches the system's DPI and resize and use it for the two arrows?
I want to let users choose the icon size for them (some may want big, some may want small), but adding multiple size versions of one icon which itself has DPI versions seems a little bit complex. So, I thought of adding the biggest size only (48dp version, but it has 5 DPI versions in it) and specifying smaller resolution programmatically if the user wants smaller icon, because upscaling would make an icon blurry but downscaling would not. Is that a bad idea, and should I add multiple sizes and multiple DPIs of the same icon to the resources?
If your screen is mdpi, all your drawables will be loaded first from res/drawable-mdpi directory, then, if the file is not found, from res/drawable directory. So if you resize 24x24 mdpi icon programmatically to 64x64 pixels, you will get degraded picture quality, Android will not load xxdpi icon for you instead.
If you set all your icon sizes in a programmatic way, simply select the highest-resolution icons and dump them all into res/drawable directory.
Icons in res/drawable-mdpi still has the advantage that they use less memory and don't need to be mipmapped, however modern phones can resize all graphics, with smoothing and mipmapping applied, in hardware.
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 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.