Hey!
I’m trying to create a professional looking cross platform app (compatible with at least android and Iphone’s). I am using google icons (to put in a tabBar and a couple other places) and it actually comes with android hdpi, xhpdpi, etc…, iphone’s _2x and _3x, and a web _1x, _2x. How should I go about implementing it to use this and maybe implement dynamic selection/sizing?
Since this is cross platform, you kinda have to forget about “android this” or “iphone” that until you get to the part about where the apps have to differ platform wise.
You’re either going to build an app that looks the same on all devices or you’re going to build one where tablets with their larger screens show more of your app than on phones. This is the first decision you need to make. Typically games need to look the same on all devices. Business type apps on the other hand are more likely to have different layouts on a tablet than on a phone.
Regardless, if you start assuming you have a width of 320 content points (not pixels because different devices have different pixel densities) for a portrait app (320 points in height for a landscape app). Then if you choose “letterbox” as the scaling type (best for games) or “adaptive” (good for business apps), then you have a good starting point.
In most tabBar’s, the buttons themselves are 50 points high out of your content area. Their width is determined by the number of buttons, but usually won’t get under 50 points wide. Your graphic for the button should not completely fill the area. Your 1x version of the button graphics may be in the 36-40 pixel size (on older devices a content point = a pixel). Your @2x images would be in the 72-80 range, @3x would be 108-120 in size and so on. Generally if you’re going to use “letterbox”, you will want the normal image, an @2x version and an @4x version. If you’re doing “adaptive”, you would want the normal size, @2x and @3x.
If your content area is gong to be roughly 320 x 480 in your config.lua (most phones will be 320 x 570, iPads will be 360x480) build your graphics to fit that screen size.
Rob
Since this is cross platform, you kinda have to forget about “android this” or “iphone” that until you get to the part about where the apps have to differ platform wise.
You’re either going to build an app that looks the same on all devices or you’re going to build one where tablets with their larger screens show more of your app than on phones. This is the first decision you need to make. Typically games need to look the same on all devices. Business type apps on the other hand are more likely to have different layouts on a tablet than on a phone.
Regardless, if you start assuming you have a width of 320 content points (not pixels because different devices have different pixel densities) for a portrait app (320 points in height for a landscape app). Then if you choose “letterbox” as the scaling type (best for games) or “adaptive” (good for business apps), then you have a good starting point.
In most tabBar’s, the buttons themselves are 50 points high out of your content area. Their width is determined by the number of buttons, but usually won’t get under 50 points wide. Your graphic for the button should not completely fill the area. Your 1x version of the button graphics may be in the 36-40 pixel size (on older devices a content point = a pixel). Your @2x images would be in the 72-80 range, @3x would be 108-120 in size and so on. Generally if you’re going to use “letterbox”, you will want the normal image, an @2x version and an @4x version. If you’re doing “adaptive”, you would want the normal size, @2x and @3x.
If your content area is gong to be roughly 320 x 480 in your config.lua (most phones will be 320 x 570, iPads will be 360x480) build your graphics to fit that screen size.
Rob