Animation of dots using view pager

Question

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 :

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 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 ?

Edited Code

I have used the 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 is working to some extent but i am not getting the exact color that is mentioned in the design .Please check the following screenshot:

After adding some styles to radio biutton suggested by Ankit Aggrawal i am getting the following :

http://www.androprogrammer.com/2015/06/view-pager-with-circular-indicator.html — IntelliJ Amiya, Feb 15 '16 at 06:40
http://nilukad.blogspot.in/2014/01/image-gallary-with-dot-indicater.html — IntelliJ Amiya, Feb 15 '16 at 06:45
Check out my solution: http://stackoverflow.com/a/38459310/4631935 — RediOne1, Oct 17 '16 at 13:50

Ankit Aggarwal · Accepted Answer · 2016-02-15T12:09:56.183

I achieved this by using radiogroup. Position that radio group just above your viewpager using relative layout. Create a radio group with the required number of dots as radio buttons. Do not give any text to the radio buttons.

EDIT : Below is the fully working code.

Create your layout like this

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal"
        android:id="@+id/radioGroup">

        <RadioButton
            android:id="@+id/radioBtnOne"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:background="@drawable/button_selector"
            android:button="@null"/>

        <RadioButton
            android:id="@+id/radioBtnTwo"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:background="@drawable/button_selector"
            android:button="@null"/>

        <RadioButton
            android:id="@+id/radioBtnThree"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:background="@drawable/button_selector"
            android:button="@null"/>

    </RadioGroup>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

Now in the viewpager, put a onPageChangeListener

viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                radioGroup.check(radioGroup.getChildAt(position).getId());
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

Following is the selector for radio button button_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
     <item
        android:state_checked="true"
        android:state_pressed="false"
        android:drawable="@drawable/toggle_button_selected"/>

    <item
        android:state_checked="false"
        android:state_pressed="false"
        android:drawable="@drawable/toggle_button_unselected"/>

    <item
        android:state_checked="true"
        android:state_pressed="true"
        android:drawable="@drawable/toggle_button_selected"/>

    <item
        android:state_checked="false"
        android:state_pressed="true"
        android:drawable="@drawable/toggle_button_unselected"/>

</selector>

Now for selected button create this toggle_button_selected_drawable.xml

<?xml version="1.0" encoding="utf-8" ?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="10dp" />
    <solid
        android:color="@color/your_selection_color" />
</shape>

Similarly for unselected button create this toggle_button_unselected_drawable.xml

<?xml version="1.0" encoding="utf-8" ?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="10dp" />
    <solid
        android:color="@color/grey" />
</shape>

I have used your concept but its not working properly as i am not able to set proper color to radio button .Please Check my edited code . — Deepak Rattan, Feb 15 '16 at 09:49
Put the code also for radio button selector. Check it now and tell me if you are able to implement it or not — Ankit Aggarwal, Feb 15 '16 at 10:39
I have used like this radioBtnOne.setButtonTintList(ColorStateList.valueOf(textColor)); It is working for me but the color of the boundary of all radio button is also yellow. — Deepak Rattan, Feb 15 '16 at 10:50
I have never used radioBtnOne.setButtonTintList(ColorStateList.valueOf(textColor)); so i am not sure whether it will work or not. But check the updated code by me it will surely work. I've successfully used this in 3 apps. — Ankit Aggarwal, Feb 15 '16 at 10:53
After adding styles ,i am getting the weired radio button color.Please see the edited code for screenshot — Deepak Rattan, Feb 15 '16 at 11:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/103473/discussion-between-deepakr-and-ankit-aggarwal). — Deepak Rattan, Feb 15 '16 at 11:21
Warning! This solution uses radio buttons, so it will look not like first orange screenshots. It rather looks like gray ones, a circle inside a circle. Don't lose time! — CoolMind, Aug 16 '16 at 09:19
@CoolMind If you check carefully than the radio buttons have been customized by usin `toggle_button_selected_drawable.xml` and `toggle_button_unselected_drawable.xml`. These two drawables are used to make them look like first orange screenshots not the second ones. — Ankit Aggarwal, Aug 16 '16 at 14:14
@AnkitAggarwal, excuse me, man, if I was mistaken. I also tried to apply these XMLs (but with oval shapes) and got non-desired result. But I haven't advanced too much, maybe, that was my mistake. — CoolMind, Aug 16 '16 at 14:25

score 1 · Answer 2 · answered Feb 15 '16 at 06:59

1

This library may help you.... https://github.com/PaoloRotolo/AppIntro/

answered Feb 15 '16 at 06:59

Anand Kumar Jha

614
9
23

score 0 · Answer 3 · answered Feb 15 '16 at 06:40

0

You can use Jake Wharton's ViewPagerIndicator to add the titles or simple circles for each tab in your ViewPager.

Jake Wharton has supplied a bunch of sample code on GitHub, you can also refer to the usage section on the Jake Wharton's site.

answered Feb 15 '16 at 06:40

Shoeb Siddique

2,805
1
22
42

score 0 · Answer 4 · answered Feb 15 '16 at 06:44

0

Use ViewPagerCircleIndicator Library. http://viewpagerindicator.com/

answered Feb 15 '16 at 06:44

Nauman Ali Shah

163
11

Animation of dots using view pager

4 Answers4