Android Material View Pager GridView Layout Design not proper

Question

am trying to implement a material view pager using this. The pager is working properly. But what i need is a grid layout of cards under the view pager like .

But am using GridLayoutManager and am ending up with a result like. Can anyone please help me out to realign this.

This is my code: Inside recyclerview fragment :

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    // Calling the RecyclerView
    mRecyclerView = (RecyclerView)view.findViewById(R.id.recyclerView);
    mRecyclerView.setHasFixedSize(true);


            mLayoutManager = new GridLayoutManager(context, 2);
            mRecyclerView.setLayoutManager(mLayoutManager);
            mAdapter = new RecyclerViewMaterialAdapter(new GridAdapter(context, mContentItems));
            mRecyclerView.setAdapter(mAdapter);               

    MaterialViewPagerHelper.registerRecyclerView(getActivity(), mRecyclerView, null);
}

And inside GridAdapter:

public class GridAdapter  extends RecyclerView.Adapter<GridAdapter.ViewHolder> {

List<CommonCategoryItem> mItems;
Context context;
public GridAdapter(Context context,ArrayList<CommonCategoryItem> list) {
    super();
    mItems = new ArrayList<>();
    mItems = list;
    this.context = context;
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
    final View view= LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.list_item_card_small, viewGroup, false);

    return new ViewHolder(view);
}

@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {

            CommonCategoryItem item = mItems.get(i);
            viewHolder.title.setText(item.getTitle());
            int resId = ImageHelper.getResourceId(context,mItems.get(i).getImage());
            if(resId!=0)
            {viewHolder.imageView.setImageResource(resId);}

}

@Override
public int getItemCount() {

    return mItems.size();
}


public static class ViewHolder extends RecyclerView.ViewHolder {

    public ImageView imageView;
    public TextView title;
    public CardView cardView;

    public ViewHolder(View itemView) {
        super(itemView);
        imageView = (ImageView)itemView.findViewById(R.id.img_thumbnail);
        title = (TextView)itemView.findViewById(R.id.title);
        cardView = (CardView)itemView.findViewById(R.id.smallCardView);
    }       
}

}

Also need a onclick listener to move toa different fragment on each of the gridview item click. I am unable to get the childposition. Can someone help me out.

Answer 1

In case anyone else has this problem in the future like I did: the "correct" way to fix this, as defined here: https://github.com/florent37/MaterialViewPager/issues/179 is to declare the number of columns in your grid when you set the adapter:

adapter = new RecyclerViewMaterialAdapter(new albumadapter(getActivity(), items),NUMBER_OF_COLUMNS);

I hope this helps.

Answer 2

Solved the click listener part tooo :)

Modified the RecyclerViewFragment's method like this :

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    // Calling the RecyclerView
    mRecyclerView = (RecyclerView)view.findViewById(R.id.recyclerView);
    mRecyclerView.setHasFixedSize(true);


            mLayoutManager = new GridLayoutManager(context, 2);
            mRecyclerView.setLayoutManager(mLayoutManager);
            GridAdapter gridAdapter = new GridAdapter(context, mContentItems,parentPosition);
            mAdapter = new RecyclerViewMaterialAdapter(gridAdapter);
            mRecyclerView.setAdapter(mAdapter);
            gridAdapter.setOnItemClickListener(new GridAdapter.OnItemClickListener() {
                @Override
                public void onItemClick(View view, int position) {
                    Log.d("helo", position  + " was clicked!");
                    Toast.makeText(getActivity(), position  + " was clicked!", Toast.LENGTH_SHORT).show();
                }
            });

    MaterialViewPagerHelper.registerRecyclerView(getActivity(), mRecyclerView, null);
}

And added itemClickListener and a callback in gridadapter :

public class GridAdapter  extends RecyclerView.Adapter<GridAdapter.ViewHolder> {

List<CommonCategoryItem> mItems;
Context context;
int parentPosition;
private OnItemClickListener listener;

public interface OnItemClickListener {
    void onItemClick(View itemView, int position);
}

public void setOnItemClickListener(OnItemClickListener listener) {
    this.listener = listener;
}

public GridAdapter(Context context,ArrayList<CommonCategoryItem> list,int parentPosition) {
    super();
    mItems = new ArrayList<>();
    mItems = list;
    this.context = context;
    this.parentPosition = parentPosition;
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
    final View view= LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.list_item_card_small, viewGroup, false);

    return new ViewHolder(view);
}

@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
    switch (i) {
        case 0:viewHolder.cardView.setVisibility(View.GONE);
            break;
        default:
            viewHolder.cardView.setVisibility(View.VISIBLE);
            CommonCategoryItem item = mItems.get(i);
            viewHolder.title.setText(item.getTitle());
            int resId = ImageHelper.getResourceId(context,mItems.get(i).getImage());
            if(resId!=0)
            {viewHolder.imageView.setImageResource(resId);}

    }
}

@Override
public int getItemCount() {

    return mItems.size();
}


public class ViewHolder extends RecyclerView.ViewHolder{

    public ImageView imageView;
    public TextView title;
    public CardView cardView;

    public ViewHolder(final View itemView) {
        super(itemView);
        imageView = (ImageView)itemView.findViewById(R.id.img_thumbnail);
        title = (TextView)itemView.findViewById(R.id.title);
        cardView = (CardView)itemView.findViewById(R.id.smallCardView);
        cardView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Triggers click upwards to the adapter on click
                    listener.onItemClick(itemView, getLayoutPosition());
            }
        });
    }

}

}

Now evrything is fine :)

Answer 3

Solved the problem :) Dont know if its the proper way or not:

Added an extra copy of first item of the mItems to the very first location. ie, 2 same items at the 0th and 1st indexes of arraylist mItems. Then in grid adpater,did like this.

@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
    switch (i) {
        case 0:viewHolder.cardView.setVisibility(View.GONE);
            break;
        default:
            viewHolder.cardView.setVisibility(View.VISIBLE);
            CommonCategoryItem item = mItems.get(i);
            viewHolder.title.setText(item.getTitle());
            int resId = ImageHelper.getResourceId(context,mItems.get(i).getImage());
            if(resId!=0)
            {viewHolder.imageView.setImageResource(resId);}

    }
}

Dont know if its proper though. Also, need an onclicklistener to each of the itemview to get position of griditem.