Tap menu example for everyone | Now with swipe function

Promote your App
1

Hello Guys, today i will show you my example of a simple tap menu app.

I created a simple tap menu with 3 buttons and also 3 different arrangements as pages.
I used only one screen because some components in appinventor or thunkable do only work right on screen 1.

Features:
I added an swipe function to navigate per swipe to the page you want

1.png874×518 39.2 KB

blocks (1).png2124×864 98.8 KB

Home.png1080×1920 88.1 KB

Info.png1080×1920 83.2 KB

News.png1080×1920 63.7 KB

If you want you can download my example for free. All used images are free of license hosted on pixabay.

Download aia file
Download apk file
Video

The example is also available on my page:
http://nmd-apps.jimdo.com/tutorials-1/snippets/#12

If you like this example you can share it with your friends :slight_smile:
best regards

Mika

My Snippets, Examples, Tutorials Page…

14 Likes
2

UPDATE (Features) :
I added an swipe function to navigate per swipe to the page you want :blush:

2 Likes
3

Could you add a screenshot of the live app as well? Thanks.

3 Likes
4

@Helios added! :slight_smile: and a video file too :smile:

1 Like
5

@Mika Thanks! Love the clean design.

2 Likes
6

Thank you very much.
Yes it’s very clean because I wanted offer the user plenty room to personalize itself :slight_smile:

1 Like
7

Thanks. I like simple apps. Also your blog is helpful :slight_smile:

2 Likes
8

Thank you very much! :slight_smile: @ATK

1 Like
9

Yes he worked really hard to match with native material ui

2 Likes
10

Thank you very much! :slight_smile:

3 Likes
11

I’m developing my apps using your Tap Menu Example with Swipe Function, @Mika :grin:

Here’s few questions:

  1. How to make the Canvas filled all the screen? Would love to know if it’s possible to make the swipe area to filled all the screen. So any place the user wants to swipe left/right, it will move to another page, like from Home to Info and so on.

  2. Is the Canvas place limited to just at the bottom of the page?

Thanks! :slight_smile:

1 Like
12

Use my gesture handler extension:
https://nmd-apps.jimdo.com/extensions/nmd-extensions/#9

13

Thanks!
I just think that your Gesture Handler extension is the solution before you replied :slight_smile:
Turn out it’s true! :grinning:

14

Hey @Mika,

I used your Gesture Handler extension.

testingGestureHandlerExt.png449×525 27.3 KB

But what I found is the extension can’t read my gesture when I swipe left/right.
Need to swipe several times before it can read it and do what the next block tells.
On another test, I need to wait few seconds before Gesture Handler extension can understand my swipe.

Test it using Asus Google Nexus tablet and Oppo F1.

Is it just because of Thunkable Live?
Will it work perfectly if it is exported as .apk?

15
  1. You cannot swipe for example on button. Only on VA
  2. Does “direction” really return left or right? Maybe Right or Left?
  3. Always try both methods. Thunkable Live & packaged application.
1 Like
16

Thanks! :grinning:

  1. Yea, tested it before and it only works on VA.
  2. it’s ‘left’ and ‘right’. Not ‘Left’ and ‘Right’
  3. Thanks again!

Update:
Test it using packaged application (.apk).
It runs smoother.

But now I found that half to bottom of the screen is not detected by Gesture Handler.
If I swipe on the half to bottom screen, it’s not working.
But half to top screen is working good.

Any help or explanation on this? :yum:

2 Likes
17

There is an aia working example for Gesture all directions.

18

Thanks!
It just detect which way our gesture is.

Got the solution, combine @Mika Gesture Handler extension with Canvas for handling gesture on the half to bottom of the screen.

19

Hi Mika

What is infoswipe component in this example app ?
I couldn’t trace that in the components?

And is there some way that the tabs get auto hide when we are scrolling down and appear when we scroll up, Really needed.

20

Your aia file download link goes, but to the apk file.