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.
|
1 2 3 |
dependencies { implementation 'com.android.support:recyclerview-v7:28.0.0' } |
After that, we need to add Recylerview widget in your main XML file.
|
1 2 3 4 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
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.
|
1 2 3 |
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.
|
1 2 3 |
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