How to create Dynamic View Pager| Guide

Guides Resources
,
#1

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.

Annotation 2020-07-21 225008
Annotation 2020-07-21 2250081186×592 52.5 KB

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:

8 Likes
View Pager Dynamic
[F/OS] - Dynamic Components Extension (for every component) 2.3.0
#2

Nice guide but attach a screenshot and an apk

1 Like
#3

Nice guide!

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

A screenshot or short video.

#4

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

#5

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

#6

Does it work like this?

1 Like
#7

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

1 Like
#8

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

1 Like
#9

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

1 Like
#10

Using some logic you can achieve it.

1 Like
#11

Nice guide @golumaths100

1 Like
#12

Nice :blush: Easy and short guide.

1 Like
#13

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
#14

Thanks. Glad you liked it. :slight_smile:

1 Like
#15

Waiting for this

#16

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
#17

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

#18

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
#19

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
#20

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