How to create a unique tab layout?

Guides
1

How to create a tab view like this

tabl ayout
tabl ayout1080×316 13.4 KB

Steps:
1. Take a card view
a. align centre (both horizontally and vertically)
b. Set all the padding(top,bottom,left,right) to zero.
c. Set corner radius to 16px.
d. Set height 8% and width 90%
2. Place a horizontal arrangement inside the card view.
a. Set height 8% and width 90%
b. align centre (both horizontally and vertically)
3. Place two card views inside it.
a. Set height 8% and width 45%
b. align centre (both horizontally and vertically)
c. Set all the padding(top,bottom,left,right) to zero.
d. Set both of them to full clickable.
4. Place a label inside both of them
a. Set font size of label one&two to 17.
b. Set label text according to your wish (here it is badges and friends).
5. Add a vertical arrangement between the two cards (in the horizontal arrangement)
a. Set the height to 8% and width to 1%.
b. Set background colour to black or grey.

Voila! You have successfully created a unique tab layout you can add functioning to this according to your choice. Here is an example:

AIA File(portrait): https://community.kodular.io/uploads/short-url/1gKJZWpSVdVyTPey2AYhSEKek9M.aia
AIA File(Landscape): https://community.kodular.io/uploads/short-url/jR1Z3gY9Wq0dphg4rj2NE7lYAtb.aia
APK File: https://community.kodular.io/uploads/short-url/jiBKUC66FnOeq4hAg14iatWpC55.apk
Thanks @themaayur

5 Likes
2

Nice guide maybe add .aia here.
So others can check it.

1 Like
3

Why you are sharing Google drive link of your video? Just upload it on community.

So that we can directly watch it right here.

1 Like
4

I have a problem
If the screen is in landscape, there causes problems. It becomes too thin. How to fix this?

5

I’m sort of busy so let some one else contribute, if no ones does that i will add when I have time to.

Done! Changed it, thanks for your feedback!

That’s because it is designed to be used in portrait mode, so obviously you have to change dimensions according to landscape if you wish to use it that way.

6

Make changes according to your demand

7

tablayout (1).aia (2.4 KB)

1 Like
8

How would I trigger when orientaion change and what to do? My head is empty

9

Thanks, I’m adding this without checking, Hope it is correct I trust you :crazy_face:

10

Then You must change the link as I Made Changes and Edited the Aia. :grin:

11

image
Here’s Your Solution.

1 Like
12

@rizu Just Made What You Need

tablayout (1).aia (3.5 KB)

tablayout.apk (5.0 MB)

@ravigarg You can Add this to first post.

2 Likes
13

I exactly wanted this
Thank you very much

1 Like
14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.