Animazione di punti usando view pager

Question

Sto lavorando su FragmentActivity che contiene un ViewPager. ViewPager fornisce tre frammenti usando FragmentPagerAdapter.So sono in grado di implementare schermate di scorrimento usando viewpager.Posso scorrere le pagine e facendo clic sul pulsante Avanti, posso passare alla pagina successiva/frammento. Il seguente codice funziona per 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(); 
    } 
} 

voglio imp lement seguenti schermate:

Questi tre schermi saranno visualizzati uno dopo l'altro dopo la strisciata o facendo clic sul pulsante successivo colore .orange del punto mi sta dicendo su su quale frammento sto lavorando attualmente. Per favore guidami come posso dare l'animazione a questi punti?

cura Codice

ho usato il RadioGroup per implementare il concept.Consider il seguente codice:

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

     } 
    }); 

Si sta lavorando in una certa misura, ma non ricevo il colore esatto che è menzionato nella progettazione Controlli prego la seguente schermata:

Dopo aver aggiunto alcuni stili a biutton Radio suggerite da Ankit Aggrawal sto ottenendo il seguente:

Answer 1

ho raggiunto questo utilizzando RadioGroup. Posiziona quel gruppo radio appena sopra il tuo viewpager usando il layout relativo. Crea un gruppo radio con il numero richiesto di punti come pulsanti di opzione. Non dare alcun testo ai pulsanti di opzione.

MODIFICA: Di seguito è riportato il codice completamente funzionante.

creare il layout come questo

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

Ora, nel viewpager, mettere un 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) { 

      } 
     }); 

seguito è il selettore per pulsante di scelta 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> 

Ora, per pulsante selezionato crea questo 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> 

Allo stesso modo per il tasto deselezionato creare questa 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

È possibile utilizzare ViewPagerIndicator di Jake Wharton per aggiungere i titoli oi cerchi semplici per ogni scheda nel ViewPager.

Jake Wharton ha fornito una serie di codice di esempio su GitHub, è inoltre possibile fare riferimento allo usage section sul sito di Jake Wharton.

Answer 3

Usa ViewPagerCircleIndicator Biblioteca. http://viewpagerindicator.com/

Answer 4

Questa libreria può aiutare .... https://github.com/PaoloRotolo/AppIntro/