How to create Dynamic View Pager| Guide

Hello everyone. It’s been a long time since I created any guide on certain topic. Today I found something interesting to share which can be helpful to many new Koders. I will show you how to create Dynamic View Pager.

Requirements:
i) Dynamic Components Extension by @yusufcihan
ii) View Pager Component (available in Kodular)
iii) Vertical Arrangements (available in Kodular)

Do as follows:

i) On screen initialization, use ‘for each’ block and to create the inform the builder about the number of tabs you want to create.

ii) First, create the dynamic vertical arrangements (you can create other arrangements also, depending on your choice) so that we can use it as a component for view pager.

iii) Now, from ‘Any’ blocks, use ‘Add components to view’ block, so that we can add all the dynamic vertical arrangements to the ViewPager.

Here are the blocks for your convenience.

P.S: I did not add AIA file here because the blocks are too short and it just needed to explain the procedure. If you want, I will add the aia file here.

Extensions used:

Hope it will help you.

Thanks. :slight_smile:

7 Likes

Nice guide but attach a screenshot and an apk

1 Like

Nice guide!

It will be better if you show us the end result of this guide.

A screenshot or short video.

Thanks :slight_smile:
I have shut down my PC. I will update it by tomorrow.

Thanks. :slight_smile:
I will update it by tomorrow.

Does it work like this?

1 Like

Yes. Similar to this. Icons will be at the top. :sweat_smile:

1 Like

Great guide! I was looking for this, specially same as shown in video.

1 Like

Thanks again. :relieved:
For bottom navigation, I think you will need some extensions.

1 Like

Using some logic you can achieve it.

1 Like

Nice guide @golumaths100

1 Like

Nice :blush: Easy and short guide.

1 Like

Thanks. :slight_smile:

I know it is short but don’t why I was not able to execute the logic at first. It took me half an hour to execute it. :laughing:

1 Like

Thanks. Glad you liked it. :slight_smile:

1 Like

Waiting for this

I’m sorry. :sweat_smile: I thought everyone understood it.
Here’s the video:

And here’s the aia file:

viewpager.aia (13.7 KB)

Hope it helps. :slight_smile:

4 Likes

Hi i dont understand the difference between your project and a normal view Pager component

The only difference is that we can create page viewer tabs dynamically with this guide.

Just add the number in for each number loop, it will create given number of page viewer tabs dynamically.

3 Likes

This project shows how to create dynamic page for view pager but with view pager you’ve to add every components manually. Hope you understand.
:wink:

1 Like

Also, we can use some extensions to decorate it(I can’t mention the name as its not allowed here).:sweat_smile: