Hi all,
I’m planning to use tapbar menu like picture below. In this case, I will have 4 buttons, each one will be a different function. Once we enter in a option, we often to use the CLOSE SCREEN block to close and come back to the previous one. But in this case, the menu will be always on the bottom of the screen and the user can tap one of them when he wants. In this case, which are the best pratices in doing this?
I think you exactly like what I have created for my NXT Tools app.
I have created a VerticalLayout with fill parrents for both height and width.
Then under it I created a HorizontalLayout where I place the buttons in. Set the height of the Layout to 56 pixels (Material Guidelines)
Thanks for your answer, @Sander. What I want to understand, is when I click in the button, it opens a screen, etc, etc… but instead of use the left arrow to come back, the user click on another option of the menu, so how to close the previous screen? Because of it, I’m asking for the best practices, in order to not use a huge amount of memory with opened screens…
BTW, it’s very nice you app, @Sander!!!
I dont create new screens. I have multiple layouts inside the large VerticalLayour which I set visible and invisible when the users clicks a button.
Thanks! 
@Sander, just one more question. To a menu with 4 buttons, what do you use as a width for each button? Remembering that my app will be always in portrait mode.
I place 4 horizontalLayouts inside them with all fill parent and aligb center
Then place a button inside them
That’s a easy thing.
If you have 4 buttons… then set every button width to 25 %.
1 button = 25%;
2 button = 50%;
3 button = 75%;
4 button = 100%;
Now every button have the same width… no matter how big the display is 
Look at the picture:
Great!!! Thank you guys!!!
In the app how did you add Bluetooth sign in the title bar?
There is a block called Add Icon in the Screen
Hi all,
How do you create the buttons with images and text for a tap bar like this below?
You can use a Vertical Alignment that’s clickable with a label and an image
Or you can use canva.com or an image editor program (Photoshop or GIMP or Paint) to create the ‘pattern’
@Diego, thanks for your answer. Maybe I was not clear. In my case, I have created a Horizontal Arrangement to have 5 buttons. Each button has 56 px (height) and 20 % (width). So, my problem is how to create an image that contains an icon and the text, presuming that I don’t even know the real width of the button, I have only the height (56 px). So, in this case, how do you produce images like I showed in my last post, in order to have a good result.
Yeah, and I’m saying that you can use a Button with a background image that you would have done with Photoshop or paint (which contains an icon and text) 
And do that foreach button inside the Horizontal Alignment
Ok, but how do you define the WIDTH of the background image, even in photoshop or Corel or Fireworks, once you just defined the button with 20% (assuming that there are 5 buttons, so 100%/5 = 20%). That’s my question.
Oh, then is better to use a clickable VerticalArrangement instead of a button
And place inside of each one an image and a label, so images are more responsive
Well, even doing this way the result is the same. I’m just testing with one button and my result is this:
Thanks anyway,
Well, the best I could find was this:
So, with this, I want to add in the “I WANT” list for Makeroid:
- To adjust position of the TEXT in a button like (0 - Top, 1- Center, 2 - Down);
- The possibility to insert an image in the button’s properties;
- To adjust this image like (0 - Top, 1 - Left).
Do you guys think it is possible?
Here is now a example file for you.
The idea with a new component is good but not needed.
And too not easy to do.
You want this?
Then take a look to this:
BottomMenu.aia (81,5 KB)
BottomMenu.apk (2,4 MB)
Change the device orientation and you will see all looks good no matter if the device is on landscape or portrait mode.
