title: Animation of dots using view pager
body: <p>I am working on a FragmentActivity which contains a ViewPager. ViewPager is provided three fragments using FragmentPagerAdapter.So i am able to implement swipe screens using viewpager.I can swipe the pages and on clicking next button ,i can move to next page/fragment as well .The following code is working for me :</p>
  
  <p><strong>1.WelcomeFragmentActivity.java</strong></p>
  
  <pre><code>public class WelcomeFragmentActivity extends FragmentActivity {
      private List&lt;Fragment&gt; listFragments;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.fragment_activity_welcome);
  
          //FindViewByID
          final ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
          Button btnNext = (Button) findViewById(R.id.btnNext);
  
          //Initializing the List
          listFragments = new ArrayList&lt;Fragment&gt;();
  
          //initializing the fragments
          WelcomeOneFragment welcomeOneFragment = new WelcomeOneFragment();
          WelcomeTwoFragment welcomeTwoFragment = new WelcomeTwoFragment();
          WelcomeThreeFragment welcomeThreeFragment = new WelcomeThreeFragment();
  
          //Adding Fragments to List
          listFragments.add(welcomeOneFragment);
          listFragments.add(welcomeTwoFragment);
          listFragments.add(welcomeThreeFragment);
  
          //initializing PagerAdapterWelcome
          PagerAdapterWelcome pagerAdapterWelcome = new PagerAdapterWelcome(getSupportFragmentManager(), listFragments);
          viewPager.setAdapter(pagerAdapterWelcome);
  
          //On clicking next button move to next fragment
          btnNext.setOnClickListener(new View.OnClickListener() {
              @Override
              public void onClick(View view) {
                  Log.e("Current position", String.valueOf(viewPager.getCurrentItem()));
                  viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
                  // If view pager is displaying the 3rd fragment ,move to WelcomeActivity
                  if (viewPager.getCurrentItem() == 2) {
                      Log.e("Curent position", String.valueOf(viewPager.getCurrentItem()));
                      startActivity(new Intent(WelcomeFragmentActivity.this, WelcomeActivity.class));
                  }
              }
          });
  
      }
  }
  </code></pre>
  
  <p><strong>2.PagerAdapterWelcome.java</strong></p>
  
  <pre><code>public class PagerAdapterWelcome extends FragmentPagerAdapter {
  
      private List&lt;Fragment&gt; listFragments;
  
  
      public PagerAdapterWelcome(FragmentManager fm, List&lt;Fragment&gt; listFragments) {
          super(fm);
          this.listFragments = listFragments;
      }
  
      @Override
      public Fragment getItem(int i) {
          return listFragments.get(i);
      }
  
      @Override
      public int getCount() {
          return listFragments.size();
      }
  }
  </code></pre>
  
  <p>I want to implement the following screens:</p>
  
  <p><a href="https://i.stack.imgur.com/p4C5Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p4C5Z.png" alt="One"></a></p>
  
  <p><a href="https://i.stack.imgur.com/2ZbBy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2ZbBy.png" alt="Two"></a></p>
  
  <p><a href="https://i.stack.imgur.com/sJeZ4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sJeZ4.png" alt="enter image description here"></a></p>
  
  <p>These three screens will be displayed one after another after swiping or on clicking next button .Orange color of the dot is telling me on which fragment i am currently working on .Please guide me how can i give animation to these dots ?</p>
  
  <p><strong>Edited Code</strong></p>
  
  <p>I have used the RadioGroup to implement the concept.Consider the following code :</p>
  
  <pre><code>viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
          @Override
          public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  
          }
  
          @Override
          public void onPageSelected(int position) {
              position = viewPager.getCurrentItem();
              Log.e("Position", String.valueOf(position));
              if (position == 0)
                  radioGroup.check(R.id.radioBtnOne);
              else if (position == 1) {
                  radioGroup.check(R.id.radioBtnTwo);
              } else
                  radioGroup.check(R.id.radioBtnThree);
          }
  
          @Override
          public void onPageScrollStateChanged(int state) {
  
          }
      });
  </code></pre>
  
  <p>It is working to some extent but i am not getting the exact color that is mentioned in the design .Please check the following screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/rniPd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rniPd.png" alt="Screenshot"></a></p>
  
  <p>After adding some styles to radio biutton suggested by Ankit Aggrawal i am getting the following :</p>
  
  <p><a href="https://i.stack.imgur.com/NdDQz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NdDQz.png" alt="enter image description here"></a></p>