How to make Tabs like Whatsapp In Kodular I Guide

Guides Resources
1

Easy guide on how to make Tabs like this -

image

Components -

1). Tab Layout ( Layout > Navigation )
2). Vertical Arrangement* ( Layout > General)
3). Button (If you want to trigger the event on Button click, I will do it on Screen1 initialize)
4). Label ( I have used to indicate that my Guide is working )

Blocks -

image
image528×341 17.9 KB

image This is the text color of non active tabs (Default color is White )
image This is the background color of tabs (Default is blue )
image This is the text color of active tabs (Default is Pink)
image This is used to create a new tab.
image This is block is used to change the text of the label as per as the selection

Note: i) All the icons are uploaded in assets.
ii) The tab you created first in my example first is Status so status will selected by default.

Extensions used -

None

AIA and .apk

tab.aia
tab.apk

Video -


Hope it helped ! :grinning:

8 Likes
2

If it needs any improvement Please tell.

3

Nice Guide :+1:

Success

1 Like
4

:sweat_smile: I have a habit of writing that in the end .

1 Like
5

Great guide @Tekwizer :partying_face:
But:

I think whatsapp tabs uses the viewpager component. So it can be even swiped by the finger.Not with selecting the tabs only.( using tab component)

3 Likes
6

@Tekwizer nice guide as you are new to Kodular
There is a lot to explore.
:+1:

1 Like
7

Check this, it may help you. In which you get tabs as well the list

Sorry i not see this is the guide. I post then i saw this is the guide :grin:
Thank you

2 Likes