Working on the CTCT curriculum MyPiano app, and I'm having an issue where I can't see all of my buttons in the Designer...there are 13 total button, each set to 7%. The horizontal arrangement they are a part of is set to "fill parent". I can't see all of the buttons on the designer to reorder them. They appear fine in the Chromebook Companion, it seems to be just in the designer...any ideas?
(upload://5hT0IVWPm7CxkX0LMUoYZIm6nlG.png)
Thanks,
Mike
Hello Mike
The designer is there to arrange your components but it is not what-you-see-is-what-you-get. This is because the Android devices generally have a higher screen resolution than a PC. In your case, if designed and tested on a ChromeBook, the Designer should get close-ish to the final layout. In the Designer, are you selecting the appropriate device? (Defaults to 'phone').
We cannot see your image.
Thank you for the (fast!) response! Switching into tablet mode did show more of the buttons, which is good. It doesn't show all of the buttons still, so I don't know how I could, say, move Button3 all the way to the right of the screen -- is there another method for ordering these components?
Thanks!
Hi Mike
Yes there is - it's all to do with your train of thought. In this case however, why do you need to move "Button3"?
The Buttons should be named by you with meaningful names, so the current button number order should not be of concern.
See my website for GUI Layout tips:
https://www.professorcad.co.uk/appinventortips#TipsGui
Hi Mike,
I've developed some applications for tablets with 7.5 and 8 inches display, and to be able to see everything I've set the display mode to Monitor size (PC).
Cheers,
Ugo.
PS here below an example where the tablet display is a true 8", but to see in the designer page all the stuff, the display setting for AI2 is Monitor size.
That is beautiful! Thank you for sharing!
Thank you for the feedback! I'm new to App Inventor and teaching a course in it this year. My kids are doing a great job navigating it while learning virtually...I'm just trying to stay ahead of them!
The button naming/creation was done in the order suggested by the MIT AI curriculum...they asked us to add the "sharp notes" later, so I was just trying to figure out what to tell the kids when they couldn't see all the buttons anymore.
[Mod edit - link removed due to copyrighted material not intended for distribution]
We'll definitely make it work...they're a tough bunch!
Hi Mike,
I think that a different approach could be to adapt the size of the 13 buttons to the overall witdh of the screen by putting each of them into a separate horizontal arrangement.
In the annexed aia you can find the designer example. I've put 13 buttons and all of them are visible in the designer page at phone screen size. I don't know whether it is of some help for your "kids". It's not finished, but just to give the idea ...
Enjoy !
Ugo.
PS here below what the designer page looks like.
pianokeyboard.aia (1.5 KB)
...still another idea. You can embed an image and put on it some ghost (transparent) Horizontal Arrangements with ghost buttons. The white keys are composed by two parts (upper and lower) since they have two different widths while the black ones can be made with a single button. For white keys you have to use two Horizontal Arrangements and consider the two parts as only one. In other words when you hit the upper part of a white key, or you hit the lower part, then you do the same "procedure": i.e. you play the same tone; as if the key was made by a single piece. (Sorry for my poor english ..I hope I've been capable to explain... 
.)
The png image is simply downloaded form the web and resized with GIMP..
And here the relevant aia. Again it is just an hint, it is not complete. Let your kids...play... 
pianokeyboard_01.aia (27.1 KB)
WOW! These are awesome! I can't wait to share with my students! Thank you!!!
...when the going gets tougher, the toughts get going....
