RecyclerView in fragments not working properly

Question

I want to make a RecyclerView containing Cards inside it.

The problem is that I'm getting something weird. Like shown in screenshot below (Notice the another card overlapping the card below - the card below is only what I want to be displayed):

Here's ListContentAAR.java file's code:

class ListContentAAR {
    int hImage;
    String hPicTag;
    String hDescription;
    String hLocation;
    Button btn_accept;
    Button btn_share;
    String postDate;
    String postTime;
    String postedBy;

    ListContentAAR(int hImage,
            String hPicTag,
            String hDescription,
            String hLocation,
            Button btn_accept,
            Button btn_share,
            String postDate,
            String postTime,
            String postedBy) {
        this.hImage = hImage;
        this.hPicTag = hPicTag;
        this.hDescription = hDescription;
        this.hLocation = hLocation;
        this.btn_accept = btn_accept;
        this.btn_share = btn_share;
        this.postDate = postDate;
        this.postTime = postTime;
        this.postedBy = postedBy;
    }

}

Here's RVAdapterAAR.java file's code:

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

    public static class PersonViewHolder extends RecyclerView.ViewHolder {

        CardView cardView;
        ImageView hImage;
        TextView hPicTag;
        TextView hDescription;
        TextView hLocation;
        Button btn_accept;
        Button btn_share;
        TextView postDate;
        TextView postTime;
        TextView postedBy;

        PersonViewHolder(View itemView) {
            super(itemView);
            cardView = (CardView) itemView.findViewById(R.id.card_accept_request);
            hImage = (ImageView) itemView.findViewById(R.id.h_pic_accept);
            hPicTag = (TextView) itemView.findViewById(R.id.h_pic_tag);
            hDescription = (TextView) itemView.findViewById(R.id.h_description_accept);
            hLocation = (TextView) itemView.findViewById(R.id.h_location_tag);
            btn_accept = (Button) itemView.findViewById(R.id.btn_accept);
            btn_share = (Button) itemView.findViewById(R.id.btn_share);
            postDate = (TextView) itemView.findViewById(R.id.post_date);
            postTime = (TextView) itemView.findViewById(R.id.post_time);
            postedBy = (TextView) itemView.findViewById(R.id.posted_by);
        }

    }

    List<ListContentAAR> listContentAARs;

    RVAdapterAAR(List<ListContentAAR> listContentAARs) {
        this.listContentAARs = listContentAARs;
    }

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

    public PersonViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.fragment_accept_a_request, viewGroup, false);
        PersonViewHolder personViewHolder = new PersonViewHolder(view);
        return personViewHolder;
    }

    public void onBindViewHolder (PersonViewHolder personViewHolder, int i) {
        personViewHolder.hImage.setImageResource(listContentAARs.get(i).hImage);
        personViewHolder.hPicTag.setText(listContentAARs.get(i).hPicTag);
        personViewHolder.hDescription.setText(listContentAARs.get(i).hDescription);
        personViewHolder.hLocation.setText(listContentAARs.get(i).hLocation);
        // something for btn_accept
        // something for btn_share
        personViewHolder.postDate.setText(listContentAARs.get(i).postDate);
        personViewHolder.postTime.setText(listContentAARs.get(i).postTime);
        personViewHolder.postedBy.setText(listContentAARs.get(i).postedBy);
    }

    public int getItemCount() {
        return listContentAARs.size();
    }

}

Here's AcceptARequest.java file's code:

public class AcceptARequest extends Fragment{

    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    // TODO: Rename and change types of parameters
    private String mParam1;
    private String mParam2;

    private OnFragmentInteractionListener mListener;

    public List<ListContentAAR> listContentAARs;
    public RecyclerView recyclerView;

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

    /**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @param param1 Parameter 1.
     * @param param2 Parameter 2.
     * @return A new instance of fragment AcceptARequest.
     */
    // TODO: Rename and change types and number of parameters
    public static AcceptARequest newInstance(String param1, String param2) {
        AcceptARequest fragment = new AcceptARequest();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        // Inflate the layout for this fragment

        View rootView = inflater.inflate(R.layout.fragment_accept_a_request, container, false);

                recyclerView = (RecyclerView) rootView.findViewById(R.id.accept_request_list);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getActivity());
        recyclerView.setLayoutManager(linearLayoutManager);
        recyclerView.setHasFixedSize(true);

        initializeData();
        initializeAdapter();

        return rootView;
    }

    private void initializeData(){

        listContentAARs = new ArrayList<>();
        listContentAARs.add(new ListContentAAR(R.drawable.ic_action_facebook,
                "H pic goes here",
                "H description goes here",
                "H location goes here",
                R.id.btn_accept,
                R.id.btn_share,
                "date",
                "time",
                "posted by"));
    }

    private void initializeAdapter(){
        RVAdapterAAR adapter = new RVAdapterAAR(listContentAARs);
        recyclerView.setAdapter(adapter);
    }

    // TODO: Rename method, update argument and hook method into UI event
    public void onButtonPressed(Uri uri) {
        if (mListener != null) {
            mListener.onFragmentInteraction(uri);
        }
    }

    @Override
    public void onDetach() {
        super.onDetach();
        mListener = null;
    }

    /**
     * This interface must be implemented by activities that contain this
     * fragment to allow an interaction in this fragment to be communicated
     * to the activity and potentially other fragments contained in that
     * activity.
     * <p/>
     * See the Android Training lesson <a href=
     * "http://developer.android.com/training/basics/fragments/communicating.html"
     * >Communicating with Other Fragments</a> for more information.
     */
    public interface OnFragmentInteractionListener {
        // TODO: Update argument type and name
        void onFragmentInteraction(Uri uri);
    }
}

Here's fragment_accept_a_request.xml file's code:

<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="wrap_content"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                android:paddingBottom="@dimen/activity_vertical_margin"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                tools:context="com.abc.xyz.AcceptARequest">

<include layout="@layout/accept_a_request_recyclerview"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/accept_request_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v7.widget.RecyclerView>

</RelativeLayout>

Here's accept_a_request_recyclerview.xml file's code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                xmlns:tools="http://schemas.android.com/tools"
                tools:showIn="@layout/fragment_accept_a_request">

    <android.support.v7.widget.CardView
        android:id="@+id/card_accept_request"
        android:layout_width="match_parent"
        android:layout_height="@dimen/card_accept_request"
        app:cardElevation="2dp"
        app:cardUseCompatPadding="true"
        app:contentPadding="10dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/h_pic_accept"
                android:layout_width="match_parent"
                android:layout_height="@dimen/h_pic_dimen_accept"
                android:layout_gravity="center_horizontal|center_vertical"/>

            <TextView
                android:id="@+id/h_pic_tag"
                android:layout_width="match_parent"
                android:layout_height="@dimen/homeless_pic_dimen_accept"
                android:text="h pic goes here"
                android:gravity="center_horizontal|center_vertical"/>

            <TextView
                android:id="@+id/h_description_accept"
                android:layout_below="@+id/h_pic_tag"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="h description goes here"
                android:maxLines="5"/>

            <TextView
                android:id="@+id/h_location_tag"
                android:layout_below="@id/h_description_accept"
                android:layout_width="match_parent"
                android:layout_height="@dimen/h_pic_dimen_accept"
                android:text="h location goes here"
                android:gravity="center_horizontal|center_vertical"
                android:paddingTop="@dimen/paddings"
                android:paddingBottom="@dimen/paddings"/>

            <LinearLayout
                android:id="@+id/btn_accept_share_container"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_below="@id/h_location_tag">

                <Button
                    android:id="@+id/btn_accept"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/btn_accept"
                    android:textColor="@color/colorPrimary"
                    style="?android:attr/borderlessButtonStyle"/>

                <Button
                    android:id="@+id/btn_share"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/btn_share"
                    android:textColor="@color/colorPrimary"
                    style="?android:attr/borderlessButtonStyle"/>

            </LinearLayout>

            <LinearLayout
                android:id="@+id/date_time_container"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignEnd="@+id/btn_accept_share_container"
                android:layout_alignRight="@+id/btn_accept_share_container"
                android:orientation="vertical"
                android:layout_below="@id/homeless_location_tag">

                <TextView
                    android:id="@+id/post_date"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="date"/>

                <TextView
                    android:id="@+id/post_time"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="time"/>

            </LinearLayout>

            <TextView
                android:id="@+id/posted_by"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="posted by [name]"
                android:layout_alignParentBottom="true"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"/>

        </RelativeLayout>

    </android.support.v7.widget.CardView>

</RelativeLayout>

As I'm a beginner, I totally have no idea about what is going wrong here!

Answer 1

After messing up a lot with this problem, I finally figured out the solution.

It was simple.

I just changed the RelativeLayout to LinearLayout, and it worked like a charm!

Here's the final fragment_accept_a_request.xml file's code:

<LinearLayout 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"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                android:paddingBottom="@dimen/activity_vertical_margin"
                android:orientation="vertical"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                tools:context="com.humanehelper.humanehelper.AcceptARequest">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/accept_request_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <include layout="@layout/accept_a_request_recyclerview"/>

</LinearLayout>

and here's accept_a_request_recyclerview.xml file's code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                xmlns:tools="http://schemas.android.com/tools"
                tools:showIn="@layout/fragment_accept_a_request">

    <android.support.v7.widget.CardView
        android:id="@+id/card_accept_request"
        android:layout_width="match_parent"
        android:layout_height="@dimen/card_accept_request"
        app:cardElevation="2dp"
        app:cardUseCompatPadding="true"
        app:contentPadding="10dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/h_pic_accept"
                android:layout_width="match_parent"
                android:layout_height="@dimen/h_pic_dimen_accept"
                android:layout_gravity="center_horizontal|center_vertical"/>

            <TextView
                android:id="@+id/h_pic_tag"
                android:layout_width="match_parent"
                android:layout_height="@dimen/homeless_pic_dimen_accept"
                android:text="h pic goes here"
                android:gravity="center_horizontal|center_vertical"/>

            <TextView
                android:id="@+id/h_description_accept"
                android:layout_below="@+id/h_pic_tag"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="h description goes here"
                android:maxLines="5"/>

            <TextView
                android:id="@+id/h_location_tag"
                android:layout_below="@id/h_description_accept"
                android:layout_width="match_parent"
                android:layout_height="@dimen/h_pic_dimen_accept"
                android:text="h location goes here"
                android:gravity="center_horizontal|center_vertical"
                android:paddingTop="@dimen/paddings"
                android:paddingBottom="@dimen/paddings"/>

            <LinearLayout
                android:id="@+id/btn_accept_share_container"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_below="@id/h_location_tag">

                <Button
                    android:id="@+id/btn_accept"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/btn_accept"
                    android:textColor="@color/colorPrimary"
                    style="?android:attr/borderlessButtonStyle"/>

                <Button
                    android:id="@+id/btn_share"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/btn_share"
                    android:textColor="@color/colorPrimary"
                    style="?android:attr/borderlessButtonStyle"/>

            </LinearLayout>

            <LinearLayout
                android:id="@+id/date_time_container"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignEnd="@+id/btn_accept_share_container"
                android:layout_alignRight="@+id/btn_accept_share_container"
                android:orientation="vertical"
                android:layout_below="@id/homeless_location_tag">

                <TextView
                    android:id="@+id/post_date"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="date"/>

                <TextView
                    android:id="@+id/post_time"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="time"/>

            </LinearLayout>

            <TextView
                android:id="@+id/posted_by"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="posted by [name]"
                android:layout_alignParentBottom="true"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"/>

        </RelativeLayout>

    </android.support.v7.widget.CardView>

</LinearLayout>

Answer 2

The mistake is that in onCreateViewHolder you should only inflate the content of recyclerView item, but not the very RecyclerView.The right implementation is as follow:

recyclerview_item.xml

<android.support.v7.widget.CardView
    android:id="@+id/card_accept_request"
    android:layout_width="match_parent"
    android:layout_height="@dimen/card_accept_request"
    app:cardElevation="2dp"
    app:cardUseCompatPadding="true"
    app:contentPadding="10dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/h_pic_accept"
        android:layout_width="match_parent"
        android:layout_height="@dimen/h_pic_dimen_accept"
        android:layout_gravity="center_horizontal|center_vertical"/>

    <TextView
        android:id="@+id/h_pic_tag"
        android:layout_width="match_parent"
        android:layout_height="@dimen/h_pic_dimen_accept"
        android:text="H pic goes here"
        android:gravity="center_horizontal|center_vertical"/>

    <TextView
        android:id="@+id/h_description_accept"
        android:layout_below="@+id/h_pic_tag"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal|center_vertical"
        android:text="H description goes here"
        android:maxLines="5"/>

    <TextView
        android:id="@+id/h_location_tag"
        android:layout_below="@id/h_description_accept"
        android:layout_width="match_parent"
        android:layout_height="@dimen/h_pic_dimen_accept"
        android:text="H location goes here"
        android:gravity="center_horizontal|center_vertical"
        android:paddingTop="@dimen/paddings"
        android:paddingBottom="@dimen/paddings"/>

        <LinearLayout
            android:id="@+id/btn_accept_share_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_below="@id/homeless_location_tag">

    <Button
        android:id="@+id/btn_accept"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/btn_accept"
        android:textColor="@color/colorPrimary"
        style="?android:attr/borderlessButtonStyle"/>

            <Button
                android:id="@+id/btn_share"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/btn_share"
                android:textColor="@color/colorPrimary"
                style="?android:attr/borderlessButtonStyle"/>

        </LinearLayout>

        <LinearLayout
            android:id="@+id/date_time_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignEnd="@+id/btn_accept_share_container"
            android:layout_alignRight="@+id/btn_accept_share_container"
            android:orientation="vertical"
            android:layout_below="@id/homeless_location_tag">

        <TextView
            android:id="@+id/post_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="date"/>

            <TextView
                android:id="@+id/post_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="time"/>

        </LinearLayout>

        <TextView
            android:id="@+id/posted_by"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="posted by [name]"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"/>

    </RelativeLayout>

</android.support.v7.widget.CardView>

your_fragment_layout.xml

  <android.support.v7.widget.RecyclerView
    android:id="@+id/accept_request_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

</android.support.v7.widget.RecyclerView>

In your Activity you inflate Fragment from your_fragment_layout.xml and then in onCreateViewHolder you should replace this line:

View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.fragment_accept_a_request, viewGroup, false);

on this line :

View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.recyclerview_item, viewGroup, false);