vxh.viet
4/7/2016 - 3:12 AM

Build a simple Grid layout using RecyclerView

Build a simple Grid layout using RecyclerView

Source: StackOverflow, Vogella

Question: Build a simple grid layout to display text inside an Activity.

Answer: In your build.gradle add the following (get the lastest version here

dependencies {
    compile 'com.android.support:recyclerview-v7:23.2.1'
}

Sample Activity:

public class MediaPickerActivity extends Activity {
    private RecyclerView mRecyclerView;

    private ArrayList<String> pathList;

    //for debugging
    private static final String TAG = "MediaPickerActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_media_picker);

        pathList = doSomething();

        mRecyclerView = (RecyclerView)findViewById(R.id.recyclerView);
        mRecyclerView.setLayoutManager(new GridLayoutManager(this, 3));
        mRecyclerView.setAdapter(new VideoAdapter(pathList));
    }
    
    /*
    Recyler view uses a ViewHolder to store references to the views for one entry in the recyler view. A ViewHolder class is typically a static inner class in your adapter which holds references to the relevant views. With these references your code can avoid the findViewById() method in an adapter to find the views which should be filled with your new data.

While this sounds complex, this is approximately 15 % faster then using the findViewById() method.
    */
    private class VideoHolder extends RecyclerView.ViewHolder{
        private TextView mItemTextView;

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

            mItemTextView = (TextView) itemView.findViewById(R.id.gallery_item_textView);
        }
    }
    
    /*An adapter manages the data model and adapts it to the individual entries in the widget. An adapter for recyler view extends the RecyclerView.Adapter class.
    The adapter is responsible for inflating the layout for each entry in recycler view. It returns an object of type ViewHolder per visual entry in the recycler view.

The adapter must return the number of items via its getItemCount() method. Each entry in the RecylerView widget displays specific data for the data model. The adapter inflates a corresponding layout file and assigns the data to the inflated layout.

The onCreateViewHolder method inflate the layout and creates an instance of the ViewHolder class. This instance is used to access the views in the inflated layout. The onCreateViewHolder method is only called then a new view must be created.

The onBindViewHolder method binds the In this method you assign the data to the individual views in the row. data to the view.

The adapter is assigned to the RecylerView via the setAdapter method on the RecylerView object.
    */
    private class VideoAdapter extends RecyclerView.Adapter<VideoHolder>{
        private ArrayList<String> mList = new ArrayList<>();

        public VideoAdapter(ArrayList<String> mList){
            this.mList = mList;
        }

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

        @Override
        public VideoHolder onCreateViewHolder(ViewGroup viewGroup, int position){
            View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.gallery_item, viewGroup, false);
            VideoHolder vh = new VideoHolder(v);
            return vh;
        }

        @Override
        public void onBindViewHolder(VideoHolder holder, int i){
            holder.mItemTextView.setText(mList.get(i));
        }

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

Sample layout:

activity_media_picker.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/recyclerView"
          android:layout_width="match_parent"
          android:layout_height="match_parent"/>

gallery_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
           android:id="@+id/gallery_item_textView"
           android:layout_width="match_parent"
           android:layout_height="120dp"
           android:layout_gravity="center"
           android:scaleType="centerCrop">

</TextView>