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/