# Tap menu example for everyone | Now with swipe function

**URL:** https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157
**Category:** Promote your App
**Tags:** aia
**Created:** [September 19, 2016, 1:03pm UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157 "2016-09-19T13:03:44Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Mika](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mika/32/5022_2.png) [@Mika](https://community.thunkable.com/u/Mika)
#### Post date: [September 19, 2016, 1:03pm UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/1 "2016-09-19T13:03:44Z")

</div>

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

 ![](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/1X/37431434dff74f8284c592807cbadfaa02874b22.png)

 ![](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/1X/88ec81a62d6afcae4b5d9263b04be57ed30faf78.png)

 ![](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/1X/297136221547d3eddef491f854e9a43c74db768d.png)

 ![](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/1X/00d1e7ac49c4396d67898fc5650f8732dd7286ad.png)

 ![](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/1X/709d35ed28ac379d5ae0b80be8192725c91d4469.png)

If you want you can download my example for free.&nbsp;All used images are free of license hosted on [pixabay](https://pixabay.com "https://pixabay.com").

[Download aia file](https://sourceforge.net/projects/released/files/ThemeHorizontalMenu.aia/download)  
[Download apk file](https://sourceforge.net/projects/released/files/ThemeHorizontalMenu.apk/download)  
[Video](https://sourceforge.net/projects/released/files/ThemeHorizontalMenu.mp4/download)

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

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

Mika

* * *

[My Snippets, Examples, Tutorials Page…](http://nmd-apps.jimdo.com)

---

<div class="post-metadata">

### Author: ![Mika](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mika/32/5022_2.png) [@Mika](https://community.thunkable.com/u/Mika)
#### Post date: [September 19, 2016, 3:24pm UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/2 "2016-09-19T15:24:14Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Helios](https://avatars.discourse-cdn.com/v4/letter/h/858c86/32.png) [@Helios](https://community.thunkable.com/u/Helios)
#### Post date: [September 19, 2016, 3:32pm UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/3 "2016-09-19T15:32:32Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Mika](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mika/32/5022_2.png) [@Mika](https://community.thunkable.com/u/Mika)
#### Post date: [September 19, 2016, 3:42pm UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/4 "2016-09-19T15:42:44Z")

</div>

@Helios added! 🙂 and a video file too 😄

---

<div class="post-metadata">

### Author: ![Helios](https://avatars.discourse-cdn.com/v4/letter/h/858c86/32.png) [@Helios](https://community.thunkable.com/u/Helios)
#### Post date: [September 19, 2016, 4:09pm UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/5 "2016-09-19T16:09:43Z")

</div>

@Mika Thanks! Love the clean design.

---

<div class="post-metadata">

### Author: ![Mika](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mika/32/5022_2.png) [@Mika](https://community.thunkable.com/u/Mika)
#### Post date: [September 19, 2016, 4:18pm UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/6 "2016-09-19T16:18:27Z")

</div>

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

---

<div class="post-metadata">

### Author: ![ATK](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/atk/32/187_2.png) [@ATK](https://community.thunkable.com/u/ATK)
#### Post date: [September 20, 2016, 5:31am UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/7 "2016-09-20T05:31:36Z")

</div>

Thanks. I like simple apps. Also your blog is helpful 🙂

---

<div class="post-metadata">

### Author: ![Mika](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mika/32/5022_2.png) [@Mika](https://community.thunkable.com/u/Mika)
#### Post date: [September 20, 2016, 6:25am UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/8 "2016-09-20T06:25:34Z")

</div>

Thank you very much! 🙂 @ATK

---

<div class="post-metadata">

### Author: ![pavi2410](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/pavi2410/32/16588_2.png) [@pavi2410](https://community.thunkable.com/u/pavi2410)
#### Post date: [September 20, 2016, 7:03pm UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/9 "2016-09-20T19:03:23Z")

</div>

Yes he worked really hard to match with native material ui

---

<div class="post-metadata">

### Author: ![Mika](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mika/32/5022_2.png) [@Mika](https://community.thunkable.com/u/Mika)
#### Post date: [September 20, 2016, 7:08pm UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/10 "2016-09-20T19:08:44Z")

</div>

> [@pavi2410](#):
>
> Yes he worked really hard to match with native material ui

Thank you very much! 🙂

---

<div class="post-metadata">

### Author: ![andrekhrisna](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/andrekhrisna/32/4078_2.png) [@andrekhrisna](https://community.thunkable.com/u/andrekhrisna)
#### Post date: [July 10, 2017, 6:22am UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/11 "2017-07-10T06:22:22Z")

</div>

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

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! 🙂

---

<div class="post-metadata">

### Author: ![Mika](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mika/32/5022_2.png) [@Mika](https://community.thunkable.com/u/Mika)
#### Post date: [July 10, 2017, 8:45am UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/12 "2017-07-10T08:45:26Z")

</div>

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

---

<div class="post-metadata">

### Author: ![andrekhrisna](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/andrekhrisna/32/4078_2.png) [@andrekhrisna](https://community.thunkable.com/u/andrekhrisna)
#### Post date: [July 11, 2017, 9:24am UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/13 "2017-07-11T09:24:20Z")

</div>

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

---

<div class="post-metadata">

### Author: ![andrekhrisna](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/andrekhrisna/32/4078_2.png) [@andrekhrisna](https://community.thunkable.com/u/andrekhrisna)
#### Post date: [July 12, 2017, 5:13am UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/14 "2017-07-12T05:13:39Z")

</div>

Hey @Mika,

I used your Gesture Handler extension.

 ![](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/2X/f/f3d5b47d4dc1435ff2ae262ae746688a0004981b.png)

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?

---

<div class="post-metadata">

### Author: ![ILoveThunkable](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ilovethunkable/32/3134_2.png) [@ILoveThunkable](https://community.thunkable.com/u/ILoveThunkable)
#### Post date: [July 12, 2017, 5:15am UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/15 "2017-07-12T05:15:38Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![andrekhrisna](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/andrekhrisna/32/4078_2.png) [@andrekhrisna](https://community.thunkable.com/u/andrekhrisna)
#### Post date: [July 12, 2017, 5:21am UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/16 "2017-07-12T05:21:11Z")

</div>

Thanks! 😀

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? 😋

---

<div class="post-metadata">

### Author: ![mannankhanabdul](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mannankhanabdul/32/532_2.png) [@mannankhanabdul](https://community.thunkable.com/u/mannankhanabdul)
#### Post date: [July 12, 2017, 10:05am UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/17 "2017-07-12T10:05:00Z")

</div>

[http://community.thunkable.com/t/gesture-detector/4386/55?u=mannankhanabdul](http://community.thunkable.com/t/gesture-detector/4386/55)

There is an aia working example for Gesture all directions.

---

<div class="post-metadata">

### Author: ![andrekhrisna](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/andrekhrisna/32/4078_2.png) [@andrekhrisna](https://community.thunkable.com/u/andrekhrisna)
#### Post date: [July 13, 2017, 3:07am UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/18 "2017-07-13T03:07:48Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![GeekUpd8](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/geekupd8/32/7350_2.png) [@GeekUpd8](https://community.thunkable.com/u/GeekUpd8)
#### Post date: [September 12, 2017, 4:43am UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/19 "2017-09-12T04:43:06Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![bitjetkitlkq2](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bitjetkitlkq2/32/49517_2.png) [@bitjetkitlkq2](https://community.thunkable.com/u/bitjetkitlkq2)
#### Post date: [November 3, 2019, 5:36pm UTC](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157/20 "2019-11-03T17:36:08Z")

</div>

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

[Next page](https://community.thunkable.com/t/tap-menu-example-for-everyone-now-with-swipe-function/157.md?page=2)
