Android Tutorial TabStripViewPager - Better ViewPager

Discussion in 'Tutorials & Examples' started by Erel, Feb 25, 2016.

Page 1 of 10
  1. Erel

    Erel Administrator Staff Member Licensed User



    This library is based on the following open source project: https://github.com/astuetz/PagerSlidingTabStrip
    License: http://www.apache.org/licenses/LICENSE-2.0

    It is an alternative to StdViewPager. It is simpler to use and looks better.
    It is implemented as a custom view. It requires B4A v5.8+.

    It is very simple to add a TabStrip to your app.

    Add the TabStrip with the visual designer and configure it:

    [​IMG]

    Note the usage of anchors to fill the available space.

    Create a layout file for each page. Again use anchors to fill the available space:

    [​IMG]

    Load the main layout and then add pages with a call to TabStrip.LoadLayout:
    Code:
    Sub Activity_Create(FirstTime As Boolean)
           Activity.LoadLayout("Main")
       TabStrip1.LoadLayout(    "Page1", "PAGE 1")
       TabStrip1.LoadLayout(    "Page2", "THIS IS PAGE 2")
       TabStrip1.LoadLayout(    "Page3", "AND PAGE 3")
    End Sub
    Add the following text to the manifest editor (it creates the short press effect):
    Code:
    '********* TabStrip ***********************
    CreateResource(drawable, background_tab.xml,
    <selector xmlns:android=    "http://schemas.android.com/apk/res/android"
       android:exitFadeDuration=    "@android:integer/config_shortAnimTime">
      <item android:state_pressed=    "true" android:drawable="@color/background_tab_pressed" />
      <item android:state_focused=    "true" android:drawable="@color/background_tab_pressed"/>
      <item android:drawable=    "@android:color/transparent"/>
    </selector>)
    CreateResource(values,     colors.xml,
    <resources>
      <color name=    "background_tab_pressed">#6633B5E5</color>
    </resources>)
    '******************************************
    If you are using B4A v6+ then you should add this line:
    Code:
    #AdditionalJar: com.android.support:support-v4
    As Android support library requires Android 4+ (API level 14+), TabStripViewPager also requires Android 4+.
     

    Attached Files:

    Last edited: Jan 24, 2018
    Erel, Feb 25, 2016
    #1
    stanks, Multiverse app, Johan Hormaza and 41 others like this.
  2. ArminKH

    ArminKH Well-Known Member

    what is the difference with Design Support Tab Layout?
     
    ArminKH, Feb 25, 2016
    #2
  3. Peter Simpson

    Peter Simpson Expert Licensed User

    Cheers @Erel and it's really easy to implement too...
     
    Last edited: Feb 25, 2016
    Peter Simpson, Feb 25, 2016
    #3
  4. Erel

    Erel Administrator Staff Member Licensed User

    This is based on a different native library. As TabStrip is implemented as a custom view it is very simple to add it.

    Note that unlike StdActionBar you can add multiple TabStrips to the activity (or any Panel).
     
    Erel, Feb 25, 2016
    #4
    BitsAndBytes, pesquera, valentino s and 6 others like this.
  5. MarcoRome

    MarcoRome Expert Licensed User

    Is fantastic. Really very simple.
    Thank you a lot
     
    MarcoRome, Feb 25, 2016
    #5
  6. palmzac

    palmzac Active Member Licensed User

    Great ! like it
     
    palmzac, Feb 28, 2016
    #6
  7. so27

    so27 Active Member Licensed User

    Great, on something I've been waiting.
     
    so27, Mar 1, 2016
    #7
  8. phukol

    phukol Active Member Licensed User

    Just want to ask how can i access each individual panel generated by the tabstrip?
    I am trying to make use of a single layout and set the values of each view differently for each panel,
     
    Last edited: Mar 2, 2016
    phukol, Mar 2, 2016
    #8
  9. Erel

    Erel Administrator Staff Member Licensed User

    Please start a new thread for this question and post the code that you use to create the layout.
     
    Erel, Mar 2, 2016
    #9
  10. susu

    susu Well-Known Member Licensed User

    How can I create TabStrip by using code without load layout? Thanks.
     
    susu, Mar 2, 2016
    #10
  11. Erel

    Erel Administrator Staff Member Licensed User

    You can only add it with the designer.
     
    Erel, Mar 2, 2016
    #11
  12. Mahares

    Mahares Well Known Member Licensed User

    @Erel claims it is a better viewpager. Let us see if he can accommodate these requests as I would like to use it as an alternate to AHViewPager which is excellent :
    1. Can you add a way to be able to hide one or more pages when the program requires fewer. For instance, some data input is on one page that is not needed for a given item, but will be needed for another.
    2. Can you add the ability to change the pages titles text size, font and typeface.
    3. Can you provide the ability to change the color of the selected page horizontal line indicator besides black.
    4. Can you make it where a change in the pages title background color is possible.
    5.. I attempted to apply it to an application that uses AHViewPager, the program folder increased from 2.2 MB to 4.8 MB despite removing all the AHViewPager code and libraries. The apk went from 350 KB to 850 KB. That is too much wasted real estate.

    Based on @Erel's answers, I will decide if it is actually better for me than AHViewPager.
    Thank you for innovating.
     
    Mahares, Mar 3, 2016
    #12
  13. Giovanniluca Vuono

    Giovanniluca Vuono Member Licensed User

    Hi Everyone, thanks to Erel for this great lib.. I've some questions:
    Is it possible to add Anotherdatepicker to the first tab or scrollview in the second tab?
    Can I add a StartActivity("Activity") to a tab or I can only load a Layout?
     
    Giovanniluca Vuono, Mar 3, 2016
    #13
  14. DonManfred

    DonManfred Expert Licensed User

    Add a Anotherdatepicker to the layoutfile for first tab
    Add a Scrollview to the layoutfile for second tab.
     
    DonManfred, Mar 3, 2016
    #14
    Devan likes this.
  15. DonManfred

    DonManfred Expert Licensed User

    It´s up to you what you do when clicking a button. You can for sure call another activity

    You can not use different activities in the tabs. ALL TABS are in ONE activity. The one where the tabstrip belongs to.
     
    DonManfred, Mar 3, 2016
    #15
  16. Giovanniluca Vuono

    Giovanniluca Vuono Member Licensed User

    Yes, I've already done it..
    But if I want to fill a table in the second tab with SQLite where can I add the logic? I can insert the logic in an activity not in a layout..
     
    Giovanniluca Vuono, Mar 3, 2016
    #16
  17. DonManfred

    DonManfred Expert Licensed User

    Code:
    Sub TabStrip1_PageSelected (Position As Int)
            Log($"Current page: ${Position}"$)
            ' You can add your logic here
    End Sub
     
    DonManfred, Mar 3, 2016
    #17
  18. Giovanniluca Vuono

    Giovanniluca Vuono Member Licensed User

    Thanx DonManfred,
    I'll try it soon
     
    Giovanniluca Vuono, Mar 3, 2016
    #18
  19. Erel

    Erel Administrator Staff Member Licensed User

    I was comparing it to the StdViewPager solution.
    The library itself is small, however it depends on android-support-v4.jar. If you weren't using it before then it will add about 400kb to the APK.

    Use whichever solution you find best for you.
     
    Erel, Mar 3, 2016
    #19
    Peter Simpson likes this.
  20. Mahares

    Mahares Well Known Member Licensed User

    @Erel: Any plans to enhance it and add the functionality that I posted in Post#12. As you know, many library developers come and go and we are stuck with many libraries without support, but in in your case we have a sense of security that you will be there for us in case of need. If not, perhaps post the library code here so someone with lib knowledge can enhance it.
     
    Mahares, Mar 3, 2016
    #20
Recent Posts
Page 1 of 10
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Accept Learn More...
    Dismiss Notice