Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Horizontal RecylerView Android

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 379
    Comment on it

    This blog is about how to create Horizontal Recycler view in Android.
    Recyler View is advanced version of ListView. 

    Here we start how to convert Recyler View scrolling to Horizontal scroll.

    1. Create Project.

    2. Create Activity.

    3. Open Gradle file and add support of RecylerView.

       compile 'com.android.support:recyclerview-v7:24.0.0'

    4. Open activity's xml file and add RecylerView View.

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    5. Create new layout xml file with name:- view_item.xml

    6. Write below code to view_item class.

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    
        <ImageView
            android:id="@+id/iv_item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerInside"
            android:adjustViewBounds="true" />
    
    </RelativeLayout>

    7. OpenActivity's java class.

    8. Find Recycler View from xml.

    RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler);

    9. Create new java class with name HorizontalAdapter.

    10 . Create subclass of HorizntalAdapter's with name HorizonHolder.

    11. Extends HorizontalHolder with RecyclerView.ViewHolder.

     class HorizonHolder extends RecyclerView.ViewHolder {}

    12. Create Constructor of HorizontalHolder.

    13. Extends HorizontalAdapter with RecyclerView.Adapter<HorizontalAdapter.HorizonHolder>.

    public class HorizontalAdapter extends RecyclerView.Adapter<HorizontalAdapter.HorizonHolder> {
    }

    14. Override methods.

    15. Create field array of drawable items and add ids of drawable images.

     private int[] drawables = {R.drawable.ic_face, R.drawable.ic_face, R.drawable.ic_face, R.drawable.ic_face, R.drawable.ic_face};

    16. Create instance of Layout Inflater under onCreateViewHolder().

    LayoutInflater inflater = LayoutInflater.from(parent.getContext());

    17. Create View instance by inflating item xml file.

    View contactView = inflater.inflate(R.layout.view_item, parent, false);

    18. return new object of HorizontalHolder.

    return new HorizonHolder(contactView);

    19. In HorizontalHolder add ImageView as field variable.

     ImageView imageview;

    20. In Constructor of HorizontalHolder find imageView's view.

     class HorizonHolder extends RecyclerView.ViewHolder {
    
            ImageView imageview;
    
            public HorizonHolder(View itemView) {
                super(itemView);
                imageview = (ImageView) itemView.findViewById(R.id.iv_item);
            }
        }

    21. set Length to getItemCount().

      @Override
        public int getItemCount() {
            return drawables.length;
        }

    22. Set Image resource to ImageView under onBindViewHolder().

      @Override
        public void onBindViewHolder(HorizonHolder holder, int position) {
    
            holder.imageview.setImageResource(drawables[position]);
        }

    23. Under your activity Create HorizontalAdapter's Instance.

    HorizontalAdapter adapter = new HorizontalAdapter();

    24. Create RecyclerView.LayoutManager instance.

    RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, true);

    25. LinearLayourManager.HORIZONTAL set RecylerView orientation.

    26. Set LayoutManager to RecylerView.

    recyclerView.setLayoutManager(layoutManager);

    27. set Adapter to RecyclerView.

    recyclerView.setLayoutManager(layoutManager);

     

     

    Happy Coding :D

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: