GUI differences from designer when running

[starchartdals]

New here, so just learning the basics. Lots of VB6 experience, so feeling pretty much at home with B4A.

Got a couple of head bangers:

1) I created some buttons and placed them near the bottom of the screen. They all looked good in the Designer. But, when I am running the app (in full screen mode) these buttons are getting cut in half - the lower portion is not being drawn. This is the portion that gets covered up when i touch the ^ symbol to bring up the controls, but when the controls aren't showing, neither are the lower halves of those buttons.

2) I seem to have developed some sort of disconnect between the designer and the running app - All the buttons appear fine in the Designer, right where I put them. I have been trying different stuff all day, then suddenly when I run the app, all my buttons show up in a pile on top of one another - in the position where they were first located upon creation. I restarted the development environment completely, and this still happens with this test app. Even with newly created buttons.

3) I also noted that if you select Landscape orientation, it matters which way you hold the device (eiaplay can be upside down), but if you select Both, it will be rightside up either way. Is this a bug?

 

[starchartdals]

:sign0104:

Figured out that problem #2 was due to having an extraneous variant in the designer. I deleted it, and what I saw then matched the runtime display. Not exactly sure how multiple variants are used in practice, or why the runtime would choose a different one than I was viewing, but if it hurts when you poke yourself in the eye, you just quit poking yourself in the eye!

 

[NJDude]

Care to post your project?, you can export it as a ZIP file from the designer (On the menu bar click on File -> Export as ZIP)

Without seeing the code it will be very difficult to understand the problem.

 

[starchartdals]

Problem 1 went away....

Thanks

Actually, I didn't have any code, was just playing with positioning buttons and other views on the form. Problem 1 seems to be due to having the buttons with no code behind them, and resolved itself as soon as I put some Click event code in, so I am good to go.

This is an amazingly productive tool! Can't believe how far I've gotten in just 1 day.

 

[starchartdals]

:signOops:

Looks like I still don't have problem 1 figured out.

What is happening is that when I start the app, the buttons are cut off at the bottom. I did discover that if I turn the device, and then turn it back, the screen refreshes perfectly, and the buttons show in their entirety.

If anyone wants to try it, I can upload the project as soon as I figure out how to upload to the blog....

 

[starchartdals]

How do I attach my project??

 

[stevel05]

Select File/Export As Zip from within the IDE, then when posting, scroll down a bit and find 'Manage Attachments' you can upload it there.

 

[starchartdals]

Screen not fully painted at startup

Ok, I think I uploaded it ok. Really appreciate any help with this problem.

 

[starchartdals]

Oh, I should have given a bit more info:

I'm running this on a Kindle Fire, if it matters. Start in landscape orientation. I have set the B4A settings to show my app on as much of the screen as possible - set the activity to full screen with title off in the designer, and under Project|Activity Properties (seems I needed to do it in both places).

Thanks

 

[NJDude]

What you need to do is to work with "variants" (you can search this forum for tutorials and samples), you had only one that's why you are having this problem.

Take a look at the attached project, I have created some variants to give you an idea.

 

[warwound]

Take a look at the Beginners Guide.

It has an good amount of information on layout variants.

Martin.

 

[starchartdals]

Cutoff Buttons issue, seemingly a debugger problem

Thanks stevel05 for helping me get that zip attached.

NJDude, I do not see how the varients thing helps. I understand I should use varients to support multiple devices and orientations. But at the moment, I'm simply trying to get the program to look correct on one device in one orientation. It appears as if what you did was move the buttons away from the corners of the screen where they paint fine even on my device.

I suspect that you were unable to observe the problem from my code, and I might not have described it well enough. What I am seeing is not buttons that are cutoff because they do not fit on the particular varient. What is happening is that the buttons at the bottom of the screen are 'missing' their lower halves - there is essentially a black line 'cutting off' the lower halves of the two lower buttons. They are not cut off in the designer, nor are they cutoff if I run the program outside the debugger (so this seems to just be a debugger issue). And, as I stated before, if I turn the device, then turn it back to the original orientation, they paint just fine too.

I would like to post screen caps to illustrate this problem - how is that done? I am using B4A-Bridge, which denies taking snapshots...

 

[NJDude]

The problem is that probably you are not creating the right layout size for your device, I have modified the the sample and included a couple of lines, give it a shot.

 

[starchartdals]

NJDude,

Very interesting. When I connect to my device and select the 1024 x 600 variant, the buttons are right at the corners. Next, I run it, and the buttons are no longer at the corners, but are up about 1/2 inch from the bottom now (basically, they are just above the black line I described before). OK, so now when I turn the device, then turn it back, the buttons MOVE DOWN to the corners. I guess this means that the activity.height value comes back differently after rotating the device. Any idea why?

Thanks for all the time you are spending on this!

 

[NJDude]

I can only guess without having one of those devices but it seems that "black line" is some sort of area for soft buttons.

What kind of device is that?

EDIT: Never mind, I read your posts again, it's a Kindle Fire.

I found THIS info about the Kindle Fire, if you scroll by the middle of the document you'll read this:

...
We also recommend that you test your app on your own and submit an update if you discover any problems. It is possible to configure a standard Android emulator to simulate the Kindle Fire device platform. You should configure your emulator with the following characteristics:

*Width: 600px
*Height: 1024px
Abstracted LCD Density: 169
Target: Android 2.3.4 - API Level 10
RAM: 512 MB

*Note: The device will reserve 20px to display a soft key menu, making the effective portrait resolution 1004px high x 600px wide and the effective landscape resolution 580px high x 1024px wide.

 

[Kevin]

I've been working on adding new variants and one of them is for the Kindle Fire. I already had another thread for variants in general (something that is driving me crazy), but I wanted to comment on something I saw here.

OK, so now when I turn the device, then turn it back, the buttons MOVE DOWN to the corners. I guess this means that the activity.height value comes back differently after rotating the device. Any idea why?

I don't know if there is a bug in Android or possibly B4A, but I ran into similar issues (at least I think they are). I am trying to add landscape support to my app and ran into a similar problem. When my app runs, it adjusts the TOP of a label to be Activity.Height - Label.Height. This places it at the very bottom of the screen, and all works well. However, I noticed that after rotating the device, Activity.Height doesn't seem to initially take into account the phone's notification bar at the top of the device and thus thinks the activity height is that much higher. After a moment or two, the phone's notification bar reappears at which time my entire layout shifts down, thus effectively hiding the label at the bottom.

I am at work right now so I can't check, but I know I somehow came up with a work-around for this, but it probably isn't bullet-proof. I would have posted it as a possible bug but I was having some major issues (this was one of them) and at the same time, my cable internet quit working due to a Comcast problem, so I had no way of trying to get help. :BangHead:

This isn't Fire-specific though... it was happening in the emulator as well as on my EVO 4G.

 

[starchartdals]

Hi Kevin,

I know it's been a couple of weeks, was wondering if you found your work around which you mentioned?

I still have the issue, but have discovered that it only hapens when debugging. When I am off the debugger and start the application, it is perfect. So, when I am debugging, I either ignore the missing half of the lower buttons, or turn the device and turn it back, in which case it paints the lower part of the screen properly. Again, I suspect this is a debugger issue, not a device issue.

 

[Kevin]

Hi Kevin,

I know it's been a couple of weeks, was wondering if you found your work around which you mentioned?

I still have the issue, but have discovered that it only hapens when debugging. When I am off the debugger and start the application, it is perfect. So, when I am debugging, I either ignore the missing half of the lower buttons, or turn the device and turn it back, in which case it paints the lower part of the screen properly. Again, I suspect this is a debugger issue, not a device issue.

I think my problem was different (it happened whether debugging or not; emulator or real device). As far as the workaround that I had come up with, in hindsight I think it was mere luck that it seemed to work. I don't remember the details but what I was doing would not have worked in every case (I was comparing LayoutVal height to Activity height).

But more importantly, I figured out the actual problem in my case:

http://www.b4x.com/forum/basic4andr...110-activity-height-100-y-problem-rotate.html