
<p>This article is about Android <span style="color: #008000;"><strong>GridLayoutManager</strong></span> and how to use it with <span style="color: #008000;"><strong>RecyclerView</strong></span> to show items in uniform grid with the help of simple android application.</p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<amp-youtube layout="responsive" width="1200" height="675" data-videoid="6QoWgMyLf-s" title="Android GridLayoutManager Example With RecyclerView"><a placeholder href="https://youtu.be/6QoWgMyLf-s"><img src="https://i.ytimg.com/vi/6QoWgMyLf-s/hqdefault.jpg" layout="fill" object-fit="cover" alt="Android GridLayoutManager Example With RecyclerView"></a></amp-youtube>
</div></figure>



<div class="wp-block-buttons aligncenter is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button is-style-outline is-style-outline--1"><a class="wp-block-button__link has-white-color has-text-color has-background" href="https://github.com/arunk7839/GridUsingRecyclerView" style="background-color:#520599" target="_blank" rel="noreferrer noopener"><strong>DOWNLOAD CODE</strong></a></div>
</div>



<h3 class="wp-block-heading"><span style="color: #000080;"><strong>GridLayoutManager</strong></span></h3>



<p>The ;<span style="color: #0000ff;"><strong>RecyclerView</strong></span> ;widget is a more advanced and flexible version of ;<span style="color: #0000ff;"><strong>ListView</strong></span>. It is a container for displaying large data sets that can be scrolled very efficiently by maintaining a limited number of views.</p>



<p class="p2">A <span style="color: #0000ff;"><strong>LayoutManager</strong></span> manages how the items in the RecyclerView are arranged. With RecyclerView, ; you can use <strong><span style="color: #0000ff;"><span style="color:#04603e" class="has-inline-color">GridLayoutManager</span></span> (to show items in grid form i.e. row and column) or <span style="color: #0000ff;"><span style="color:#04603e" class="has-inline-color">LinearLayoutManager</span></span> (to show items in horizontal and vertical list)</strong>. ; ;</p>



<p>Let’s implement GridLayoutManager using RecyclerView in simple android application.</p>



<h3 class="wp-block-heading"><span style="color: #000080;"><strong><span class="has-inline-color">Creating New Project</span></strong></span></h3>



<p><strong>1</strong>. In ;<strong>Android Studio</strong>, go to ;<strong>File ⇒ New Project</strong>, fill all the details required to create a new project and then click on ;<strong>finish</strong>.</p>



<p><strong>2</strong>. Open ;<span style="color: #008000;"><strong>build.gradle</strong></span>, add the below <span style="color: #0000ff;"><strong>recyclerView</strong></span> dependency and then <span style="color: #008000;"><strong>sync</strong></span> the project.</p>



<pre class="wp-block-preformatted">dependencies <strong>{
 <span style="color: #008000;">//add recyclerView dependency
 </span></strong>implementation <strong>'androidx.recyclerview:recyclerview:1.1.0'
}</strong></pre>



<p><strong>3</strong>. Open the layout file ;<span style="color: #008000;"><strong>activity_main.xml</strong></span> ;and add the below code. This file consist of one <span style="color: #008000;"><strong>RecyclerView</strong></span> only.</p>



<p><span class="has-inline-color" style="color: #0000ff;"> ;<strong>activity_main.xml</strong></span></p>



<pre class="wp-block-preformatted"><em><;?</em><strong>xml version</strong><strong>="1.0" </strong><strong>encoding</strong><strong>="utf-8"</strong><em>?>;<br></em><;<strong>androidx.constraintlayout.widget.ConstraintLayout </strong><strong>xmlns:</strong><strong>android</strong><strong>="http://schemas.android.com/apk/res/android"<br></strong> <strong>xmlns:</strong><strong>app</strong><strong>="http://schemas.android.com/apk/res-auto"<br></strong> <strong>xmlns:</strong><strong>tools</strong><strong>="http://schemas.android.com/tools"<br></strong> <strong>android</strong><strong>:layout_width</strong><strong>="match_parent"<br></strong> <strong>android</strong><strong>:layout_height</strong><strong>="match_parent"<br></strong> <strong>tools</strong><strong>:context</strong><strong>=".MainActivity"</strong>>;<br><br> <;<strong>androidx.recyclerview.widget.RecyclerView<br></strong> <strong>android</strong><strong>:id</strong><strong>="@+id/recyclerView"<br></strong> <strong>android</strong><strong>:layout_width</strong><strong>="match_parent"<br></strong> <strong>android</strong><strong>:layout_height</strong><strong>="match_parent"<br></strong> <strong>app</strong><strong>:layout_constraintBottom_toBottomOf</strong><strong>="parent"<br></strong> <strong>app</strong><strong>:layout_constraintEnd_toEndOf</strong><strong>="parent"<br></strong> <strong>app</strong><strong>:layout_constraintStart_toStartOf</strong><strong>="parent"<br></strong> <strong>app</strong><strong>:layout_constraintTop_toTopOf</strong><strong>="parent" </strong>/>;<br><br><;/<strong>androidx.constraintlayout.widget.ConstraintLayout</strong>>;</pre>



<p><strong>4. ;</strong>Create a new layout file ;<span style="color: #008000;"><strong>recyclerview_item.xml</strong> ;</span><strong>(layout->;New->;Layout Resource File)</strong> and add the below code. This layout file represents an item of a recyclerView which consist of an <span style="color: #008000;"><strong>ImageView</strong></span> (represents Android version name image) and a <span style="color: #008000;"><strong>TextView</strong></span> (represents Android version name).<span style="font-size: inherit;"> </span></p>



<p><span style="color: #0000ff;"><strong>recyclerview_item.xml</strong></span></p>



<pre class="wp-block-preformatted"><em><;?</em><strong>xml version</strong><strong>="1.0" </strong><strong>encoding</strong><strong>="utf-8"</strong><em>?>;<br></em><em><br></em><;<strong>androidx.constraintlayout.widget.ConstraintLayout </strong><strong>xmlns:</strong><strong>android</strong><strong>="http://schemas.android.com/apk/res/android"<br></strong> <strong>xmlns:</strong><strong>app</strong><strong>="http://schemas.android.com/apk/res-auto"<br></strong> <strong>android</strong><strong>:layout_width</strong><strong>="match_parent"<br></strong> <strong>android</strong><strong>:layout_height</strong><strong>="wrap_content"<br></strong> <strong>android</strong><strong>:background</strong><strong>="@color/lightPurple"<br></strong> <strong>android</strong><strong>:padding</strong><strong>="@dimen/padding_10dp"<br></strong> <strong>android</strong><strong>:layout_margin</strong><strong>="@dimen/margin_2dp"</strong>>;<br><br> <;<strong>ImageView<br></strong> <strong>android</strong><strong>:id</strong><strong>="@+id/imgVersionName"<br></strong> <strong>android</strong><strong>:layout_width</strong><strong>="@dimen/width_150dp"<br></strong> <strong>android</strong><strong>:layout_height</strong><strong>="@dimen/height_150dp"<br></strong> <strong>android</strong><strong>:scaleType</strong><strong>="fitXY"<br></strong> <strong>app</strong><strong>:layout_constraintEnd_toEndOf</strong><strong>="parent"<br></strong> <strong>app</strong><strong>:layout_constraintStart_toStartOf</strong><strong>="parent"<br></strong> <strong>app</strong><strong>:layout_constraintTop_toTopOf</strong><strong>="parent" </strong>/>;<br><br> <;<strong>TextView<br></strong> <strong>android</strong><strong>:id</strong><strong>="@+id/tvVersionName"<br></strong> <strong>android</strong><strong>:layout_width</strong><strong>="wrap_content"<br></strong> <strong>android</strong><strong>:layout_height</strong><strong>="wrap_content"<br></strong> <strong>android</strong><strong>:layout_marginTop</strong><strong>="@dimen/margin_12dp"<br></strong> <strong>android</strong><strong>:gravity</strong><strong>="center"<br></strong> <strong>android</strong><strong>:textColor</strong><strong>="@android:color/holo_red_dark"<br></strong> <strong>android</strong><strong>:textSize</strong><strong>="@dimen/textSize_18sp"<br></strong> <strong>android</strong><strong>:textStyle</strong><strong>="bold"<br></strong> <strong>app</strong><strong>:layout_constraintEnd_toEndOf</strong><strong>="@+id/imgVersionName"<br></strong> <strong>app</strong><strong>:layout_constraintStart_toStartOf</strong><strong>="@+id/imgVersionName"<br></strong> <strong>app</strong><strong>:layout_constraintTop_toBottomOf</strong><strong>="@+id/imgVersionName" </strong>/>;<br><br><;/<strong>androidx.constraintlayout.widget.ConstraintLayout</strong>>;</pre>



<p><strong>5</strong>. Create a class named <span style="color: #008000;"><strong>Item.java</strong></span> ;and add the below code. It consist of two properties( <span style="color: #008000;"><strong>versionName</strong></span> and <span style="color: #008000;"><strong>ImageResourceId</strong></span> (for Image)) and getter methods for each property.</p>



<p><strong style="color: rgb(0, 0, 255); font-size: inherit;">Item.java</strong></p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>




<pre class="wp-block-preformatted"><strong>package </strong>com.c1ctech.gridusingrecyclerview;

<strong>public class </strong>Item {

 <strong>private int imageResourseId</strong>;
 <strong>private </strong>String <strong>versionName</strong>;

 <strong>public </strong>Item(<strong>int </strong>imageResourseId, String versionName) {
 <strong>this</strong>.<strong>imageResourseId </strong>= imageResourseId;
 <strong>this</strong>.<strong>versionName </strong>= versionName;
 }

 <strong>public int </strong>getImageResourseId() {
 <strong>return imageResourseId</strong>;
 }

 <strong>public </strong>String getVersionName() {
 <strong>return versionName</strong>;
 }

}</pre>



<p><strong>6</strong>. Open <strong><span style="color: #0000ff;">drawable</span></strong> folder under <strong><span style="color: #0000ff;">res</span></strong> directory and paste all the images which you have copied from somewhere else.</p>



<p><strong>7</strong>. Now open <span style="color: #008000;"><strong>MainActivity.java</strong></span> and add the below code. Here <span style="color: #008000;"><strong>prepareItemData()</strong></span> method adds Item data to list, which we are passing to recyclerView Adapter (<strong>ItemAdapter</strong>).</p>



<p><strong style="color: rgb(0, 0, 255); font-size: inherit;">MainActivity.java</strong></p>



<pre class="wp-block-preformatted"><strong>package </strong>com.c1ctech.gridusingrecyclerview;

<strong>import </strong>android.os.Bundle;

<strong>import </strong>java.util.ArrayList;
<strong>import </strong>java.util.List;

<strong>import </strong>androidx.appcompat.app.AppCompatActivity;
<strong>import </strong>androidx.recyclerview.widget.GridLayoutManager;
<strong>import </strong>androidx.recyclerview.widget.RecyclerView;

<strong>public class </strong>MainActivity <strong>extends </strong>AppCompatActivity {

 RecyclerView <strong>recyclerView</strong>;
 <strong>private </strong>List<;Item>; <strong>list </strong>= <strong>new </strong>ArrayList<;>;();

 @Override
 <strong>protected void </strong>onCreate(Bundle savedInstanceState) {
 <strong>super</strong>.onCreate(savedInstanceState);
 setContentView(R.layout.<strong><em>activity_main</em></strong>);

 <span style="color: #008000;"><strong>//get recyclerView by its id</strong></span>
 <strong>recyclerView </strong>= findViewById(R.id.<strong><em>recyclerView</em></strong>);

 <span style="color: #008000;"><strong> //add Item data to list</strong></span>
 prepareItemData();

 <span style="color: #008000;"><strong>//set GridLayoutManager in recyclerView and show items in grid with two columns</strong></span>
 <strong>recyclerView</strong>.setLayoutManager(<strong>new </strong>GridLayoutManager(getApplicationContext(), 2));

 <span style="color: #008000;"><strong> //set adapter ItemAdapter in recyclerView</strong></span>
 <strong>recyclerView</strong>.setAdapter(<strong>new </strong>ItemAdapter(<strong>list</strong>, <strong>this</strong>));
 }

 <strong>public void </strong>prepareItemData() {
 Item item = <strong>new </strong>Item(R.drawable.<strong><em>eclair</em></strong>, <strong>"Eclair"</strong>);
 <strong>list</strong>.add(item);
 item = <strong>new </strong>Item(R.drawable.<strong><em>froyo</em></strong>, <strong>"Froyo"</strong>);
 <strong>list</strong>.add(item);
 item = <strong>new </strong>Item(R.drawable.<strong><em>gingerbread</em></strong>, <strong>"Gingerbread"</strong>);
 <strong>list</strong>.add(item);
 item = <strong>new </strong>Item(R.drawable.<strong><em>honeycomb</em></strong>, <strong>"Honeycomb"</strong>);
 <strong>list</strong>.add(item);
 item = <strong>new </strong>Item(R.drawable.<strong><em>ice_cream_sandwich</em></strong>, <strong>"Ice Cream Sandwich"</strong>);
 <strong>list</strong>.add(item);
 item = <strong>new </strong>Item(R.drawable.<strong><em>jellybean</em></strong>, <strong>"Jelly Bean"</strong>);
 <strong>list</strong>.add(item);
 item = <strong>new </strong>Item(R.drawable.<strong><em>kitkat</em></strong>, <strong>"KitKat"</strong>);
 <strong>list</strong>.add(item);
 item = <strong>new </strong>Item(R.drawable.<strong><em>lollipop</em></strong>, <strong>"Lollipop"</strong>);
 <strong>list</strong>.add(item);
 item = <strong>new </strong>Item(R.drawable.<strong><em>marshmallow</em></strong>, <strong>"Marshmallow"</strong>);
 <strong>list</strong>.add(item);
 item = <strong>new </strong>Item(R.drawable.<strong><em>nougat</em></strong>, <strong>"Nougat"</strong>);
 <strong>list</strong>.add(item);
 item = <strong>new </strong>Item(R.drawable.<strong><em>oreo</em></strong>, <strong>"Oreo"</strong>);
 <strong>list</strong>.add(item);
 item = <strong>new </strong>Item(R.drawable.<strong><em>pie</em></strong>, <strong>"Pie"</strong>);
 <strong>list</strong>.add(item);

 }
}</pre>



<p><strong>8</strong>. Now create a class named <span style="color: #008000;"><strong>ItemAdapter.java</strong></span> and add the below code. </p>



<ul class="wp-block-list"><li><span style="color: #008000;"><strong>onCreateViewHolder()</strong>: </span>inflate the item layout and create the View Holder.</li><li><span style="color: #008000;"><strong>onBindViewHolder()</strong>:</span> set the view attributes based on the data.</li><li><strong style="color: rgb(0, 128, 0); font-size: inherit;">getItemCount():</strong><span style="font-size: inherit; color: rgb(0, 0, 0);"> </span><span style="font-size: inherit; color: rgb(0, 0, 0);">determine the number of items.</span></li><li><span style="color: #008000;"><strong>setOnClickListener:</strong></span> show a <strong>Toast</strong> on click of each recyclerView Item.</li></ul>



<p><strong style="color: rgb(0, 0, 255); font-size: inherit;">ItemAdapter.java</strong></p>



<pre class="wp-block-preformatted"><strong>package </strong>com.c1ctech.gridusingrecyclerview;

<strong>import </strong>android.content.Context;
<strong>import </strong>android.view.LayoutInflater;
<strong>import </strong>android.view.View;
<strong>import </strong>android.view.ViewGroup;
<strong>import </strong>android.widget.ImageView;
<strong>import </strong>android.widget.TextView;
<strong>import </strong>android.widget.Toast;

<strong>import </strong>java.util.List;

<strong>import </strong>androidx.recyclerview.widget.RecyclerView;

<strong>public class </strong>ItemAdapter <strong>extends </strong>RecyclerView.Adapter<;ItemAdapter.MyViewHolder>; {

 <strong>private </strong>List<;Item>; <strong>list</strong>;
 Context <strong>context</strong>;


 <strong>public </strong>ItemAdapter(List<;Item>; list, Context context) {
 <strong>this</strong>.<strong>list </strong>= list;
 <strong>this</strong>.<strong>context </strong>= context;

 }

 <strong>public class </strong>MyViewHolder <strong>extends </strong>RecyclerView.ViewHolder {

 <strong>public </strong>TextView <strong>textView</strong>;
 <strong>public </strong>ImageView <strong>imageView</strong>;


 <strong>public </strong>MyViewHolder(View view) {
 <strong>super</strong>(view);

 <strong>textView </strong>= view.findViewById(R.id.<strong><em>tvVersionName</em></strong>);
 <strong>imageView </strong>= view.findViewById(R.id.<strong><em>imgVersionName</em></strong>);
 }
 }

 @Override
 <strong>public </strong>MyViewHolder onCreateViewHolder(ViewGroup parent, <strong>int </strong>viewType) {
 View itemView = LayoutInflater.<em>from</em>(parent.getContext()).inflate(R.layout.<strong><em>recyclerview_item</em></strong>, parent, <strong>false</strong>);
 <strong>return new </strong>MyViewHolder(itemView);

 }

 @Override
 <strong>public void </strong>onBindViewHolder(<strong>final </strong>MyViewHolder holder, <strong>final int </strong>position) {

 holder.<strong>textView</strong>.setText(<strong>list</strong>.get(position).getVersionName());
 holder.<strong>imageView</strong>.setImageResource(<strong>list</strong>.get(position).getImageResourseId());

 <em><strong><span style="color:#04603e" class="has-inline-color">// implement setOnClickListener event on item view.</span></strong>
</em> holder.<strong>itemView</strong>.setOnClickListener(<strong>new </strong>View.OnClickListener() {
 @Override
 <strong>public void </strong>onClick(View view) {

 Toast.<em>makeText</em>(<strong>context</strong>, <strong>"Android Version " </strong>+ holder.<strong>textView</strong>.getText() + <strong>": Clicked"</strong>, Toast.<strong><em>LENGTH_LONG</em></strong>).show();
 }
 });
 }

 @Override
 <strong>public int </strong>getItemCount() {
 <strong>return list</strong>.size();
 }
}</pre>



<p><strong>Now when you run the app it will look like this: ;  ;  ;</strong><span style="font-size: inherit;"> </span></p>



<div class="wp-block-image is-style-default"><figure class="aligncenter size-large is-resized"><img src="https://c1ctech.com/wp-content/uploads/2020/09/Screenshot_1601447430-1-576x1024.png" alt="" class="wp-image-2260" width="467" height="830"/><figcaption><strong><span class="has-inline-color has-vivid-red-color">RecyclerView showing Items in grid form.</span></strong></figcaption></figure></div>



<p><strong>When you click on any recyclerView item it will show Toast message: </strong></p>



<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://c1ctech.com/wp-content/uploads/2020/09/Screenshot_1601447456-1-576x1024.png" alt="" class="wp-image-2261" width="469" height="833"/><figcaption><strong><span class="has-inline-color has-vivid-red-color">Show Toast message on click of Jelly Bean</span></strong>.</figcaption></figure></div>