5

En algunas apps, y la más conocida Tinder, el login screen tiene un carrusel de imágenes para promocionar la app o como tutorial.

¿Cómo se puede hacer este carrusel?. He buscado librerías en github pero tengo algunos problemas para encontrarlas.

¿Esta interfaz tiene algún nombre? me gustan con esos tres círculos grises. Gracias.

introducir la descripción de la imagen aquí

1

4 respuestas 4

4

Edit El nombre correcto para llamarlas es OnBoarding y no como las llamaba welcomeScreen

Recomiendo la librería AppIntro su implementación es lo más sencillo, puedes personalizar la onBoarding a tu gusto, algunas propiedades que puedes personalizar:

  • Titulo
  • Descripción
  • Foto
  • Aspecto de los botones
  • Texto de los botones
  • Color de los indicadores
  • Animación de transición entre vistas
  • Petición de los permisos en tiempo de ejecución de Android M

introducir la descripción de la imagen aquí

Si lo quieres hacer manualmente así no tener que depender de la libreria:

Sigue ese tuto o ese Otro librería Material Intro Screen y aquí su tutorial

1
  • 1
    Me encantó el descubrimiento de esta libreria , ¡gracias!
    – M121
    Commented el 30 abr. 2016 a las 22:06
4

La verdad esque si lo analizas, la presentación/carrousel es simplemente un album de imagenes con el indicador de número de paginas.

Para lograrlo puedes usar Jake's ViewPageIndicator.


Uso

(Ejemplo traducido de su web)

Incluye uno de los widgets en tu vista.

<com.viewpagerindicator.TitlePageIndicator
    android:id="@+id/titles"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent" />

En el metodo onCreate (de la vista o el fragmento) enlaza el indicador al ViewPager.

//Set the pager with an adapter
ViewPager pager = (ViewPager)findViewById(R.id.pager);
pager.setAdapter(new TestAdapter(getSupportFragmentManager()));

//Bind the title indicator to the adapter
TitlePageIndicator titleIndicator = (TitlePageIndicator)findViewById(R.id.titles);
titleIndicator.setViewPager(pager);

(Opcional) si tienes que usar un OnPageChangeListener con el paginador de la vista tienes que debes asignarlo al indicador mejor que al paginador

//continued from above
titleIndicator.setOnPageChangeListener(mPageChangeListener);

Encuentra más ejemplos en el repo de github

2

Los puedes hacer con un View Pager e implementar el código a tu manera.

import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;

public class MainActivity extends Activity {

    // Declare Variables
    ViewPager viewPager;
    PagerAdapter adapter;
    String[] rank;
    String[] country;
    String[] population;
    int[] flag;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Get the view from viewpager_main.xml
        setContentView(R.layout.viewpager_main);

        // Generate sample data
        rank = new String[] { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10" };

        country = new String[] { "China", "India", "United States",
                "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh",
                "Russia", "Japan" };

        population = new String[] { "1,354,040,000", "1,210,193,422",
                "315,761,000", "237,641,326", "193,946,886", "182,912,000",
                "170,901,000", "152,518,015", "143,369,806", "127,360,000" };

        flag = new int[] { R.drawable.china, R.drawable.india,
                R.drawable.unitedstates, R.drawable.indonesia,
                R.drawable.brazil, R.drawable.pakistan, R.drawable.nigeria,
                R.drawable.bangladesh, R.drawable.russia, R.drawable.japan };

        // Locate the ViewPager in viewpager_main.xml
        viewPager = (ViewPager) findViewById(R.id.pager);
        // Pass results to ViewPagerAdapter Class
        adapter = new ViewPagerAdapter(MainActivity.this, rank, country, population, flag);
        // Binds the Adapter to the ViewPager
        viewPager.setAdapter(adapter);

    }
}

Consulta todo el código en: http://www.androidbegin.com/tutorial/android-viewpager-gallery-images-and-texts-tutorial/

Espero te sirva algo así. Saludos.

1

Justo aquí está un link sobre lo que buscas además de que puedes encontrar muchos widgets que podrían ser de gran ayuda.

https://android-arsenal.com/details/3/2731

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.