Kindle Fire config settings to deal with 20px Menu bar

What do I need to do to get my app working properly on the Kindle Fire. The only issue I have is that my display images are partially obscured by the 20px menu bar that the Kindle Fire forces on us.

I tried changing the values in my config.lua to use:

if ( system.getInfo("model") == "Kindle Fire" ) then  
 application =   
 {  
 content =   
 {   
 width = 580, -- was 600  
 height = 1024,  
 scale = "letterbox",  
 }  
 }  
end  

This just tells the Corona SDK that I want to use 580 instead of 600, but it doesn’t stop Corona from stretching everything to fill the screen.

What do we need to do to only use 580 pixels? I am guessing we just don’t scale our full screen images to 600x1024, but instead scale them to 580x1024. But this approach also means that I have to change EVERYPLACE in my app where I use Center reference and change it to use Top alignment instead.

Ideally the viewableContentHeight or viewableContentWidth would take this into account, but it doesn’t.

This seems like a huge hack for all developers that we shouldn’t have to deal with because Corona should know the available display area is 20px less than the physical screen size.

Since Corona doesn’t take care of this for us, I guess we have to hack our code. So to anyone who has already released a Kindle Fire product what approach did you take to minimize the code changes and still restrict drawing to what we should actually use. [import]uid: 16734 topic_id: 19317 reply_id: 319317[/import]

You can get the height of the top statusbar via the following property in Lua…
display.statusBarHeight

See the following API documentation…
http://developer.anscamobile.com/reference/index/displaystatusbarheight

That said, we do not have an API for fetching the height of the bottom navigation bar. So, for the bottom bar, your only option is to provide more space at the bottom for all devices or identify that the device is a Kindle Fire and hardcode some padding at the bottom to compensate for the bottom bar.

Having the statusbars overlay the Corona view is actually by design in order to match the behavior on iOS. This is necessary since most Corona developers develop their apps for iOS first and feature parity is important. The intent of the viewableContentWidth/Height was if your content bounds exceeds the screen width and height, these 2 properties would tell you how much of the content bounds is on the screen, including the parts that are behind the status bars and other overlays. This was by design, although I can understand the confusion. [import]uid: 32256 topic_id: 19317 reply_id: 74737[/import]

@KenRogoway

And anyone else with a Kindle Fire, I did something a bit similar to what you posted above; but i am using “zoomStretch”. Here is my code for my config.lua file; it seems to have worked quite nicely. The only thing is that now ALL Amazon downloads will have the 20px “blank” spot at the bottom of the screen; but for now I am willing to live with it to get the App submitted/released.

Note: My current App only runs in landscape; so have not tested the portrait view yet.

[code]-- config.lua

application =
{
content =
{
width = 793, -->> Dynamically creates the extra blank for the 20px Soft-Button for Kindle Fire.
–width = 768, -->> For All other Devices as of 1.14.2011
height = 1024,
fps = 60,
scale = “zoomStretch” – zoom to screen dimensions (may add extra space at top or sides)

},
}[/code] [import]uid: 16527 topic_id: 19317 reply_id: 80110[/import]

@Rob Haney,

I was able to handle this just for the Kindle Fire with the following in my config.lua:

[lua]elseif ( sysModel == “Kindle Fire” ) then
application =
{
content =
{
width = 600,
height = 1024,
scale = “letterbox”,
fps = 60,
}
}[/lua]

Then in my main.lua I added this:

[lua]-- gWS is my global world state to use in other modules
gWS = {}
gWS.nContentWidth = display.contentWidth
gWS.nContentHeight = display.contentHeight
gWS.nContentCenterX = display.contentCenterX
gWS.nContentCenterY = display.contentCenterY

if ( system.getInfo(“model”) == “Kindle Fire” ) then
gWS.nContentHeight = display.contentHeight-20
gWS.nContentCenterY = display.contentCenterY-10
end[/lua]

Then anywhere in my code where I would have used either display.contentHeight or display.contentCenterY I use my global values instead.

This leaves 20 pixels at the bottom the screen for the Kindle Fire menu, and doesn’t affect other Android devices.

Hope that helps. [import]uid: 16734 topic_id: 19317 reply_id: 80112[/import]

Very Nice Ken!

Thanks for the support, much appreciated.

Rob
[import]uid: 16527 topic_id: 19317 reply_id: 80125[/import]

I have a slightly different approach that I wrote about here:
http://developer.anscamobile.com/forum/2012/01/16/taming-fire-static-20-pixel-menu-bar-fix [import]uid: 70847 topic_id: 19317 reply_id: 80359[/import]