I am developing an app for a school project and I'm already done making it. All that is left to do is to optimize the app for different screens. Through the development, I've been testing the app on one device only - Samsung Galaxy Nexus (my phone).
Every layout element that I made in photoshop was originally created for my phone, so the app looks best when it is run on Samsung Galaxy Nexus. So I did some research and stumbled upon this website. My phone (Samsung Galaxy Nexus) had xhdpi density, so my logic tells me that the layout elements that I have made are xhdpi, but I was keeping them in manually made "drawable" folder. Drawable-hdpi, drawable-xhdpi etc. folders were empty all the time.
Now I used this tool to create all the layout elements for other densities. I then deleted the drawable folder and put layout elements in all four density folders:
drawable-hdpi
drawable-ldpi
drawable-mdpi
drawable-xhdpi
So drawable-xhdpi now contains the original layout elements and the rest of the folders contain the newly made layout elements. However, now when I run the app on my phone the layout is destroyed --> everything looks a lot smaller. So I guess that my phone loads the layout elements from somewhere else than drawable-xhdpi. Why is that? Is the website wrong and my phone isn't xhdpi after all or did I do something wrong?
When you had them in the base drawable
folder, the system assumed they were actually mdpi resources and scaled them up to twice as large. So, now that you have the same images in drawable-xhdpi
, it's not scaling them.
Basically, you need to scale your images up to 2x, then run them through the tool again. You may need to prettify them a bit before using the tool, since scaling up is often ugly.