Анимация точек с использованием представления пейджера

Question

Я работаю над функцией FragmentActivity, которая содержит ViewPager. ViewPager предоставляет три фрагмента, используя FragmentPagerAdapter. Так что я могу реализовать экраны прокрутки с помощью viewpager.I могу прокрутить страницы и нажать следующую кнопку, я также могу перейти на следующую страницу/фрагмент. Следующий код работает для меня:

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(); 
    } 
} 

Я хочу имп lement следующие экраны:

Эти три экрана будут отображаться одна за другой после считывания или нажав кнопку рядом .Orange цвет точка говорит мне на какой фрагмент я сейчас работаю. Пожалуйста, расскажите мне, как я могу дать анимацию этим точкам?

Edited Код

Я использовал RadioGroup для реализации этой concept.Consider следующий код:

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) { 

     } 
    }); 

Он работает в какой-то степени, но я не получаю точный цвет, упоминается в проекте .Please проверить следующий скриншот:

После добавления некоторых стилей к радио biutton предложенных Ankit Aggrawal я получаю следующее:

Answer 1

Я достиг этого с помощью RadioGroup. Расположите эту радиогруппу чуть выше вашего viewpager, используя относительный макет. Создайте группу радиостанций с требуемым количеством точек в качестве переключателей. Не нажимайте на радио кнопки.

EDIT: Ниже приведен полный рабочий код.

Создайте свой макет, как этот

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

Сейчас в ViewPager, поставить 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) { 

      } 
     }); 

Далее следует селектор для радиокнопки 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> 

Теперь выбранная кнопка создайте это 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> 

Аналогично для неотобранной кнопки создать этот 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> 

Answer 2

Вы можете использовать ViewPagerIndicator Jake Wharton, чтобы добавить название или простые круги для каждой вкладки в вашем ViewPager.

Jake Wharton предоставил кучу кода примера на GitHub, вы также можете обратиться к usage section на сайте Jake Wharton.

Answer 3

Использование ViewPagerCircleIndicator библиотеки. http://viewpagerindicator.com/

Answer 4

Эта библиотека может помочь вам .... https://github.com/PaoloRotolo/AppIntro/