[Free] Strip View Pager - An Extension for making professional view pager

icon Strip View Pager

Hi everyone, hope you are all good, This extension helps you to create professional tabs with view pager.
This extension comes with a lot of customization like custom font typeface on tabs and indicator gravity or indicator type. You can head to the preview section of this topic to look how the extension looks like.
To understand the extension and made it easy for use I have made it as same as in built view pager so you can understand it easily.

Let see some blocks and their documentation.

All Blocks

Properties

Strip Types

image

There are two types of strips. What is the difference in them? Head to the Preview section.

Strip Gravity

image

There are two types of gravity property. If set to Top then the strip will be shown on the top of tab and if bottom then the indicator will be shown at the bottom.

Documentation

component_event(2)

This event raises when user select the page and it is start to going transform to the selected page.

component_event(1)

This event raises when user selected the page and the page is selected completely where the animation ends.

component_method(1)

This block creates the view pager in the given layout (Vertical and Horizontal Arrangement).

component_method(2)

Select the page to given position

component_method(3)

Add the tab with given title and given layout (page).

component_method(4)

Remove the page at given position

component_method(5)

Remove all the pages or tabs from the view pager.

Using Properties

The whole extension is depend on these properties. This will decide the extension look so let see them

Strip Color

Using Blocks

image

Using Property

image

Strip Position/Gravity

It is the strip gravity. If set to Top then the strip will be shown on the top of tab and if bottom then the indicator will be shown at the bottom.

Using Blocks

image

Using Property

image

Unselected Color

This property set the unselected color of tabs or pager

Using Blocks

image

Using Property

image

Strip Height

This property set the height of the line or strip that is shown below the tabs

Using Blocks

image

Using Property

image

Custom Font Typeface

This property set the custom font typeface to the titles of the tabs. Note:- It works only in apk

Using Blocks

image

Using Property

image

Font Bold

This property if set to true then title font will be bold and if false then no

Using Blocks

image

using Property

image

Selected Color

This block set the selected or active tabs color

Using Blocks

image

Using Property

image

Strip Type

This property set the strip type of the tabs. There are two types of strips present. You can head to the preview section of this extension to look it.

Using Blocks

image

Using Property

image

Corner Radius

This property set the corner radius of the strip

Using Blocks

image

Using Property

image

Animation Duration

This property set the duration taken by the extension for switching the tabs

Using Blocks

image

Using Property

image

Font Size

This property set the font size of the title of tabs

Using Blocks

image

Using Property

image

Background Color

This property set the background color of the tabs

Using Blocks

image

Using Property

image

Current Position

image

Usage and Preview

Let see how the block works

Usage

Blocks

image

Properties

Preview

Let see the output now :grinning:

Line Strip

IMG_whckk8

Point Strip

IMG_8sdxob

Top Gravity

IMG_7i3kcj

Downloads

Download Extension :-

Download AIA :- StripViewPager (87.2 KB)
Download APK :- StripViewPager.apk (5.4 MB)

Credit

Thanks to @Shreyash for his super Rush .

Suggestion and issue are welcome

If you like the extension then like the topic
Thank You All

40 Likes

Great work :heart::heart::heart:

Helpful extension. keep your contribution

Keep IT Up :partying_face: @iamwsumit

Nice extension @iamwsumit :blush:

Would love to test it but, :pensive:its paid

1 Like

Now this extension is free to everyone :smiley: . Downloads links are added in the above on topic.

Now you can test :slightly_smiling_face:


Thank You All
Sumit :wink:

7 Likes

Voila ! will test it soon… :slight_smile:

3 Likes

Great extension. I am definitely going to use it in my current project.

keep it
good work broo :heart_eyes: :smiling_face_with_three_hearts:

How to change: Strip View pager In the right direction ?
#I have a suggestion, please use the ID
It will be better if you use ID
Example of this block :point_down:
061ffdc3e04820f0e2b6251abb6702a0115ef01f_2_690x272

It can be done with Select block.

I don’t think so. How it is better? Can you explain?


Extension link is updated on the top of post. It was causing a Boolean property runtime error it has fixed now.
Thanks @techhamara91 for reporting the error.

Thank You

How?
Show me plz.

Hi !

Superb extension, thank you! I have a question, would it be possible to add the option to put an icon in place of the page / tab title?

Demo aia is given. You should check it. I am wondered what difficulties you’re getting in using that block…

No. It’s not possible.

1 Like

If I will add 100 elements to this then will it become scrollable?

Why not try by your self and let us know the result?

3 Likes

@iamwsumit It’s having text messed up can you please make it scrollable I really need this extension.
image

Hello, first of all thanks for the great extension created and the work you contribute to the entire community.

After the update to Kodular 1.5.2 I have detected that the extension generates the following error:

From companion error: The Operation Fontbold Cannot Accept the Arguments:, [False].

The issue was fixed by checking the bold option on the design screen

I am using Strip View Pager extension, But this extension only work if there is 3 words or short words. I have more than 3 or long words so that is why my tab layout text missed up!

Is there any solution for this problem?

photo_2022-12-07_02-34-50
I already tested it with horizontal scrollbar still not working! :cry: