An interactive indicator to navigate between the different pages of a ViewPager

Overview

Android PagerSlidingTabStrip

Interactive paging indicator widget, compatible with the ViewPager from the Android Support Library.

Try out the sample application on the Play Store.

PagerSlidingTabStrip Sample Screenshot 1PagerSlidingTabStrip Sample Screenshot 2

Usage

For a working implementation of this project see the sample/ folder.

  1. Include the library as local library project or add the dependency in your build.gradle.

    dependencies { compile 'com.astuetz:pagerslidingtabstrip:1.0.1' }

  2. Include the PagerSlidingTabStrip widget in your layout. This should usually be placed above the ViewPager it represents.

    <com.astuetz.PagerSlidingTabStrip android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="48dip" />

  3. In your onCreate method (or onCreateView for a fragment), bind the widget to the ViewPager.

    // Initialize the ViewPager and set an adapter
    ViewPager pager = (ViewPager) findViewById(R.id.pager);
    pager.setAdapter(new TestAdapter(getSupportFragmentManager()));
    
    // Bind the tabs to the ViewPager
    PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
    tabs.setViewPager(pager);
    
  4. (Optional) If you use an OnPageChangeListener with your view pager you should set it in the widget rather than on the pager directly.

    // continued from above
    tabs.setOnPageChangeListener(mPageChangeListener);
    

Customization

To not just look like another Play Store styled app, go and adjust these values to match your brand:

  • pstsIndicatorColor Color of the sliding indicator
  • pstsUnderlineColor Color of the full-width line on the bottom of the view
  • pstsDividerColor Color of the dividers between tabs
  • pstsIndicatorHeightHeight of the sliding indicator
  • pstsUnderlineHeight Height of the full-width line on the bottom of the view
  • pstsDividerPadding Top and bottom padding of the dividers
  • pstsTabPaddingLeftRight Left and right padding of each tab
  • pstsScrollOffset Scroll offset of the selected tab
  • pstsTabBackground Background drawable of each tab, should be a StateListDrawable
  • pstsShouldExpand If set to true, each tab is given the same weight, default false
  • pstsTextAllCaps If true, all tab titles will be upper case, default true

All attributes have their respective getters and setters to change them at runtime

Changelog

Current Version: 1.0.1

1.0.1

  • Upgraded gradle build files
  • Changed package name to com.astuetz.PagerSlidingTabStrip
  • #37, #41 Added psts prefix to all attributes in attrs.xml
  • #46 Changed the shouldExpand behavior to set the layout at the time the tab is added

Developed By

Credits

License

Copyright 2013 Andreas Stuetz

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Comments
  • Added function to change tab title/icon color when selected.

    Added function to change tab title/icon color when selected.

    Currently, only the interactive indicator can be modified in the tabs just like on the Google Play Store. This modification allows selected tab title/icons to be of different color, making the interface more flexible and intuitive. I added some functions in the library, and applied them on the sample.

    library

    • pstsTabSwith(boolean) : When a tab is selected, the drawable selector icon or the text color of the Tab title can be modified
    • pstsActivateTextColor(int) : The Title color of selected Tab
    • pstsDeactivateTextColor(int) : The Title color of unselected Tabs

    I believe these additions will diversify the usage of this project, paving the way for a better interface.

    Thank you for sharing a great open source.

    Comments and suggestions are welcome!

    opened by red1004g 19
  • Setting setShouldExpand to true does not seem to expand the tabs

    Setting setShouldExpand to true does not seem to expand the tabs

    I am only assuming that setShouldExpand(true) is intended to make the tabs fixed width, consuming the width of its parent.

    It seems that setting setShouldExpand(true) doesn't actually have this effect though.

    opened by npike 18
  • Conflict with HoloEverywhere library.

    Conflict with HoloEverywhere library.

    Add 'psts' attribute prefix to avoid conflict in dividerPadding attribute when using this lib together with HoloEverywhere library. Added prefix to all attributes to make them look all the same, instead of adding the prefix only to dividerPadding. My project was failing to compile because HoloEverywhere was giving this error: attrs.xml:24: error: Attribute "dividerPadding" has already been defined

    opened by HenriqueRocha 17
  • Is this project being maintained?

    Is this project being maintained?

    The owner has not contributed anything on Github for almost 3 months. There are over 40 issues currently open, with only a few with a response from the owner.

    I am willing to create and maintain a new active fork of this if he does not respond within the next couple days.

    This is an important piece of an application I am writing, so it has been necessary to cherry pick some of the proposed fixes from open PRs. There seems to be a lot of community around this project, but no contributor to merge that work. Let's help each other out and get all these fixes and improvements into a library.

    opened by austynmahoney 12
  • Title Indicators are not moving

    Title Indicators are not moving

    Hi, I found your library example very use full. But when i tried using PagerSlidingTabStrip it does not move as a change Page in ViewPager!.

    Here is my xml

           <com.astuetz.viewpager.extensions.PagerSlidingTabStrip
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="48dip"
            android:background="@drawable/background_tabs"
            android:visibility="visible" />
    
         <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/indicator"
            android:layout_below="@+id/tabs"
            android:layout_margin="25dp"
            android:visibility="visible" />
    

    This is my code

     private PagerSlidingTabStrip tabs;
     mPager=(ViewPager)findViewById(R.id.viewPager);
         tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
        pages.add("Location");
        pages.add("Register");
        pages.add("Description");
    pages.add("Businesshours");
    pages.add("Signup");
    
    mPager.setAdapter(adapter);
    tabs.setViewPager(mPager);
    

    //Creating Pages with PageAdapter.

         public class PageAdapter extends FragmentStatePagerAdapter
         {
         Context context;
         ArrayList<String> pages;
    
    
    
    
        public PageAdapter(FragmentManager fm,Context context,ArrayList<String> pages) {
            super(fm);
            // TODO Auto-generated constructor stub
            this.context=context;
            this.pages=pages;
        }
    
        @Override
        public CharSequence getPageTitle(int position) {
            // TODO Auto-generated method stub
            return pages.get(position);
        }
    
        @Override
        public Fragment getItem(int position) {
            // TODO Auto-generated method stub
            return new PageFragment(pages.get(position), context);
        }
    
        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return pages.size();
        }
    
    
    
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            // TODO Auto-generated method stub
    
            FragmentManager manager = ((Fragment) object).getFragmentManager();
            FragmentTransaction trans = manager.beginTransaction();
            trans.remove((Fragment) object);
            trans.commit();
    
            super.destroyItem(container, position, object);
        }
    }
    
    opened by ManojMM026 11
  • NPE if there are no tabs to display

    NPE if there are no tabs to display

    The view throws an exception if there are no tabs available to display. It would be great if the view failed gracefully or gave a better error message.

    Test case

    mAdapter = new MyFragmentPagerAdapter(getChildFragmentManager());
    Assert.assertTrue(mAdapter.size() == 0);
    myViewPager.setAdapter(mAdapter);
    tabStrip.setViewPager(myViewPager);
    

    Stack trace

    java.lang.NullPointerException
            at com.astuetz.PagerSlidingTabStrip$PageListener.onPageScrolled(
                    PagerSlidingTabStrip.java:361)
            at android.support.v4.view.ViewPager.onPageScrolled(ViewPager.java:1712)
            at android.support.v4.view.ViewPager.pageScrolled(ViewPager.java:1633)
            at android.support.v4.view.ViewPager.scrollToItem(ViewPager.java:581)
            at android.support.v4.view.ViewPager.onLayout(ViewPager.java:1600)
            ...
    
    opened by austynmahoney 10
  • How to set starting tab ?

    How to set starting tab ?

    Good day,

    Thanks for the nice lib, I am incorporating it in my new project and I wanted to know how to set the starting tab, I have three tabs [ tab1 , Home , tab2 ] , I want it to start from middle "Home" tab and I have tried the below code but dosnt work ?

    pager.setAdapter(adapter); pager.setCurrentItem(1);

    setting Current item to zero makes the first tab selected, 1&2 makes the last tab selected where I want it to select the middle tab.

    Regards.

    opened by ageelg-mobile 9
  • Pressed/Selected Tab Colour

    Pressed/Selected Tab Colour

    Wonderful library, just struggling with one thing. As far as I can see, there's no functionality to change the colour of the tab when it is pressed/selected as it's a light blue in all variants of the demo app. It would be great to be able to set/theme this.

    opened by aiszatt 8
  • Tab Indicator Not showing when i change the tabbackground color

    Tab Indicator Not showing when i change the tabbackground color

    When i set the tab background to white the indicator is not showing . and when i do not mak enay changes to the tab background then a underline same as the indicator color comes which does nt go even if a set underline color to transparent or make underline height to 0

    opened by bpr10 5
  • Styling failure with attr pstsTabBackground.

    Styling failure with attr pstsTabBackground.

    Without pstsTabBackground attr, the styling works fine. The pstsIndicatorColor, pstsUnderlineColor and pstsDividerColor not working anymore after add the pstsTabBackground attr.

    ENV: Galaxy S4 GT-I9505 4.3 Support Library v7 ActionBarActivity

    opened by ionull 5
  • Changing orientation causes ActionBar color to be reset

    Changing orientation causes ActionBar color to be reset

    If you choose any color for the ActionBar, and then you change the orientation of your device, it wil reset the grey color for the the ActionBar. As soon as you touch the screen, it will be back to the right color.

    opened by SimonMarquis 4
  • How to set textsize of title

    How to set textsize of title

    android:textSizenot working

    <com.astuetz.PagerSlidingTabStripbottomIndicator
                        android:id="@+id/pagerTabStrip"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@color/colorAccent"
                        android:textSize="@dimen/small_font"/>
    
    
                    <androidx.viewpager.widget.ViewPager
                        android:id="@+id/vpDevicesTab"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" />
    
    opened by Miteshmakwana73 0
  • Could not resolve com.astuetz:pagerslidingtabstrip:1.0.1

    Could not resolve com.astuetz:pagerslidingtabstrip:1.0.1

    Problem Appeared On AS 3.4, any workaround this

    ERROR: Unable to resolve dependency for ':app@debug/compileClasspath': Could not resolve com.astuetz:pagerslidingtabstrip:1.0.1. Show Details Affected Modules: Cleaner WA-app

    ERROR: Unable to resolve dependency for ':app@debugAndroidTest/compileClasspath': Could not resolve com.astuetz:pagerslidingtabstrip:1.0.1.

    Show Details Affected Modules: Cleaner WA-app

    ERROR: Unable to resolve dependency for ':app@debugUnitTest/compileClasspath': Could not resolve com.astuetz:pagerslidingtabstrip:1.0.1.

    Show Details Affected Modules: Cleaner WA-app

    ERROR: Unable to resolve dependency for ':app@release/compileClasspath': Could not resolve com.astuetz:pagerslidingtabstrip:1.0.1.

    Show Details Affected Modules: Cleaner WA-app

    ERROR: Unable to resolve dependency for ':app@releaseUnitTest/compileClasspath': Could not resolve com.astuetz:pagerslidingtabstrip:1.0.1.

    Show Details Affected Modules: Cleaner WA-app

    Build

    Unable to resolve dependency for ':app@debug/compileClasspath': Could not resolve com.astuetz:pagerslidingtabstrip:1.0.1. Show Details Affected Modules: Cleaner WA-app |   -- | -- Unable to resolve dependency for ':app@debugAndroidTest/compileClasspath': Could not resolve com.astuetz:pagerslidingtabstrip:1.0.1. Show Details Affected Modules: Cleaner WA-app |   Unable to resolve dependency for ':app@debugUnitTest/compileClasspath': Could not resolve com.astuetz:pagerslidingtabstrip:1.0.1. Show Details Affected Modules: Cleaner WA-app |   Unable to resolve dependency for ':app@release/compileClasspath': Could not resolve com.astuetz:pagerslidingtabstrip:1.0.1. Show Details Affected Modules: Cleaner WA-app |   Unable to resolve dependency for ':app@releaseUnitTest/compileClasspath': Could not resolve com.astuetz:pagerslidingtabstrip:1.0.1. Show Details Affected Modules: Cleaner WA-app |  

    opened by Aym9n 0
  • Translation to Korean

    Translation to Korean

    hi! we are kwang woon university students. we are progressing a little help about open source project. It is our first time to research about this project, and we are getting used to knowing about this project. and our professor wants to us join the open source project which is a little helping. so, surveying so many open sources project, finally we can find this open source project!! this project have many description like photo which can help people understand easily. we would like to help many young software developers study your project by translating it. we would like you to permit our request. please We beg you.

    opened by ds-wook 0
Owner
Andreas Stütz
androiddev
Andreas Stütz
A lightweight library to help you navigate in compose with well typed functions.

TypedNavigation A lightweight library to help you navigate in compose with well typed functions. Installation: You can add this library to your projec

xmartlabs 23 Apr 7, 2022
A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.

AnimatedBottomBar A customizable and easy to use bottom bar view with sleek animations. Examples Playground app Download the playground app from Googl

Joery 1.2k Dec 30, 2022
A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.

A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.

Joery Droppers 1000 Dec 5, 2021
An interactive indicator to navigate between the different pages of a ViewPager

Android PagerSlidingTabStrip (default Material Design) This library is not maintained anymore and there will be no further releases. For most of the c

JPARDOGO 2.2k Jan 4, 2023
Pixplicity 915 Nov 8, 2022
Android auto scroll viewpager or viewpager in viewpager

Android Auto Scroll ViewPager ViewPager which can auto scrolling, cycling, decelerating. ViewPager which can be slided normal in parent ViewPager. Att

Trinea 1.7k Dec 10, 2022
A view pager indicator view to deal with a large amount of pages.

Attention I'm not going to support this anymore. Just use a better solution, e.g. this one Indefinite-Pager-Indicator BubblePagerIndicator A view page

Bogdan Kornev 134 Aug 18, 2022
Combine ViewPager and Animations to provide a simple way to create applications' guide pages.

WoWoViewPager WoWoViewPager combines ViewPager and Animations to provide a simple way to create applications' guide pages. When users are dragging WoW

Nightonke 2.7k Dec 30, 2022
Combine ViewPager and Animations to provide a simple way to create applications' guide pages.

WoWoViewPager WoWoViewPager combines ViewPager and Animations to provide a simple way to create applications' guide pages. When users are dragging WoW

黄伟平 2.7k Dec 30, 2022
A lightweight, good expandability Android library used for displaying different pages like loading, error, empty, timeout or even your custom page when you load a page

中文 | English LoadSir ?? ?? LoadSir是一个高效易用,低碳环保,扩展性良好的加载反馈页管理框架,在加载网络或其他数据时候,根据需求切换状态页面, 可添加自定义状态页面,如加载中,加载失败,无数据,网络超时,如占位图,登录失效等常用页面。可配合网络加载框架,结合返回 状态

KingJA 3.3k Dec 21, 2022
** A slide-out menu implementation, which allows users to navigate between views in your app.

MenuDrawer A slide-out menu implementation, which allows users to navigate between views in your app. Most commonly the menu is revealed by either dra

Simon Vig Therkildsen 2.6k Dec 8, 2022
Name UI states, navigate between them, remember where you've been.

Deprecated Flow had a good run and served us well, but new use is strongly discouraged. The app suite at Square that drove its creation is in the proc

Square 2.8k Dec 29, 2022
eventbus-intellij-plugin 3.8 0.0 L1 Java Plugin to navigate between events posted by EventBus.

eventbus-intellij-plugin Plugin to navigate between events posted by EventBus. Post to onEvent and onEvent to Post Install There are two ways. Prefere

Shinnosuke Kugimiya 315 Aug 8, 2022
The CustomCalendarView provides an easy and customizable calendar to create a Calendar. It dispaly the days of a month in a grid layout and allows to navigate between months

Custom-Calendar-View To use the CustomCalendarView in your application, you first need to add the library to your application. You can do this by eith

Nilanchala Panigrahy 113 Nov 29, 2022
Step by step,just use HorizontalStepView,VerticalStepView. step indicator,flow indicator,timeline,order process,express status

StepView Step by step. Step indicator. Flow indicator。 snapshot like this:HorizontalStepView like this also like this:VerticalStepView Yeah,I am not w

baoyachi. Aka Rust Hairy crabs 4.1k Dec 30, 2022
Paging indicator widgets compatible with the ViewPager from the Android Support Library and ActionBarSherlock.

Android ViewPagerIndicator Paging indicator widgets that are compatible with the ViewPager from the Android Support Library to improve discoverability

Jake Wharton 10.2k Dec 26, 2022
Paging indicator widgets compatible with the ViewPager from the Android Support Library and ActionBarSherlock.

Android ViewPagerIndicator Paging indicator widgets that are compatible with the ViewPager from the Android Support Library to improve discoverability

Jake Wharton 10.2k Jan 3, 2023
This lib can be used for viewpager infinite loop with indicator easily.

InfiniteIndicator This project is inspired by the android-auto-scroll-view-pager of Trinea. Use the salvage lib implement view recycle adapter.It cont

lightSky 489 Sep 8, 2022
Android - A ViewPager page indicator that displays the current page number and (optionally) the page count

NumericPageIndicator A ViewPager page indicator that displays the current page number and (optionally) the page count. It can also display buttons to

Manuel Peinado Gallego 253 Nov 16, 2022
Pager (especially for ViewPager) indicator in two styles: circle & fraction.

PagerIndicator Pager (especially for ViewPager) indicator in two styles: circle & fraction. Demo circle fraction Dependency implementation 'me.liangfe

Fei Liang 212 Nov 28, 2022