android - elementos - Animación de puntos usando el buscapersonas

animacion del punto de venta pdf

Question

Estoy trabajando en una FragmentActivity que contiene un ViewPager. A ViewPager se le proporcionan tres fragmentos con FragmentPagerAdapter. Así que puedo implementar pantallas de deslizamiento con viewpager. Puedo deslizar las páginas y al hacer clic en el botón siguiente, puedo pasar a la siguiente página / fragmento también. El siguiente código me funciona:

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

Quiero implementar las siguientes pantallas:

Estas tres pantallas se mostrarán una después de otra después de deslizar o al hacer clic en el botón siguiente. El color naranja del punto me dice en qué fragmento estoy trabajando actualmente. Por favor, guíame cómo puedo dar animación a estos puntos.

Código editado

He utilizado RadioGroup para implementar el concepto. Considere el siguiente código:

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

Está funcionando hasta cierto punto, pero no obtengo el color exacto que se menciona en el diseño. Compruebe la siguiente captura de pantalla:

Después de agregar algunos estilos al biotono de radio sugerido por Ankit Aggrawal, recibo lo siguiente:

Answer 1

Esta biblioteca puede ayudarte ... https://github.com/PaoloRotolo/AppIntro/

Answer 2

Lo logré usando un radiogrupo. Posiciona ese grupo de radio justo encima de tu viewpager usando el diseño relativo. Cree un grupo de radio con el número requerido de puntos como botones de opción. No le des ningún texto a los botones de radio.

EDITAR: A continuación se muestra el código completamente funcional.

Crea tu diseño como este

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

Ahora en el viewpager, ponga 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) {
}
});

A continuación se muestra el selector para el botón de opción 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>

Ahora para el botón seleccionado crea esto 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>

Del mismo modo para el botón no seleccionado, crea este 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 3

Puede usar ViewPagerIndicator de Jake Wharton para agregar títulos o círculos simples para cada pestaña en su ViewPager.

Jake Wharton ha proporcionado un montón de código de muestra en GitHub , también puede consultar la sección de uso en el sitio de Jake Wharton.

Answer 4

Use la biblioteca ViewPagerCircleIndicator. http://viewpagerindicator.com/