Horizontal Recycler view with left and right arrow Indicators

Question

I am trying to implement a horizontal recycleview with right and left arrow indicators. So what happens is if one clicks the right arrow next item should appear and if one clicks the left arrow the previous item should appear and also at the end of the list the left arrow should disappear. I have no Idea how ti implement this. can someone help me out? Below is my Horizontal Recyclerview adapter.

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

Context context;

List<UploadImage> dataAdapters;
private SharedPreferences.Editor mSharedPrefEditor;

ImageLoader imageLoader;

public DialogRecyclerViewAdapter(List<UploadImage> getDataAdapter, Context context){

    super();
    this.dataAdapters = getDataAdapter;
    this.context = context;
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

    View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.cardview, parent, false);

    ViewHolder viewHolder = new ViewHolder(view);

    return viewHolder;
}

@Override
public void onBindViewHolder(ViewHolder Viewholder, int position) {

    final UploadImage dataAdapterOBJ =  dataAdapters.get(position);

    imageLoader = ImageAdapter.getInstance(context).getImageLoader();

    imageLoader.get(dataAdapterOBJ.getImage(),
            ImageLoader.getImageListener(
                    Viewholder.VollyImageView,//Server Image
                    R.drawable.loading_1,//Before loading server image the default showing image.
                    android.R.drawable.ic_dialog_alert //Error image if requested image dose not found on server.
            )
    );

    Viewholder.VollyImageView.setImageUrl(dataAdapterOBJ.getImage(), imageLoader);

    Viewholder.ImageTitleTextView.setText(dataAdapterOBJ.getBrand_name());

    Viewholder.garment_price.setText(dataAdapterOBJ.getGarment_price());


    Viewholder.VollyImageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {

            SharedPreferences sharedPref = PreferenceManager.getDefaultSharedPreferences(MihuChatApplication.getInstance().getContext());
            mSharedPrefEditor = sharedPref.edit();
            mSharedPrefEditor.putString(Constants.KEY_FROM_CHAT, "fromChatWIndow").apply();


            Intent i=new Intent(MihuChatApplication.getInstance().getContext(), DetailsNewActivity.class);
            i.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);

            //PACK DATA TO SEND
            i.putExtra("image_title",dataAdapterOBJ.getGarment_name());

            i.putExtra("image_url",dataAdapterOBJ.getImage_full());
            i.putExtra("desc_text", dataAdapterOBJ.getDesc_text());
            //i.putExtra("image_url2", imageLarger);

            i.putExtra("image_price", dataAdapterOBJ.getGarment_price());
            //i.putExtra("disc_price", disc_price);
            //open activity
            MihuChatApplication.getInstance().getApplicationContext().startActivity(i);
        }
    });

}

@Override
public int getItemCount() {

    return dataAdapters.size();
}

class ViewHolder extends RecyclerView.ViewHolder{

    public TextView ImageTitleTextView, garment_price;
    public NetworkImageView VollyImageView ;

    public ViewHolder(View itemView) {

        super(itemView);

        garment_price = (TextView) itemView.findViewById(R.id.garment_price);

        ImageTitleTextView = (TextView) itemView.findViewById(R.id.ImageNameTextView) ;

        VollyImageView = (NetworkImageView) itemView.findViewById(R.id.VolleyImageView) ;

    }
}

}

Thanks in advance.

Answer 1

Try the following

here img_LeftScroll is the left imageview and img_right_scroll is the right imageview between the horizontal list, rv_horizontal is the horizontallist view

then onclick of the image view do the below, hope it works

 img_LeftScroll.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (horizontalLayoutManagaer.findFirstVisibleItemPosition() > 0) {
                rv_horizontal.smoothScrollToPosition(horizontalLayoutManagaer.findFirstVisibleItemPosition() - 1);
            } else {
                rv_horizontal.smoothScrollToPosition(0);
            }

        }
    });

 img_right_scroll.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            rv_horizontal.smoothScrollToPosition(horizontalLayoutManagaer.findLastVisibleItemPosition() + 1);
        }
    });

Answer 2

Horizontal Recycler view with left and right arrow Indicators --I have Done this By creating a custom Layout with recyclerVIew and two arrow images --

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            super.onScrollStateChanged(recyclerView, newState);
            switch (newState) {
                case SCROLL_STATE_DRAGGING:
                    //Indicated that user scrolled.
                    programaticallyScrolled = false;
                    break;
                case SCROLL_STATE_IDLE:
                    if (!programaticallyScrolled) {
                        currentVisibleItem = linearLayoutManager.findFirstCompletelyVisibleItemPosition();
                        handleWritingViewNavigationArrows(false);
                    }
                    break;
                default:
                    break;
            }
        }
    });

Hide/Show navigation arrows

 /**
 * Handles the arrows visibility based on current visible items and scrolls the
 * current visibility item based on param scroll.
 *
 * Scroll - is False if User scrolls the Reycler Manually
 *        - is True means User used arrows to navigate
 *
 * @param scroll
 */
private void handleWritingViewNavigationArrows(boolean scroll) {
    if (currentVisibleItem == (recyclerView.getAdapter().getItemCount() - 1)) {
        rightArrow.setVisibility(View.GONE);
        leftArrow.setVisibility(View.VISIBLE);
    } else if (currentVisibleItem != 0) {
        rightArrow.setVisibility(View.VISIBLE);
        leftArrow.setVisibility(View.VISIBLE);
    } else if (currentVisibleItem == 0) {
        leftArrow.setVisibility(View.GONE);
        rightArrow.setVisibility(View.VISIBLE);
    }
    if (scroll) {
        recyclerView.smoothScrollToPosition(currentVisibleItem);
    }
}

Check the example for the reference hope it helps u

https://github.com/RameshBhupathi/RecyclerViewWithLeftAndRightArrowsExample