Onclick Listener en RecyclerView

Clase 42 de 96 • Curso Definitivo de Android 2016

Clase anteriorSiguiente clase

Resumen

Veamos cómo trabajar onClick en un RecyclerView y con esto terminar nuestra vista de detalles.

Recuerda

Con .onBindView tenemos acceso a cada view, en ese momento podemos setear un dato o añadir un listener.

César Serrano

student•

Ami también se me detenía la aplicación cuando le daba click a la imagen del card y descubrí que mi error era poner view con minúscula en el archivo activity_picture_deatil.xml
(la parte del separador)
<View (DEBE IR EN MAYUSCULAS)
android:layout_width=“match_parent"
android:layout_height=”@dimen/height_divider"
android:background="@color/backgroundtext_card"/>

Juliana Maria Peña Suarez

student•

Me funcionó, muchas gracias 😄

Gabriel Maximowicz

student•

Mismo error… misma solucion, muchas gracias!

Cristian Poveda

student•

Buenas Noches tengo el problema que al ejecutar la app y presionar sobre la pictureCard la aplicación se detiene.

Edgar Moises Valdez Faria

student•

Me pasa igual. Has encontrado el problema ?

Ann Code

teacher•

Muestrame tu Log completo para saber por qué se detiene 😃

Luis Gabriel Orellana Francisco

student•

El error al hacer click en la tarjeta radica en que no se le colocó un id al “Toolbar” que se encuentra dentro del “CollapsingToolbarLayout”

<com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="@color/colorPrimary">

            <ImageView
                android:id="@+id/imageheader"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:background="@drawable/image"
                app:layout_collapseMode="parallax"/>
            
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbarDetail"      **********AQUÍ**********
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"/>

Después debemos anidarlo en el “findViewById”

public void showToolbar(String tittle, boolean upButton){
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbarDetail);
        setSupportActionBar(toolbar);
        getSupportActionBar().setTitle(tittle);
        getSupportActionBar().setDisplayHomeAsUpEnabled(upButton);
        CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbar);
    }
}

Wilson Gustavo Chango Sailema

student•

ACTIVITY_PICTURE_DETAIL.XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".view.PictureDetailActivity">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/appbarlayout_heigth"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="@color/colorPrimary"
            >
            <ImageView
                android:id="@+id/imageHeader"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:background="@drawable/atacames"
                app:layout_collapseMode="parallax"
                />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"
                />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="@dimen/activity_vertival_margin">
            <TextView
                android:id="@+id/userNameDetail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="@dimen/textsize_usernamedetail"
                android:text="@string/username_card"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_vertival_margin"/>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingBottom="@dimen/activity_vertival_margin"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                >
                <TextView
                    android:id="@+id/likeNumberDetail"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="@dimen/textsize_likenumberdetail"
                    android:text="10"
                   />
                <TextView
                    android:id="@+id/secondWordDetail"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="@dimen/textsize_likenumberdetail"
                    android:text="@string/secondword_detail"
                    android:layout_marginLeft="@dimen/marginleft_secondword"
                    />
            </LinearLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="@dimen/height_divider"
                android:background="@android:color/darker_gray"
                />
            <TextView
                android:id="@+id/titleImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="@dimen/textsize_likenumberdetail"
                android:text="@string/titleimagedetail"
                android:layout_gravity="center_horizontal"
                android:textStyle="bold"
                android:paddingTop="@dimen/paddingtop_titleimagedetail"
                />
            <TextView
                android:id="@+id/textContentImageDetail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="@dimen/textsize_likenumberdetail"
                android:text="@string/lorem"
                android:layout_gravity="center_horizontal"
                android:paddingTop="@dimen/paddingtop_titleimagedetail"
                android:paddingLeft="@dimen/paddingtop_horizontal_textcontentdetail"
                android:paddingRight="@dimen/paddingtop_horizontal_textcontentdetail"
                />

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

PictureDetailActivity.java

package com.pucese.pucesegram.view;
import android.content.Intent;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.EditText;

import com.pucese.pucesegram.R;
public class PictureDetailActivity extends AppCompatActivity
{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_picture_detail);
        showToolbar(" ",true);
    }
    public void showToolbar(String tittle, boolean upButton)
    {
        Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setTitle(tittle);
        getSupportActionBar().setDisplayHomeAsUpEnabled(upButton);
        CollapsingToolbarLayout collapsingToolbarLayout=(CollapsingToolbarLayout)findViewById(R.id.collapsingToolbar);
    }

}

PictureAdapterRecyclerView.java

package com.pucese.pucesegram.adapter;

import android.app.Activity;
import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.pucese.pucesegram.R;
import com.pucese.pucesegram.model.Picture;
import com.pucese.pucesegram.view.PictureDetailActivity;
import com.squareup.picasso.Picasso;

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

public class PictureAdapterRecyclerView extends  RecyclerView.Adapter<PictureAdapterRecyclerView.PictureViewHolder>
{
    private ArrayList<Picture> pictures;
    private int resource;
    private Activity activity;

    public PictureAdapterRecyclerView(ArrayList<Picture> pictures, int resource, Activity activity) {
        this.pictures = pictures;
        this.resource = resource;
        this.activity = activity;
    }

    @NonNull
    @Override
    public PictureViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(resource,parent,false);
        return new PictureViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull PictureViewHolder holder, int position) {

        Picture picture=pictures.get(position);
        holder.usernameCard.setText(picture.getUsername());
        holder.timeCard.setText(picture.getTime());
        holder.likeNumberCard.setText(picture.getLike_number());
        Picasso.get().load(picture.getPicture()).into(holder.picturecard);

        holder.picturecard.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view)
            {
                Intent intent=new Intent(activity, PictureDetailActivity.class);
                activity.startActivity(intent);
            }
        });

    }

    @Override
    public int getItemCount() {
        return pictures.size();
    }

    public class PictureViewHolder extends RecyclerView.ViewHolder
    {
        private ImageView picturecard;
        private TextView usernameCard;
        private TextView timeCard;
        private TextView likeNumberCard;

        public PictureViewHolder(@NonNull View itemView)
        {
            super(itemView);
            picturecard=(ImageView) itemView.findViewById(R.id.pictureCard);
            usernameCard=(TextView) itemView.findViewById(R.id.userNameCard);
            timeCard=(TextView) itemView.findViewById(R.id.timeCard);
            likeNumberCard=(TextView) itemView.findViewById(R.id.likeNumberCard);

        }
    }
}

Alejandro Lindarte Castro

student•

Para las personas que tengan problemas con el boton de UP

("getSupportActionBar().setDisplayHomeAsUpEnabled(true)")

que no aparece, no se si no vi bien esa parte del video en al action bar, pero me faltaba el siguiente atributo en la toolbar (milayout_toolbar.xml)

app:navigationIcon="?attr/homeAsUpIndicator"

Camilo Acevedo Escalante

student•

Hola,

Quería preguntar, en caso de que se quisiera incluir en mi interfaz el navigationbar en la parte inferior, debo colocar la propiedad paddingBottom en el NestedScrollView y ahora si utilizar el include con dicho elemento?

Camilo Acevedo Escalante

student•

Ya lo resolví, creo que de una manera poco practica pero funciono, lo que hice fue hacer un include del bottom_navigation_bar al final y le coloque un background color a este. Si alguien sabe de una solución mejor ojala me la compartan.

Saludos!

Camilo Acevedo Escalante

student•

Alguien tiene problemas con el efecto del collapse?

David Felipe Huertas

student•

Yo tuve varios, ¿qué problema tienes?

Camilo Acevedo Escalante

student•

Hola David, en realidad ya lo resolví, el tema era que yo si implemente el bottombar, pero esta quedaba por debajo del layout que contenía los textView, lo resolví usando el background color a ese bottombar, ahora mi problema va con el recycler view, ya que estoy buscando la forma de que cargue dentro del PictureDetail la información de esa card.

Si me puedes dar una luz, gracias!

Carlos Fernando Pinzón Jáimes

student•

ATENTOS, para los que lleguen a éste punto o los que ya hayan pasado y se les cierre la app por éste error:
Caused by: java.lang.NullPointerException: Attempt to invoke virtual method ‘void android.support.v7.app.ActionBar.setTitle(java.lang.CharSequence)’ on a null object reference, cuando dan click a la imagen.
Pasa lo siguiente, Anahí copió el método showToolbar(args) que usamos en la activity create account, al copiar el método la línea de findViewById(R.id.toolbar) apunta al toolbar layout que creamos en clases anteriores, según entiendo del error, se hace referencia a una vista nula, vista que NO hemos añadido con include sino que armamos a puño y letra en xml en la activity_picture_detail.xml.

Para apuntar a nuestra toolbar que creamos a puño y letra en activity_picture_detail.xml y no la otra toolbar generica que tenemos en actionbar-toolbar.xml , lo que se hace es cambiar el id de la toolbar de la activity detalle (cualquiera que diga otra cosa, en mi caso android:id="@+id/detailToolbar") y listo, la aplicación me corrió perfecto.

😃

Celso Espinoza

student•

Recomendación:
Poner tu onClickListener en el constructor del ViewHolder, ya que al ponerlo en el onBindViewHolver éste se estará inicializando cada vez que se cree un view y será un desperdicio de procesamiento y memoria.

Los datos del modelo lo pueden pasar haciendo viewholder.itemview.setTag(object); y en el constructor del viewHolder llamarlo con itemview.getTag();

Saludos…

Celso Espinoza

student•

viewholder.itemView.setTag(object);

itemView.getTag();

Vespaciano Forero Sanchez

student•

Por que me sale la imagen con esta franja negra?

Diego Olivera

student•

podrías mostrar el código? tal vez sea un ajuste de los colores

Julio Camacho

student•

Una ptegunta, esto vine siendo como los videos de YouTube? Son cards view en un recyclerView?

Alfonso Navarro

company_admin•

Bueno a mi me funciona todo a excepcion del Efecto de CollapsingToolbarLayout, porq porq estaba utilizando ConstraintLayout, se lo quite y listo funciono.

He de decir q hasta el momento todo lo habia trabajado con ConstraintLayout.

Busque en la documentacion de Android sobre CollapsingToolbarLayout y el ejemplo q tienen en su sitio Web esta sin el ConstraintLayout...

Juan Guillermo Perez Cardozo

student•

muchas gracias annCode me salio de una y al primer intento.

Luis Luis

student•

Como puedo hacer para que cada carta pase a un activity diferente? .

Jose Manuel Moreno Garrido

student•

Hola compañeros.

A ver si podéis echarme una mano. He seguido, creo que bien, todos los pasos que se han dado en esta lección, pero por mas que lo reviso no consigo encontrar el problema por el que el UpButton no me aparece en la actividad activity_picture_detail.

Realmente el botón está y lo puedo pulsar, pero este no es visible.

Por otro lado tampoco consigo ese efecto de disolución de la imagen al ser colapsada.

Por favor, echadle un vistazo a este screencast en el que muestro lo que me ocurre:

https://screencast-o-matic.com/watch/cbQtDKIUL2

Jose Manuel Moreno Garrido

student•

Me contesto para el que le pueda ocurrir lo mismo.

El caso es que el problema no era de sintaxis, ni que faltara ningún atributo, simplemente era un problema de orden. Dentro del CollapsingToolbarLayout se encuentran nuestro Toolbar y el ImageView, pero para que no ocurra lo que me ocurría, el ImageView debe montarse antes que el ToolBar, y no al revés, ya que parece que al construirse la capa del ImageView por encima del ToolBar, esta imagen ocultaba tanto el botón de “atrás” como el efecto del contentScrim.

Espero que les sea de ayuda.

Camilo Acevedo Escalante

student•

Compañero, gracias por tu comentario, pude percatarme de 2 errores con respecto al toolbar y al efecto parallax que no estaba funcionando bien 😄. Te debo una!

Mauricio Quirós Bravo

student•

Así como está, cuando entramos al detalle de una imagen y usamos el botón de Up, nos devolverá hasta arriba del RecyclerView. Para solucionar esto podemos hacer uso de la propiedad android:launchMode de activity en el AndroidManifest en la actividad root (en este caso llamada ContainerActivity).

<activity android:name="activityName" android:launchMode="singleTop" ... />

Más información acerca de las propiedades de activity

Luis Alberto Bardales Mendo

student•

¿Cómo sabes quien es propiedad de android y quién es propiedad de app?

john fredy quimbaya orozco

student•

Amigos tengo problema al crear el onclick en mi adapter

public class AdapterRecyclerView extends RecyclerView.Adapter<AdapterRecyclerView.PictureViewHolder>{

    Context context;
    private AdapterView.OnItemClickListener clickListener;
    private List<Picture> items;




    public static  class PictureViewHolder extends RecyclerView.ViewHolder
    {
        // Campos respectivos de un item
        //private ImageView pictureCard;
        private View view;
        public ImageView Picture;
        public PictureViewHolder(View v) {
            super(v);
            //llamar el layout de la card
            Picture = (ImageView) v.findViewById(R.id.picture_Card);




        }


    }
    public AdapterRecyclerView(List<Picture> items,AdapterView.OnItemClickListener clickListener) {

        this.items = items;
        this.clickListener = clickListener;
    }
    @Override
    public int getItemCount() {
        return items.size();
    }


    @Override
    public PictureViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View v = LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.cardview_picture, viewGroup, false);
        return new PictureViewHolder(v);
    }

    @Override
    public void onBindViewHolder(PictureViewHolder viewHolder, int position) {


        viewHolder.Picture.setImageResource(items.get(position).getPicture());

    }








}```

Uriel Ramírez

student•

Lo primero que te quería comentar es la diferencia en el recycler si estás en un fragmento o en un activity. Siempre en el constructor de tu adaptador debes de mandar un contexto.

¿Cómo mando ese contexto?, es fácil:

Desde un activity el contexto lo obtienes mediante la palabra this:

recyclerView.setAdapter(new Platzisheduleadapter( datos, plantilla , this));

Desde un fragment el contexto lo obtienes mediante el metodo getActivity() :

recyclerView.setAdapter(new Platzisheduleadapter( datos, plantilla ,getActivity()));

Ahora el tema del OnClick es aparte y no importa si es un fragment o un activity, este se configura siempre en el método onBindViewHolder de tu adapter.

En el Holder, tienes acceso a cada widget de tu recycler, entonces ahí es donde haces un setOnCickListener

 @Override
    public void onBindViewHolder(PictureViewHolder holder, int position) {
        Picture picture = pictures.get(position);
        holder.usernameCard.setText(picture.getUserName());
        holder.timeCard.setText(picture.getTime());
        holder.likeNumberCard.setText(picture.getLike_number());
        Picasso.with(activity).load(picture.getPicture()).into(holder.pictureCard);

        holder.pictureCard.setOnClickListener(new View.OnClickListener() {   // aquí declaras tu listener 
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(activity, PictureDetailActivity.class);

                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
                    Explode explode = new Explode();
                    explode.setDuration(1000);
                    activity.getWindow().setExitTransition(explode);
                    activity.startActivity(intent,
                            ActivityOptionsCompat.makeSceneTransitionAnimation(activity, view, activity.getString(R.string.transitionname_picture)).toBundle());

                }else {
                    activity.startActivity(intent);
                }


            }
        });

    }

john fredy quimbaya orozco

student•

Gracias uriel me funciono, pero tengo problemas con los intent eso ya es diferente

Rolando García Matías

student•

Hola Anahi y si quiero q cada cadview me lleve a una diferente actividad se le implemeta un swicth al onClick?

Juan Millafilo

student•

Falto el FloatingBotton 😦

Ann Code

teacher•

Ya viene ya viene 😃