Request for user feedback on the Tab Bar Arrangement component

Hi everyone!

I’m Suyash, one of the GSoC participants. I’ll be working on adding the Tab Bar Arrangement component to the App inventor under the guidance of my mentor @ellelili2025.

The Tab Bar arrangement is a better way for the users to organise their data and to give access to the content in a single screen rather than multiple screens. However, the tab bar arrangement can be currently implemented using buttons and a Horizontal Arrangement, I’ll be implementing it natively as a layout using the platform-specific implementation of this technique.

I’m attaching the design document for my project here. I request all of you to kindly go through the doc and drop your valuable comments here or in the doc. Any suggestions/improvements are most welcome.

Link to the design doc: GSoC-Design Doc

Thanks in advance. :slight_smile:

12 Likes

Good luck with your GSoC Project. Looking good.

1 Like

Thanks for doing this! It’s a much needed Component.

I do have a question though, will users be able to swipe from tab to tab or is that for another project?

2 Likes

Thanks, Peter. :slightly_smiling_face:

1 Like

Yes, swiping from tab to tab is the part of the plan for this project. Though my initial target is to setup a tab layout where users can click on respective tab to switch between the tabs. Once I achieve this, I’ll surely try to add the swipe functionality between the tabs.

3 Likes

Excellent!

1 Like

Hi everyone, here's the first update on the project.

We've decided to make some changes in the design of the component based on suggestions received in the design doc attached in the main post. Currently, we have developed 2 components: TabArrangement and Tab. Users can drag a tab arrangement and then a tab into the tab arrangement component to use this arrangement. The properties implemented for both the components are listed below:

1.) TabArrangement

  • TabBackgroundColor
  • SelectedTabIndicatorColor
  • TabTextColor
  • SelectedTabTextColor
  • ShowTabsAtBottom

2.) Tab

  • Text
  • ShowText
  • Icon
  • ShowIcon

Here are some screenshots of this arrangement.

rsz_miteval1



rsz_2miteval1
rsz_miteval2
rsz_3miteval1

Kindly feel free to share your opinions/feedback in this thread. Any suggestions/improvements are most welcome.

Thank you.

8 Likes

Great Job. Will it be also possible to use swiping to go from one tab layout to another? So you could make the tabs themselves invisible.

3 Likes

Thanks @Peter. Currently, the swiping is enabled to switch between the tabs. I'll also add the functionality wherein users can make the tab bar invisible.

2 Likes

Something to consider:

Rather than having ShowTabsAtBottom as binary option, I think something like a dropdown called Position that had three options: 1. Default, 2. Top, 3. Bottom, would be better. My reasoning here is that Android apps typically have the tabs at the top whereas iOS pretty much always shows tabs at the bottom. This would allow better cross-platform compatibility of the component since Default would put it at the top for Android and bottom for iOS. Of course, this also means that eventually it will have to be aware of @Himani's work to preview on different platforms (but this can be resolved after GSOC).

Very good work so far.

2 Likes