DeepakR DeepakR - 3 months ago 21
Android Question

Animation of dots using view pager

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:

One

Two

enter image description here

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:

Screenshot

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

enter image description here

Answer

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>