Android Tutorial B4A on Kindle Fire & Amazon App Store Tutorial

* * * B4A on the Kindle Fire Device * * *

This tutorial is being written to help notify/guide B4A users of known issues that have been found using B4A with the kindle fire device and some possible work arounds. There have been many questions about using B4A on the kindle fire and we hope to clear up some of the confusion there has been about this device.

First off it seems that most all issues are with the display and scaling for this device. Their forked version of Android Gingerbread has some strange things that you would not expect to see. A PDF file will be posted as soon as it is completed.

 

[margret]

B4A on the Kindle Fire PDF Tutorial

Hello,

Attached to this post is the Kindle Fire PDF tutorial. We know this is not everything that may be found or that may be an issue on the kindle fire. If you find errors or can provide any new information please post the information and this PDF will be updated to contain this additional information.

B4A-kindlefire.pdf

Thanks,

Margret

 

[JonPM]

Thanks! Looking forward to reading this

Sent from my DROIDX

 

[JonPM]

Awesome tutorial! This will prove to be very useful. Thanks for the contribution.

 

[Erel]

Thank you very much! I've updated the link to point to this server. If you need to update the file just send me an email.

 

[Kevin]

More info...

I had given up on the Fire when Amazon stopped communicating with me but recently someone asked why my app isn't available on the Fire and long story short, he agreed to do some testing for me.

Just to add to the very nice tutorial from Margret, here is some more info for those who are interested.

The tutorial mentions the actual screen dimensions (activity size) when taking into account the soft menus at the bottom, but the dimensions given are for full screen apps.

Full screen (taking into account the Fire's soft menu buttons at the bottom) as mentioned in the tutorial
Portrait: 1004h X 600w
Landscape: 580h X 1024w

NOT full screen (Fire's notification bar at the top is always visible and the app does NOT have a title bar visible)
Portrait: 924h X 600w
Landscape: 500h X 1024w

In the case of my app (no title bar but the notification bar is visible because it is not full screen), initially the Fire reported its height as 984. After rotating to landscape and back, it then showed the height as 924. If your app displays a title bar, then that will make the height even smaller. Off hand I don't know how many pixels high the title bar is.


As already mentioned in the tutorial, the Fire does report an incorrect height on first run which can cause problems especially when layouts are tweaked in code based on the activity height and width.

Using the phone library (add to your project if it is not already added), you can determine whether or not the app is running on a Kindle Fire and if so, you can hard-code the activity height and width rather than reading the Activity.Height since it will be wrong on first run. Below is a message box I added to my app for the person to test:

Sub Activity_Create(FirstTime AsBoolean)
  dim p as Phone
  Msgbox ("Manufacturer: " & p.Manufacturer & CRLF & "Model: " & p.Model & CRLF & "Product: " & p.Product & CRLF & CRLF & "Activity Height = " & Activity.Height & CRLF & "Activity Width = " & Activity.Width, "Kindle Fire Test")
End Sub

The results of this is:

Manufacturer: Amazon
Model: Kindle Fire
Product: blaze

Note that the lower-case b in blaze is not a typo. Above in bold is what is returned by the code provided.

I plan to detect the Fire and use a hard-coded height value when tweaking my layouts. Since I won't be using Activity.Height and Activity.Width to determine the screen dimensions, I will compare those two as well to see which is bigger (in order to determine orientation) but will use hard-coded numbers for actual layout adjustments.

I just figured I'd pass this information along with the hope that it may help others.

 

[Kevin]

Margret:

The Amazon guide states that 20 pix are reserved for the soft menu at the bottom. Comparing your screen shots to the ones my tester sent me, his look different and are clearly taller (possibly 40-60 pix tall). Is the soft menu usually shortened to 20 and that is all we need to account for? If so, then expanding the soft menu would then make it larger and therefore hide elements of our app that are at the bottom of the activity. Or does it try to push it away?

I guess my question is: Is it common for the app's GUI to go all the way down to the top of the collapsed soft menu bar and then get partially hidden when the user expands it, or should we always cut our app height to allow for the soft menu to be expanded and still never cover part of our app at the bottom? If you know what I mean. seems like the latter would leave a blank area between the bottom of our activity and the top of the collapsed soft menu.

If I've confused you just let me know and I'll try to rephrase it. Sometimes I ramble on so much that the main point I had gets lost...

I thought about asking my tester these things but he is only helping as an offer to give me feedback on obvious problems, and I don't know that he would notice this or care.

Thanks again for your guide.

Kevin

 

[margret]

Hello Kevin,

If you set the Activity to Full Screen, the softmenu will close to the 20 pix. This is automatic. It works like the menu button, opens when you touch the menu button and closes when you touch anything else. If you don't set it to full screen, the softmenu is always open and WILL NOT CLOSE. Amazon seems to prefer you run your app full screen. Hope this answers your question.

Margret

 

[Kevin]

Yes, that answers the question. For my particular app, I don't want it to be full screen and there is no title bar, so I'll stick with the dimensions that I noted above which should be correct for my situation.

Thanks again.

 

[Osi]

Thank you for the thread Helpful information for us Kindle Fire developers indeed.

 

[nfordbscndrd]

Thanks Margret and Kevin. It looks like Amazon is trying to sell more Kindles by forcing developers to each buy one.

1. I have a large app with over 100 views onscreen at any time. If I adjust for just the issues you have mentioned, does it seem likely that my app will work on the Fire, or do I really need to have a Fire to test on?

2. Regarding the button height issue: Is the 10-pixel difference constant or proportional? That is, if I have a button which is 80 pixels high, is the Fire going to show it as 70 (80 - 10) or 60 (80 * 30/40)?

3. When you say "This makes it a little more difficult to modify your code for the kindle fire device as each object acts different," do you mean that every different type of view may have a different sizing discrepancy or does this issue just affect Buttons and EditTexts?

4. I assumed at first that the incorrect reported screen dimensions in the PDF came from GetDeviceLayoutvalues but Kevin mentions Activity.Height being wrong. Are both of them wrong and by the same amount?

5. Regarding the start-up problem where the bottom of the screen is clipped off: I wonder if this could be a case of the OS not finishing the drawing of the views. I've seen that particular problem and use Invalidate to force the redraw, such as:

For i = 1 To 2
    SomePanel.Invalidate
    DoEvents
Next

Thanks again.

 

[margret]

1..I believe that is right. I can't say I have used every view possible but have used most and the Buttons & EditText seem to be the ones with the issues.

2..It seems to be 10pix each time. I have made buttons 40pix high and 100pix high and they are both off by 10pix.

3..I believe just Buttons and EditTexts.

4..Activity.Height & Width both return the wrong info on first run.

5..I don't think so, Once a panel is displayed, I can move it's position up with code and the rest shows up, I can again move it down with code and it covers the panel at the bottom. I think it is in their OS menu system.

 

[nfordbscndrd]

1..I believe that is right. I can't say I have used every view possible but have used most and the Buttons & EditText seem to be the ones with the issues.

2..It seems to be 10pix each time. I have made buttons 40pix high and 100pix high and they are both off by 10pix.

3..I believe just Buttons and EditTexts.

4..Activity.Height & Width both return the wrong info on first run.

5..I don't think so, Once a panel is displayed, I can move it's position up with code and the rest shows up, I can again move it down with code and it covers the panel at the bottom. I think it is in their OS menu system.

Thanks for the response.

So on #1: do I really need a Fire to test on or should I be okay just making your suggested adjustments?

#4: Does GetDeviceLayoutvalues also report wrong values?

 

[margret]

I will do a little testing in the next few days and will post what I find.

 

[nfordbscndrd]

Here is a screen shot of my app on an Archos A70:

The same screen made by Margret on her Kindle Fire:

Pretty much everything shrunk, not just buttons:

The A70 is a 7" 800x480x160 tablet and the Kindle Fire has a 7" 1024x600x160 screen. The fact that they are both 160dpi tablets is why Android didn't resize views to fit the Fire, but I have a lot of code in my app which is supposed to make those adjustments based on activity.width and .height, which we all know is off on the Fire.

Given these differences, it's hard to see how a few adjustments are going to let apps with any kind of layout complexity run on a Fire without a layout designed on the Fire itself, so I have ordered the Fire.

It could be that I could have programmed around it, but I didn't want to chance missing the $139 price on the Fire while trying.

 

[nfordbscndrd]

After the failure of my spades game code to adjust its layout to look right on the Fire, I went about creating a layout of 1024x580 for the Fire which is not adjusted by code in any way after loading into the app.

I used Dim p As Phone: If p.Model = "Kindle Fire" Then... as shown by Kevin in this thread to detect if the device is the fire and if so, then I load the Fire layout.

Following are some screen shots of the layout taken by Margret on her Fire. They seem to not have any of the issues shown in her pdf file. However, because the layout is for 1024x580 instead of x600, the fact that 20 pixels is cut off at the bottom by the Fire is not apparent.

The problem is that Margret has noted that the 20-pixel clip problem is not consistent and may clip at the top instead of the bottom. All I can do is hope that for my app, it keeps clipping the bottom and/or that Amazon will come up with a fix.

I had ordered the Fire at Amazon's sale price of $139 but since I already have a 7" tablet and the layout seems to be working, I figure on returning it when it arrives.

 

[margret]

I just saw the above post of your images I sent you. After reading your text I went back to test your app. Those screen shots were from your app started from the carousel or the home screen of the kindle fire. I then loaded your app from the apps panel. The bottom of the screen and cards are cut off and the issue I posted does show on your app. I will post the screen shots of that. I don't believe this is a b4a issue but an os issue on the kindle fire. I have put four of the apps I have written on the kindle and they all show this error. I don't have any apps written in another language to test at this time. I believe this issue will happen with any app in any language if started from the app panel.

Margret

 

[nfordbscndrd]

Hmmm. I interested to see those screen shots. Even if the bottom is cut off, I'm surprised that it cut off the bottom of the cards since I left the bottom 20 pixels of the screen black and the cards don't go down that far.

If cutting off the bottom of the cards is the only problem, I can live that since that is just a relatively minor cosmetic issue. If the buttons and button text are not showing any of the issues from your Pdf, then it seems that creating a specific layout and not trying to adjust a generic one fixes everything that can be fixed.

 

[margret]

OK, as I said in the previous post I would post some images. After looking at this very close, it is the kindles fires' forked version os and an error in their menu system that is causing this issue. The first two images are one of the home screen and one of the app. As you can see the home screen has NO SOFTMENU of any kind, so starting the app from here shows no issue. See the first two screens, ss1 and ss2:

The second set of screens, ss3 & ss4, are of the apps panel and the CardShark app started from this apps panel. You can see that the apps panel has the softmenu and it's maximized. Now the app starts and the softmenu minimizes but the area above the minimized softmenu is blank and black. The softmenu minimizes but does not clear the area where the full maximized menu was and it's acting like an always on top area.

The last image, ss5, shows an overlay of the app and the app panel and you can clearly see the black/blank area is the exact same size, etc as the expanded softmenu. Only known solution is to inform customers of this issue and make sure they start your app from the home screen. I even created a panel with a timer to invalidate its' self and to redraw with a different color every second. Even with this, the panel redraws and has the new color and text but always has this area black and blanked out. I know of nothing else that can be done.

 

[nfordbscndrd]

In doing the layout specifically for the Fire, I made it 1024x580 instead of x600.
Here is an x600 emulator showing the 20-pixel black space at the bottom:

In your screen shot, repeated below, that black space is covered up by the Fire, so everything is fine.

I tried to take care of the problem of starting from the Fire's apps panel and getting the bottom clipped off even more by not putting anything critical in that space. (In my other layouts, I have a custom keyboard that appears at the bottom. I've moved it up for the Fire.) The only thing missing is the bottoms of the cards, which is just cosmetic (as seen in the 4th screen of your last post).

However, in the pdf, you said that the glitch may affect the TOP of the layout OR the bottom and/or may push some views around. Like you said, nothing we can do about that.

The problems with the button and text sizes shown in your pdf appears to still be solved by doing a Fire-specific layout (1024x580), no matter where the app is started.