ViewPager + ListView







MyActivity.java
package com.tatoado.listviewviewpager2;

import java.util.ArrayList;
import java.util.List;

import android.support.v7.app.ActionBarActivity;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;


public class MyActivity extends ActionBarActivity {

    String[] ropa = {
            "ropfdsfdsfsda1",
            "ropa2",
            "ropa3",
            "ropa4"
    };

    int[] imagenes = {
            R.drawable.tat1,
            R.drawable.tat2,
            R.drawable.tat3
    };

    ManejadoraGaleria manejadorGaleria;
    ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);

        //lista
        ListView lista = (ListView) findViewById(R.id.listView1);
        ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, ropa );
        lista.setAdapter(adapter);

        //galeria de imagenes

        manejadorGaleria = new ManejadoraGaleria(getSupportFragmentManager());

        mViewPager = (ViewPager) findViewById(R.id.pager);
        manejadorGaleria.agregarFragmentos(FragmentosImagenes.newInstance(imagenes[0]));
        manejadorGaleria.agregarFragmentos(FragmentosImagenes.newInstance(imagenes[1]));
        manejadorGaleria.agregarFragmentos(FragmentosImagenes.newInstance(imagenes[2]));

        mViewPager.setAdapter(manejadorGaleria);

    }



    public class ManejadoraGaleria extends FragmentPagerAdapter {

        List<Fragemts> fragmentos;
        public ManejadoraGaleria(FragmentManager fm) {
            super(fm);
            fragmentos = new ArrayList();
        }

        public void agregarFragmentos(Fragment xfragmento){
            fragmentos.add(xfragmento);
        }


        @Override
        public Fragment getItem(int position) {
            return fragmentos.get(position);
        }

        @Override
        public int getCount() {
            return fragmentos.size();
        }
    }


    public static class FragmentosImagenes extends Fragment {

        private static final String ARG_IMAGE = "imagen";
        private int imagen;

        public static FragmentosImagenes newInstance(int imagen) {
            FragmentosImagenes fragment = new FragmentosImagenes();
            Bundle args = new Bundle();
            args.putInt(ARG_IMAGE, imagen);
            fragment.setArguments(args);
            fragment.setRetainInstance(true);
            return fragment;
        }

        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            if(getArguments() != null) {
                imagen = getArguments().getInt(ARG_IMAGE);
            }
        }

        public FragmentosImagenes() {
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_my, container, false);

            ImageView imagenView = (ImageView) rootView.findViewById(R.id.imageView1);
            imagenView.setImageResource(imagen);
            return rootView;
        }
    }

}


       
 

activity_my.xml
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="265dp"
    tools:context=".MyActivity" />

    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listView1"
        android:layout_gravity="center_horizontal" />

</LinearLayout>

fragment.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MyActivity$PlaceholderFragment"
    android:id="@+id/linear">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/imageView1"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>




Recomiendo ver -> Proyecto turismo


31 comentarios:

  1. Amigo, hay manera de hacer que las imagenes se muevan automaticamente ?

    ResponderEliminar
    Respuestas
    1. Hola capo, sabes que nunca se me ha ocurrido hacer automaticamente, se me ocurre rápidamente utilizar un temporizador, pero no sabría como hacerlo. Lo debería pensar un poco más. Tengo un vista un tuto que maneja el tiempo del celular y tengo el código un libro.. se llama "programación avanzada para android".
      Ahora en vacaciones lo pienso y veo si se hago algo.

      Eliminar
  2. hola ramiro utilice el código y esta muy bueno pero al utilizar dentro de un Navigation Drawer se me borra la segunda imagen alguna idea de que puedo estar haciendo mal
    saludos

    ResponderEliminar
    Respuestas
    1. tal vez te ha pasado lo mismo que a mi, se borra la segunda imagen.. pero después cuando pasas a la cuarta y volves a la segunda si aparece??.. si es así, es problema de Android Studio, si la respuesta es no, fijate si llamando justamente a esa imagen, o si los tamaños son los correctos.
      Probandolo en nuevo proyecto sin el navitaion drawer, y funcionaba bien.
      En conclusión le saque el navigation drawer
      Espero que te haya servido la respuesta.

      Eliminar
    2. Gracias por responder Ramiro.... si me ocurre el mismo error que ti ... se podría solucionar o implementar algo que se asemeje y poder trabajar con navigation drawer
      agradeceria mucho tu ayuda

      Eliminar
  3. Ramiro, me gustaría utilizar el código pero en una clase extendida de fragment, todo va bien pero cuanto instancio la clase "manejadorGaleria = new ManejadoraGaleria(getSupportFragmentManager());" obtengo un error en el método -getSupportFragmentManager()); - Me gustaría saber como solucionarlo

    ResponderEliminar
  4. Hola Ramiro, quisiera ver si se puede remplazar las imágenes como botones, mi objetivo es hacer una calculadora como la que trae android lollipop con un teclado desplegable (Swipe) de derecha a izquierda. Gracias

    ResponderEliminar
    Respuestas
    1. Como estas. Mira a eso no lo he hecho, pero te digo como encararlo.
      Miraría http://cursoandroidstudio.blogspot.com.ar/2014/07/navigation-drawer-menu-lateral.html para entender como funciona
      En el activity_main esta la cajonera que se mueve de izquierda a la derecha..
      Como vos lo queres al revés, entonces lo cambiaría de lugar y vería que pasa.
      Avisame si tuviste resultados.

      Eliminar
  5. Hola Ramiro, quisiera saber si hay una forma de hacer que cada pager tenga una manera de utilizar un clicklistener para que me lleve a distintas actividades que tengo creada. Gracias por los tutoriales!

    ResponderEliminar
    Respuestas
    1. Si, si se puede. Mira justamente hice algo así, acá esta el trozo de código que necesitas
      http://pastebin.com/eB76wfzk

      Eliminar
    2. Lo que me acabas de decir, es una buena idea para un tutorial. No he visto nada como eso, y yo lo saque de intruso, probando.

      Eliminar
    3. Gracias por responder! Yo hice algo asi parecido (http://pastebin.com/u8ELZt7Y) tambien (utilizando su tutorial para hacer el ViewPager) pero yo tengo 3 imagenes en las que quiero que cada uno, independiente , vayan a sus respectivas actividades cada vez que sean seleccionadas.

      Si, lo deberias hacer porque hay muy pocas partes donde explican como implementarlo y mas en un Fragmento.

      Saludos!

      Eliminar
    4. Le encontre la solución a mi problema. Tienes que poner un switch dentro del onClick que esta en el metodo del onCreateView. Si necesitas mostrarte como lo hice, me avisas.

      Eliminar
    5. Podrías subirlo?

      Eliminar
  6. Wi Lo Seria bueno que lo mostraras.

    ResponderEliminar
    Respuestas
    1. Ejemplo: http://cursoandroidstudio.blogspot.com.ar/2015/05/proyecto-turismo.html

      Eliminar
  7. ¿Cómo puedo implementar esto con una clase extendida de Fragment?

    ResponderEliminar
  8. Hola Amigo FElicidades!
    Solo una pregunta, como puedo obtener el nombre o la posicion del list de la imagen que se está mostrando? necesito esos datos para almacenarlos en uns BD

    ResponderEliminar
    Respuestas
    1. Hola capo, perdon por la tardanza.
      Acá hay un ejemplo http://cursoandroidstudio.blogspot.com.ar/2015/05/proyecto-turismo.html
      En este tengo un viewpager que dependiendo el que clickee me envía un listView en particular.
      Saludos.

      Eliminar
  9. Hola, soy novato en esto, muchísimas gracias por el excelente tutorial, me he descargado el archivo ZIP, y al abrirlo con android studio (ultima versión) me da este error:

    https://www.dropbox.com/s/lu64zk9fl98ukas/Error%20Android%20Studio.JPG?dl=0

    ¿que puede estar pasando?, ¿tengo algún problema con el Gradle?

    ResponderEliminar
    Respuestas
    1. Tenes que actualizarlo "Apply gradle plugin"
      sino en tu proyecto nuevo copia y pega código.
      Has una muy buena pregunta, a mi me pasa de vez en cuando.
      Cuando me vuelva a pasar subo un tuto.

      Eliminar
    2. gracias por responder, copiando y pegando el código no me funciona y si le doy a Apply gradle plugin me sale es:

      https://www.dropbox.com/s/fam13m5pcy6vwo3/Error%20Android%20Studio2.JPG?dl=0

      siento ser tan pesao, estoy aprendiendo y es dificil

      Eliminar
  10. Me tira este error:
    06-03 05:29:35.912 1934-1934/com.maya.esoj.listaviewpager I/art﹕ Not late-enabling -Xcheck:jni (already on)
    06-03 05:29:40.252 1934-1934/com.maya.esoj.listaviewpager D/AndroidRuntime﹕ Shutting down VM
    --------- beginning of crash
    06-03 05:29:40.260 1934-1934/com.maya.esoj.listaviewpager E/AndroidRuntime﹕ FATAL EXCEPTION: main
    Process: com.maya.esoj.listaviewpager, PID: 1934
    java.lang.RuntimeException: Unable to start activity ComponentInfo{com.maya.esoj.listaviewpager/com.maya.esoj.listaviewpager.MainActivity}: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.ListView.setAdapter(android.widget.ListAdapter)' on a null object reference
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2298)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2360)
    at android.app.ActivityThread.access$800(ActivityThread.java:144)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1278)
    at android.os.Handler.dispatchMessage(Handler.java:102)
    at android.os.Looper.loop(Looper.java:135)
    at android.app.ActivityThread.main(ActivityThread.java:5221)
    at java.lang.reflect.Method.invoke(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:372)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:899)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:694)
    Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.ListView.setAdapter(android.widget.ListAdapter)' on a null object reference
    at com.maya.esoj.listaviewpager.MainActivity.onCreate(MainActivity.java:45)
    at android.app.Activity.performCreate(Activity.java:5937)
    at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1105)
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2251)
                at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2360)
                at android.app.ActivityThread.access$800(ActivityThread.java:144)
                at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1278)
                at android.os.Handler.dispatchMessage(Handler.java:102)
                at android.os.Looper.loop(Looper.java:135)
                at android.app.ActivityThread.main(ActivityThread.java:5221)
                at java.lang.reflect.Method.invoke(Native Method)
                at java.lang.reflect.Method.invoke(Method.java:372)
                at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:899)
                at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:694)
    06-03 00:29:45.716 1934-1934/com.maya.esoj.listaviewpager I/Process﹕ Sending signal. PID: 1934 SIG: 9

    ResponderEliminar
  11. Amigo de lujo tu tuto!
    Solo tengo una pregunta, ¿Como puedo hacer para que me salga sin el ActionBar, es decir en fullscreen?

    ResponderEliminar
    Respuestas
    1. Así getSupportActionBar().hide();
      o así en style
      android:theme="@android:style/Theme.Holo.Light.NoActionBar"
      android:theme="@style/Theme.AppCompat.Light.NoActionBar"

      Eliminar
    2. Gracias amigo, lo intente con android:theme y si, oculta el ActionBar, luce mejor pero habrá algo para hacerlo completamente fullscreen? son ActionBar y StatusBar?

      Eliminar
  12. Hola una apregunta, como se puede hacer para que el Swipe se de forma Vertical? :)

    Saludos, excelente tutorial!

    ResponderEliminar
  13. Hola me gustaria saber como hacer para cargar imagenes desde el servidor en el vector int imagenes para crear el ViewPager + ListView desde base datos

    ResponderEliminar
  14. Hola, quería que ademas de las imágenes, el texto de abajo también se deslice, es posible? que debería cambiar del código? gracias!

    ResponderEliminar
  15. Gracias por los tutoriales, pero ayúdame en algo sumamente importante, ¿Cómo le doy acciones al ViewPager? Ej. quiero que en el slide 1 me lleve a otro activity

    ResponderEliminar