Clicking CardView to load a fragment

Question

I'm having trouble with implementing clickable cards with my RecyclerView. I want to get the position of which card was clicked and then load the proper fragment.

I did take a look at this post and spent almost 30 minutes trying to make sense of the code and implementing it myself but I gave up when I realized how many mistakes were in the snippet.

Here is my adapter class.

public class RVAdapter extends RecyclerView.Adapter<RVAdapter.PersonViewHolder> {

public static CardView cv;

public static class PersonViewHolder extends RecyclerView.ViewHolder {
    TextView chapterName;
    TextView chapterNumber;
    // ImageView chapterPhoto;

    public PersonViewHolder(View itemView) {
        super(itemView);

        cv = (CardView) itemView.findViewById(R.id.cv);
        chapterName = (TextView) itemView.findViewById(R.id.chapter_name);
        chapterNumber = (TextView) itemView.findViewById(R.id.chapter_number);
        // chapterPhoto = (ImageView) itemView.findViewById(R.id.person_photo);

    }
}

List<Chapter> chapters;

RVAdapter(List<Chapter> chapters) {
    this.chapters = chapters;
}

@Override
public void onAttachedToRecyclerView(RecyclerView recyclerView) {
    super.onAttachedToRecyclerView(recyclerView);
}

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

@Override
public void onBindViewHolder(PersonViewHolder personViewHolder, int i) {
    personViewHolder.chapterName.setText(chapters.get(i).chapterName);
    personViewHolder.chapterNumber.setText(chapters.get(i).chapterNumber);
    // personViewHolder.chapterPhoto.setImageResource(persons.get(i).photoId);
}

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

I've looked through every implementation on StackOverflow and either I'm having tunnel vision or none of them are actually working. I know there are plenty of posts on the side, but I did spend more than a bit of time searching for the answer before asking this question, so all of those links are purple for me.

All help is appreciated, and I would be more than happy to post any other code that may be of help!

score 2 · Accepted Answer · answered Jun 09 '15 at 06:27

todo this you need to add the OnClickListener to your ViewHolder with an own Clicklistener, like this:

new Interface:

public interface PersonViewHolderClickListener {

    void onItemClick(long id);
}

and change your RVAdapter class like this:

protected Context mContext;

RVAdapter(Context context, List<Chapter> chapters) {
    mContext = context;
    this.chapters = chapters;
}

public static class PersonViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
    TextView chapterName;
    TextView chapterNumber;
    // ImageView chapterPhoto;

    private long PERSONId;

    public PersonViewHolderClickListener clickListener;

    public PersonViewHolder(View itemView,PersonViewHolderClickListener clickListener) {
        super(itemView);

        cv = (CardView) itemView.findViewById(R.id.cv);
        chapterName = (TextView) itemView.findViewById(R.id.chapter_name);
        chapterNumber = (TextView) itemView.findViewById(R.id.chapter_number);
        // chapterPhoto = (ImageView) itemView.findViewById(R.id.person_photo);

        this.clickListener = clickListener;

        view.setOnClickListener(this);  
    }

    @Override
    public void onClick(View v) {
        clickListener.onItemClick(PERSONId);
    }
}

@Override
public PersonViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
    View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item, viewGroup, false);
    PersonViewHolder pvh = new PersonViewHolder(v, new PersonViewHolderClickListener() {

        @Override
        public void onItemClick(long id) {
            Intent intent = new Intent(mContext, YOURActivity.class);
            intent.putExtra(EXTRA_PERSON_ID, id);
            mContext.startActivity(intent);
        }
    });
    return pvh;
}

@Override
public void onBindViewHolder(PersonViewHolder personViewHolder, int i) {
    personViewHolder.chapterName.setText(chapters.get(i).chapterName);
    personViewHolder.chapterNumber.setText(chapters.get(i).chapterNumber);
    // personViewHolder.chapterPhoto.setImageResource(persons.get(i).photoId);
    personViewHolder.PERSONId = i;
    }

You've provided me the code and it seems like this is what I was trying to figure out, but I need an explanation of how to load the appropriate activity based on the position of the card. I think that has something to do with the Intent extra, but I'm not sure. — wasimsandhu, Jun 09 '15 at 19:50
The reason I need an explanation is because the code doesn't seem to work without the Intent extra and with it, I'm getting this error: `java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.String android.content.Context.getPackageName()' on a null object reference, at com.wsandhu.studyapwh.RVAdapter$1.onItemClick(RVAdapter.java:74), at com.wsandhu.studyapwh.RVAdapter$PersonViewHolder.onClick(RVAdapter.java:52)` — wasimsandhu, Jun 09 '15 at 19:52
in onBindViewHolder you get the positions as: i, this value is stored inside the viewholder as: PERSONId, in onItemClick you get the PERSONId stored inside the ViewHolder as: id, and this was the original position of the card which you clicked. i guess that you use one Activity which will just display one specific Item ? that is the reason why i put the id / position of this item as an extra into the intent of this Activity, so in your activity you can read this extra and now which item to show, — fmt.Println.MKO, Jun 09 '15 at 20:29
well the code you provided doesn't work... the error I mentioned is still prevalent. — wasimsandhu, Jun 09 '15 at 23:46
the error look like you don't pass you Activity in which you initiate the adapter as a context to your Adapter, you see: `RVAdapter(Context context, List chapters)` when you call this, you have to pass a valid context, based on the exception, it looks likes you passed a null there — fmt.Println.MKO, Jun 10 '15 at 06:27
You're right, thank you! I'll mark your answer as the solution and post my full code as a separate answer so others won't make the same mistake. — wasimsandhu, Jun 12 '15 at 19:20
am I the only one here that thinking, you are confusing "loading fragment from recyclerview" with "loading activity from recyclerview" ? — Dika, Apr 01 '17 at 08:18

score 1 · Answer 2 · answered Jun 12 '15 at 19:24

My full working code, with thanks to @fmt.Println.MKO.

RVAdapter.java:

import android.content.Context;
import android.content.Intent;
import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

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

public class RVAdapter extends RecyclerView.Adapter<RVAdapter.PersonViewHolder> implements View.OnClickListener {

    Context mContext;

    RVAdapter(Context context, List<Chapter> chapters) {
        mContext = context;
        this.chapters = chapters;
    }

    public static CardView cv;
    public static int position;

    public class PersonViewHolder extends RecyclerView.ViewHolder {
        TextView chapterName;
        TextView chapterNumber;
        // ImageView chapterPhoto;

        public PersonViewHolder(View itemView) {
            super(itemView);

            cv = (CardView) itemView.findViewById(R.id.cv);
            chapterName = (TextView) itemView.findViewById(R.id.chapter_name);
            chapterNumber = (TextView) itemView.findViewById(R.id.chapter_number);
            // chapterPhoto = (ImageView) itemView.findViewById(R.id.person_photo);

            itemView.setOnClickListener(RVAdapter.this);
            position = getPosition();
        }
    }

    @Override
    public void onClick(View v) {

            Intent intent = new Intent(mContext, ChapterActivity.class);
            mContext.startActivity(intent);
    }

    List<Chapter> chapters;

    @Override
    public void onAttachedToRecyclerView(RecyclerView recyclerView) {
        super.onAttachedToRecyclerView(recyclerView);
    }

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

    @Override
    public void onBindViewHolder(PersonViewHolder personViewHolder, int i) {
        personViewHolder.chapterName.setText(chapters.get(i).chapterName);
        personViewHolder.chapterNumber.setText(chapters.get(i).chapterNumber);
        // personViewHolder.chapterPhoto.setImageResource(persons.get(i).photoId);

    }

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

}

The fragment with the RecyclerView:

import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

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

public class UnitOneFragment extends android.support.v4.app.Fragment {

    private List<Chapter> chapters;
    private RecyclerView rv;
    private RecyclerView.LayoutManager llm;

    public UnitOneFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View v = inflater.inflate(R.layout.fragment_unit_one, container, false);

        rv = (RecyclerView) v.findViewById(R.id.rv);
        rv.setHasFixedSize(true);

        llm = new LinearLayoutManager(getActivity());
        rv.setLayoutManager(llm);

        initializeData();
        initializeAdapter();

        return v;
    }

    private void initializeData() {
        chapters = new ArrayList<>();
        chapters.add(new Chapter("Human Prehistory to the Early Civilizations", "Chapter One"));
        chapters.add(new Chapter("Classical China", "Chapter Two"));
        chapters.add(new Chapter("Classical India", "Chapter Three"));
        chapters.add(new Chapter("Classical Greece and Rome", "Chapter Four"));
        chapters.add(new Chapter("Classical Period: Declines and Diversities", "Chapter Five"));
    }

    private void initializeAdapter() {
        RVAdapter adapter = new RVAdapter(getActivity(), chapters);
        rv.setAdapter(adapter);
    }

}

class Chapter {
    String chapterName;
    String chapterNumber;
    // int photoId;

    Chapter(String chaptername, String chapternumber) {
        this.chapterName = chaptername;
        this.chapterNumber = chapternumber;
        // this.photoId = photoId;
    }
}

Clicking CardView to load a fragment

2 Answers2

Linked