Android ViewPager with bottom dots

Question

I want to add 3 bottom dots to my ViewPager  like this       I use FragmentActivity and support library ViewPager

User · Accepted Answer

No need for that much code  You can do all this stuff without coding so much by using only viewpager with tablayout  Your main Layout   lt RelativeLayout    xmlns android  quot http   schemas android com apk res android quot     xmlns app  quot http   schemas android com apk res-auto quot     android layout width  quot match parent quot     android layout height  quot wrap content quot  gt       lt android support v4 view ViewPager        android id  quot   id pager quot         android layout width  quot match parent quot         android layout height  quot match parent quot  gt       lt  android support v4 view ViewPager gt      lt android support design widget TabLayout        android id  quot   id tabDots quot         android layout alignParentBottom  quot true quot         android layout width  quot match parent quot         android layout height  quot wrap content quot         app tabBackground  quot  drawable tab selector quot         app tabGravity  quot center quot         app tabIndicatorHeight  quot 0dp quot   gt   lt  RelativeLayout gt   Hook up your UI elements inactivity or fragment as follows  Java Code  mImageViewPager    ViewPager  findViewById R id pager   TabLayout tabLayout    TabLayout  findViewById R id tabDots   tabLayout setupWithViewPager mImageViewPager  true    That s it  you are good to go  You will need to create the following xml resource file in the drawable folder  tab indicator selected xml  lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt shape     android innerRadius  quot 0dp quot      android shape  quot ring quot      android thickness  quot 4dp quot      android useLevel  quot false quot      xmlns android  quot http   schemas android com apk res android quot  gt       lt solid android color  quot  color colorAccent quot   gt   lt  shape gt   tab indicator default xml  lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt       lt shape xmlns android  quot http   schemas android com apk res android quot              android innerRadius  quot 0dp quot              android shape  quot oval quot              android thickness  quot 2dp quot              android useLevel  quot false quot  gt               lt solid android color  quot  android color darker gray quot   gt       lt  shape gt   tab selector xml   lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt selector xmlns android  quot http   schemas android com apk res android quot  gt        lt item android drawable  quot  drawable tab indicator selected quot            android state selected  quot true quot   gt        lt item android drawable  quot  drawable tab indicator default quot   gt   lt  selector gt   Feeling as lazy as I am  Well  all the above code is converted into a library  Usage Add the following in your gradle  implementation  com chabbal slidingdotsplash 1 0 2  Add the following to your Activity or Fragment layout   lt com chabbal slidingdotsplash SlidingSplashView         android id  quot   id splash quot          android layout width  quot match parent quot          android layout height  quot match parent quot          app imageResources  quot  array img id arr quot   gt   Create an integer array in strings xml e g   lt integer-array name  quot img id arr quot  gt      lt item gt  drawable img1 lt  item gt      lt item gt  drawable img2 lt  item gt      lt item gt  drawable img3 lt  item gt      lt item gt  drawable img4 lt  item gt   lt  integer-array gt   Done  Extra in order to listen page changes use addOnPageChangeListener listener   Github link

User · Answer

My handmade solution   In the layout    lt LinearLayout         android orientation  horizontal          android layout width  wrap content          android layout height  wrap content          android id    id dots            gt    And in the Activity   private final static int NUM PAGES   5  private ViewPager mViewPager  private List lt ImageView gt  dots    Override protected void onCreate Bundle savedInstanceState                   addDots       public void addDots         dots   new ArrayList lt  gt         LinearLayout dotsLayout    LinearLayout findViewById R id dots        for int i   0  i  lt  NUM PAGES  i              ImageView dot   new ImageView this           dot setImageDrawable getResources   getDrawable R drawable pager dot not selected             LinearLayout LayoutParams params   new LinearLayout LayoutParams                  LinearLayout LayoutParams WRAP CONTENT                  LinearLayout LayoutParams WRAP CONTENT                    dotsLayout addView dot  params            dots add dot              mViewPager setOnPageChangeListener new ViewPager OnPageChangeListener              Override         public void onPageScrolled int position  float positionOffset  int positionOffsetPixels                        Override         public void onPageSelected int position                selectDot position                       Override         public void onPageScrollStateChanged int state                         public void selectDot int idx        Resources res   getResources        for int i   0  i  lt  NUM PAGES  i              int drawableId    i  idx   R drawable pager dot selected   R drawable pager dot not selected           Drawable drawable   res getDrawable drawableId           dots get i  setImageDrawable drawable

User · Answer

viewPager addOnPageChangeListener new OnPageChangeListener                  Override             public void onPageSelected int position                     switch  position        case 0          img page1 setImageResource R drawable dot selected           img page2 setImageResource R drawable dot           img page3 setImageResource R drawable dot           img page4 setImageResource R drawable dot           break       case 1          img page1 setImageResource R drawable dot           img page2 setImageResource R drawable dot selected           img page3 setImageResource R drawable dot           img page4 setImageResource R drawable dot           break       case 2          img page1 setImageResource R drawable dot           img page2 setImageResource R drawable dot           img page3 setImageResource R drawable dot selected           img page4 setImageResource R drawable dot           break       case 3          img page1 setImageResource R drawable dot           img page2 setImageResource R drawable dot           img page3 setImageResource R drawable dot           img page4 setImageResource R drawable dot selected           break       default          break                                      Override             public void onPageScrolled int arg0  float arg1  int arg2                                 Override             public void onPageScrollStateChanged int arg0

User · Answer

Here is how I did this  somewhat similar to the solutions above  Just make sure you call the loadDots   method after all images are downloaded       private int dotsCount      private TextView dotsTextView         private void setupAdapter             adapter   new SomeAdapter getContext    images           viewPager setAdapter adapter           viewPager setCurrentItem 0           viewPager addOnPageChangeListener viewPagerPageChangeListener              private final ViewPager OnPageChangeListener viewPagerPageChangeListener   new ViewPager OnPageChangeListener              Override         public void onPageScrolled int position  float positionOffset  int positionOffsetPixels               Override         public void onPageSelected int position                for  int i   0  i  lt  dotsCount  i                    dotsTextView i  setTextColor Color GRAY                dotsTextView position  setTextColor Color WHITE                       Override         public void onPageScrollStateChanged int state                 protected void loadDots             dotsCount   adapter getCount            dotsTextView   new TextView dotsCount           for  int i   0  i  lt  dotsCount  i                  dotsTextView i    new TextView getContext                 dotsTextView i  setText R string dot               dotsTextView i  setTextSize 45               dotsTextView i  setTypeface null  Typeface BOLD               dotsTextView i  setTextColor android graphics Color GRAY               mDotsLayout addView dotsTextView i                      dotsTextView 0  setTextColor Color WHITE          XML   lt  xml version  1 0  encoding  utf-8   gt    lt FrameLayout     xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  wrap content  gt        lt android support v4 view ViewPager         android id    id viewPager          android layout width  match parent          android layout height  180dp          android background   00000000   gt         lt ImageView         xmlns android  http   schemas android com apk res android          android id    id introImageView          android layout width  match parent          android layout height  match parent   gt        lt LinearLayout         android id    id image count          android layout width  match parent          android layout height  match parent          android background   00000000          android gravity  center bottom          android orientation  horizontal   gt   lt  FrameLayout gt

User · Answer

I created a library to address the need for a page indicator in a ViewPager  My library contains a View called DotIndicator  To use my library  add compile  com matthew-tamlin sliding-intro-screen 3 2 0  to your gradle build file   The View can be added to your layout by adding the following        lt com matthewtamlin sliding intro screen library indicators DotIndicator             android layout width  wrap content              android layout height  wrap content              app numberOfDots YOUR INT HERE             app selectedDotIndex YOUR INT HERE  gt    The above code perfectly replicates the functionality of the dots on the Google Launcher homescreen  however if you want to further customise it then the following attributes can be added    app unselectedDotDiameter and app selectedDotDiameter to set the diameters of the dots app unselectedDotColor and app selectedDotColor to set the colors of the dots app spacingBetweenDots to change the distance between the dots app dotTransitionDuration to set the time for animating the change from small to big  and back    Additionally  the view can be created programatically using   DotIndicator indicator   new DotIndicator context     Methods exist to modify the properties  similar to the attributes  To update the indicator to show a different page as selected  just call method indicator setSelectedItem int  true  from inside ViewPager OnPageChangeListener onPageSelected int    Here s an example of it in use     If you re interested  the library was actually designed to make intro screens like the one shown in the above gif   Github source available here  https   github com MatthewTamlin SlidingIntroScreen

User · Answer

If anyone wants to build a viewPager with thumbnails as indicators  using this library could be an option  ThumbIndicator for viewPager that works also with image links as resources

User · Answer

You can try Jake Wharton s library - https   github com JakeWharton Android-ViewPagerIndicator

User · Answer

I thought of posting a simpler solution for the above problem and indicator numbers can be dynamically changed with only changing one variable value dotCounts x what I did goes like this   1  Create an xml file in drawable folder for page selected indicator named  item selected     lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android      android shape  oval  android useLevel  true      android dither  true  gt       lt size android height  8dp  android width  8dp   gt       lt solid android color   color image item selected for dots   gt   lt  shape gt    2  Create one more xml file for unselected indicator named  item unselected    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android      android shape  oval  android useLevel  true      android dither  true  gt        lt size android height  8dp  android width  8dp   gt        lt solid android color   color image item unselected for dots   gt   lt  shape gt    3  Now add add this part of the code at the place where you want to display the indicators for ex below viewPager in your Layout XML file     lt RelativeLayout         android id    id viewPagerIndicator          android layout width  match parent          android layout below    id banner pager          android layout height  wrap content          android gravity  center  gt            lt LinearLayout             android id    id viewPagerCountDots              android layout width  match parent              android layout height  match parent              android layout centerHorizontal  true              android gravity  center              android orientation  horizontal    gt           lt  RelativeLayout gt    4  Add this function on top of your activity file file where your layout is inflated or the above xml file is related to   private int dotsCount 5       No of tabs or images private ImageView   dots  LinearLayout linearLayout   private void drawPageSelectionIndicators int mPosition       if linearLayout  null            linearLayout removeAllViews              linearLayout  LinearLayout findViewById R id viewPagerCountDots       dots   new ImageView dotsCount       for  int i   0  i  lt  dotsCount  i              dots i    new ImageView context           if i  mPosition              dots i  setImageDrawable getResources   getDrawable R drawable item selected            else             dots i  setImageDrawable getResources   getDrawable R drawable item unselected             LinearLayout LayoutParams params   new LinearLayout LayoutParams                  LinearLayout LayoutParams WRAP CONTENT                  LinearLayout LayoutParams WRAP CONTENT                     params setMargins 4  0  4  0           linearLayout addView dots i   params             5  Finally in your onCreate method add  the following code to reference your layout and handle pageselected positions  drawPageSelectionIndicators 0   mPager addOnPageChangeListener new ViewPager OnPageChangeListener          Override     public void onPageScrolled int position  float positionOffset  int positionOffsetPixels                Override     public void onPageSelected int position            drawPageSelectionIndicators position               Override     public void onPageScrollStateChanged int state

User · Answer

ViewPagerIndicator has not been updated since 2012 and got several bugs that were never fixed   I finally found an alternative with this light library that displays nice dots for the viewpager  here is the link   https   github com ongakuer CircleIndicator  Easy to implement

User · Answer

Following is my proposed solution     Since we need to show only some images in the view pagers so have avoided the cumbersome use of fragments    Implemented the view page indicators  the bottom dots without any extra library or plugin  On the touch of the view page indicators the dots  also the page navigation is happening  Please don t forget to add your own images in the resources  Feel free to comment and improve upon it     A  Following is my activity main xml   lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout xmlns android  http   schemas android com apk res android      xmlns tools  http   schemas android com tools      android layout width  match parent      android layout height  match parent      android paddingBottom   dimen activity vertical margin      android paddingLeft   dimen activity horizontal margin      android paddingRight   dimen activity horizontal margin      android paddingTop   dimen activity vertical margin      tools context  schneider carouseladventure MainActivity  gt        lt android support v4 view ViewPager xmlns android  http   schemas android com apk res android          android id    id viewpager          android layout width  wrap content          android layout height  wrap content    gt        lt RelativeLayout         android id    id viewPagerIndicator          android layout width  match parent          android layout height  55dp          android layout alignParentBottom  true          android layout marginTop  5dp          android gravity  center  gt            lt LinearLayout             android id    id viewPagerCountDots              android layout width  match parent              android layout height  match parent              android layout centerHorizontal  true              android gravity  center              android orientation  horizontal    gt        lt  RelativeLayout gt     lt  RelativeLayout gt    B  pager item xml   lt  xml version  1 0  encoding  utf-8   gt    lt LinearLayout xmlns android  http   schemas android com apk res android      android orientation  vertical  android layout width  match parent      android layout height  match parent  gt        lt ImageView         android layout width  match parent          android layout height  match parent          android id    id imageView    gt   lt  LinearLayout gt    C  MainActivity java  import android support v4 view ViewPager  import android support v7 app AppCompatActivity  import android os Bundle  import android util Log  import android view LayoutInflater  import android view MotionEvent  import android view View  import android widget ImageButton  import android widget ImageView  import android widget LinearLayout   public class MainActivity extends AppCompatActivity implements ViewPager OnPageChangeListener  View OnClickListener        int   mResources    R drawable nature1  R drawable nature2  R drawable nature3  R drawable nature4              R drawable nature5  R drawable nature6             ViewPager mViewPager      private CustomPagerAdapter mAdapter      private LinearLayout pager indicator      private int dotsCount      private ImageView   dots         Override     protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout activity main            mViewPager    ViewPager  findViewById R id viewpager           pager indicator    LinearLayout  findViewById R id viewPagerCountDots           mAdapter   new CustomPagerAdapter this  mResources           mViewPager setAdapter mAdapter           mViewPager setCurrentItem 0           mViewPager setOnPageChangeListener this            setPageViewIndicator                private void setPageViewIndicator              Log d     setPageViewIndicator       called            dotsCount   mAdapter getCount            dots   new ImageView dotsCount            for  int i   0  i  lt  dotsCount  i                  dots i    new ImageView this               dots i  setImageDrawable getResources   getDrawable R drawable nonselecteditem dot                 LinearLayout LayoutParams params   new LinearLayout LayoutParams                      LinearLayout LayoutParams WRAP CONTENT                      LinearLayout LayoutParams WRAP CONTENT                             params setMargins 4  0  4  0                final int presentPosition   i              dots presentPosition  setOnTouchListener new View OnTouchListener                       Override                 public boolean onTouch View v  MotionEvent event                        mViewPager setCurrentItem presentPosition                       return true                                                   pager indicator addView dots i   params                      dots 0  setImageDrawable getResources   getDrawable R drawable selecteditem dot                Override     public void onClick View v                 Override     public void onPageScrolled int position  float positionOffset  int positionOffsetPixels                 Override     public void onPageSelected int position             Log d     onPageSelected  pos    String valueOf position            for  int i   0  i  lt  dotsCount  i                  dots i  setImageDrawable getResources   getDrawable R drawable nonselecteditem dot                       dots position  setImageDrawable getResources   getDrawable R drawable selecteditem dot             if  position   1    dotsCount               else                          Override     public void onPageScrollStateChanged int state               D  CustomPagerAdapter java      import android content Context      import android support v4 view PagerAdapter      import android view LayoutInflater      import android view View      import android view ViewGroup      import android widget ImageView      import android widget LinearLayout       public class CustomPagerAdapter extends PagerAdapter           private Context mContext          LayoutInflater mLayoutInflater          private int   mResources           public CustomPagerAdapter Context context  int   resources                mContext   context              mLayoutInflater    LayoutInflater  mContext getSystemService Context LAYOUT INFLATER SERVICE               mResources   resources                      Override         public Object instantiateItem ViewGroup container  int position                 View itemView   mLayoutInflater inflate R layout pager item container false               ImageView imageView    ImageView  itemView findViewById R id imageView               imageView setImageResource mResources position                  LinearLayout LayoutParams layoutParams   new LinearLayout LayoutParams 950  950               imageView setLayoutParams layoutParams                 container addView itemView               return itemView                      Override         public void destroyItem ViewGroup collection  int position  Object view                collection removeView  View  view                       Override         public int getCount                 return mResources length                      Override         public boolean isViewFromObject View view  Object object                return view    object                    E  selecteditem dot xml   lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android      android shape  oval  android useLevel  true      android dither  true  gt        lt size android height  12dip  android width  12dip   gt        lt solid android color   7e7e7e   gt   lt  shape gt    F  nonselecteditem dot xml      lt  xml version  1 0  encoding  utf-8   gt       lt shape xmlns android  http   schemas android com apk res android          android shape  oval  android useLevel  true          android dither  true  gt                   lt size android height  12dip  android width  12dip   gt                   lt solid android color   d3d3d3   gt       lt  shape gt

[android] Android ViewPager with bottom dots

Examples related to android

Examples related to user-interface

Examples related to android-viewpager

Examples related to android-fragmentactivity

Examples related to viewpagerindicator