Tag Archives: recylerview

How to create Gridview using Recylerview Android

First let’s understand what Gridview and Recylerview are, in Android.

Gridview

A view that shows items in two-dimensional scrolling grid is known as Gridview. GridView layout in one of the most useful layouts in android to create a scrolling grid (rows & columns).

Recylerview

Recylerview is introduced in Android 5.0 Lollipop. The Recylerview widget is a more advanced and flexible version of Listview. It is a container used to display a large number of data sets that can be scrolled very efficiently by maintaining a limited number of views.

Now let’s start implementing Gridview

First, we need to add below dependency in build.gradle file at app level module.

dependencies {
      implementation 'com.android.support:recyclerview-v7:28.0.0'
}

After that, we need to add Recylerview widget in your main XML file.

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

Now we need to create item_logo.xml for Gridview row item.

<?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:id="@+id/root"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="center"
   android:orientation="vertical">

    <ImageView
         android:id="@+id/ivLogo"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:scaleType="centerInside"
    />

</LinearLayout>

We need to create Adapter Object. An adapter in Android carries the data from a source (e.g. List<> ) and delivers it to a layout (.xml file).  The Adapter provides access to the data items.

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

    private List<Logo> logoList;
    private Context mContext;


    public LogoGridAdapter(Context mContext, List<Logo> logoList) {

        this.mContext = mContext;
        this.logoList = logoList;

    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_logo, null));
    }

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

        Logo logo = getLogo(position);

        if(logo.getLogoUrl() != null) {
            ImageUtils.displayImage(logo.getLogoUrl(), holder.ivLogo, ContextCompat.getDrawable(mContext, R.drawable.image_placeholder));
        }

    }


    private Logo getLogo(int position) {
        return logoList.get(position);
    }

    public List<Logo> getLogoList() {
        return logoList;
    }

    @Override
    public int getItemCount() {
        return logoList.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
       
        LinearLayout root;
        ImageView ivLogo;

        public ViewHolder(View itemView) {
            super(itemView);
            // get logo view 
            ivLogo = (ImageView)itemView.findViewById(R.id.ivLogo);
            root =  (LinearLayout)itemView.findViewById(R.id.root);
        }
    }
}

To display images we can use Glide dependency.

Glide.with(imageView.getContext()).load(imageUrl)
                .apply(new RequestOptions().placeholder(placeHolder).dontAnimate().diskCacheStrategy(DiskCacheStrategy.ALL))
                .into(imageView);

Now we need to set data into Adapter.

LogoGridAdapter mLogoGridAdapter = new LogoGridAdapter(this, logoList);
recyclerView.setLayoutManager(new GridLayoutManager(getActivity(), 3));
recyclerView.setAdapter(mLogoGridAdapter);

GridLayoutManager is a Recylerview Layout Manager implementation to lay out items in a grid.

In the above code “3” is a number of columns in per row.

Output

 

 

 

 

 

 

 

 

 

 

That’s it, Happy Coding 🙂

Reference:-  https://developer.android.com/guide/topics/ui/layout/recyclerview