utilgame

unread,
Feb 12, 2015, 2:06:18 PM2/12/15
to
Hi I would like to know how can I create tabs in App inventor 2?

Thank you 

SteveJG

unread,
Feb 12, 2015, 2:49:20 PM2/12/15
to mitappinv...@googlegroups.com
Tabs in an AI2 app?   There is no control to do that.  It can not do dropdown menus either but there are spinners.


Regards,
Steve
Message has been deleted

utilgame

unread,
Feb 12, 2015, 2:57:14 PM2/12/15
to mitappinv...@googlegroups.com
could explain how to do it?

SteveJG

unread,
Feb 12, 2015, 3:05:36 PM2/12/15
to mitappinv...@googlegroups.com
Explain how to do what?   You can not have Tabs on AI2 Projects.  You have to come up with an alternate solution...I might uses Layouts and hide or show them instead of Tab sheets using the Visible property true or false and possibly use a spinner to select the layouts you want to display.



--Steve

Scott Ferguson

unread,
Feb 12, 2015, 6:35:32 PM2/12/15
to mitappinv...@googlegroups.com
Scrollable or fixed tabs? (http://developer.android.com/design/building-blocks/tabs.html)

 I have done both in AI Classic. Perhaps we can redo them for AI2?
--
sf

MartynC

unread,
Feb 21, 2015, 9:14:25 AM2/21/15
to mitappinv...@googlegroups.com
You can create the effect by using buttons and then making elements visible and invisible.

See the 2 attached images. The tabs are buttons. When click a button, change the background colours, make the current screen invisible, make the new screen visible. I also make the current page button inactive. ie when on the settings page, the settings button is inactive.


There are probably other ways to do this but I find this way easy to manage.

Screenshot_2015-02-20-14-25-35.png
Screenshot_2015-02-20-14-08-35.png

Taifun

unread,
Feb 21, 2015, 9:22:18 AM2/21/15
to mitappinv...@googlegroups.com
very nice MartynC! keep up the good work!
Taifun
Message has been deleted

utilgame

unread,
Feb 21, 2015, 12:34:55 PM2/21/15
to mitappinv...@googlegroups.com
Might explain how to do it please

not quite understand the English

MartynC

unread,
Feb 22, 2015, 9:25:58 AM2/22/15
to mitappinv...@googlegroups.com
Attached is a screen shot of the designer and the blocks. Hope this helps.

The app starts on the dropController page and the dropController tab/button is inactive.
When the Settings tab/button is clicked - the dropController page is made invisible and the settings page is made visible. There are various other elements I turn on and off as well; such as the two main buttons which are in their own wrapper.

The tab effect is helped by using images for the buttons. When the screens are changed I simply swap the button background images round. This makes it look like the current screen is on top.

I use a similar trick with a splash/start screen. The start screen is a button the size of the screen with a message that says tap the screen to start. Once the button is clicked it is made invisible and the dropController screen is made visible.






tabs designer.jpg
tabs_blocks.jpg
tabs_images4Buttons.jpg

utilgame

unread,
Feb 23, 2015, 12:33:43 PM2/23/15
to mitappinv...@googlegroups.com
thank you very much

utilgame

unread,
Feb 23, 2015, 3:29:21 PM2/23/15
to
Hello MartynC
I have an error opening the app displays the contents of the two tabs?
I could not create five tabs?

al abrir.jpg
TAB1.jpg
TAB2.jpg
app.aia

MartynC

unread,
Feb 24, 2015, 1:33:47 AM2/24/15
to
I've dove a very quick 3 tab version and kept the logic for changing the screens and buttons simple.

This should give you a good place to start.
3TAB.jpg
app.aia

SteveJG

unread,
Feb 24, 2015, 7:46:48 AM2/24/15
to mitappinv...@googlegroups.com
Nice Martyn.  Thank you for sharing.  In addition to Tabs, this is a nice exercise in using a single screen effectively to manage a lot of data. The example shows how to do a lot using very little screen real estate.  Good work.

Regards,
Steve

utilgame

unread,
Feb 24, 2015, 8:11:46 AM2/24/15
to mitappinv...@googlegroups.com
I had been told it was not possible to do tabs

thank you very much friend...

SteveJG

unread,
Feb 24, 2015, 8:15:20 AM2/24/15
to mitappinv...@googlegroups.com
@ utilgame .... This is NOT a tab ... it is a very clever way to "simulate" a Tab in AI2.  :)      Pretty neat...when AI2 does not have the control you need, sometimes it is possible to 'build' one using the AI2 components.

-- Steve

Taifun

unread,
Apr 13, 2015, 6:32:36 PM4/13/15
to mitappinv...@googlegroups.com

Eric Payne

unread,
May 5, 2015, 1:53:48 PM5/5/15
to mitappinv...@googlegroups.com
Sweet build!
Reply all
Reply to author
Forward
0 new messages