I am working on a FragmentActivity that contains a ViewPager. ViewPager provides three fragments using the FragmentPagerAdapter. So that I can implement scroll screens using the viewpager. I can scroll through the pages and click the next button, I can also go to the next page / fragment. The following code works for me
1.WelcomeFragmentActivity.java
public class WelcomeFragmentActivity extends FragmentActivity { private List<Fragment> 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<Fragment>(); //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)); } } }); } }
2.PagerAdapterWelcome.java
public class PagerAdapterWelcome extends FragmentPagerAdapter { private List<Fragment> listFragments; public PagerAdapterWelcome(FragmentManager fm, List<Fragment> listFragments) { super(fm); this.listFragments = listFragments; } @Override public Fragment getItem(int i) { return listFragments.get(i); } @Override public int getCount() { return listFragments.size(); } }
I want to implement the following screens:
These three screens will be displayed one after the other after scrolling or pressing the next button. Changing the color of the dot tells me which fragment I'm currently working on. Please tell me how can I give animation to these points?
Edited Code
I used RadioGroup to implement the concept. Consider the following 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) { } });
It works to some extent, but I do not get the exact color mentioned in the design. Please check the following screenshot:
After adding some styles to radio biutton suggested by Ankit Aggrawal, I get the following:
