Display RecyclerView in Gridview Layout Android | Android Basic Tutorials

If you are wondering how to show your typical recylerview in gridview like structure with multi column structure then keep reading this blog, because today we are exactly going to build such android app that uses gridview to display the item that are initialized through recyclerview. 

RecyclerView as GridView 

The Final Android app looks like the Screenshot shown above in the thumbnail. So without further delay, lets create an android studio project for this tutorials, 
I am going to name my project as "Grid Cycle" but as you know you can give your own name for your project.

Once the project is created, Since we are going to use custom view to display the Title and image of gridview item as shown above, we need CardView and RecyclerView to hold the data, Obviously. But they do not come integrated by default to our project.


We need to add them manually, Open the activity_main.xml and find RecyclerView at the left component pane, and there you will see little Download icon with recyclerview,  click on that and android studio will give the  option to add dependency to our project, Click on Ok, Repeat the same process for CardView. 


Now Drag and Drop the RecyclerView into layout and set the constraint. I Will give id as "dataList" for the recyclerview. 

Designing Custom LayoutView For RecyclerView

As i Said Before, we will use custom layout for gridItem of recyclerView, so lets create that layout file , Create new layout resource file by right clicking on res folder of our android project, give any name you like and create it.  Our Layout Will look like as shown below.



Our Layout has one ImageView and TextView, which will be used to display data that describe that particular item. 



Now in our MainActivity.java lets create recyclerview variable and connect with xml resouces that we have created with activity_main.java. 



RecyclerView dataList;
And inside OnCreate : 


dataList = findViewById(R.id.dataList);

now lets create required resources for our recyclerView , ie image and titles for the list item, and here we are going to create icon using VectorAsset feature of android studio. 

To Create ICON, right click on >> Drawable and Select New >> Select Vector Asset Option >>  New Dialog  will appear and there you can select clip art , as there are plenty available for you to use.  


finally create Two lists for titles and images like Given below;


List<String> titles = new ArrayList<>();
List<Integers> images = new ArrayList<>();
titles.add("First Item");
titles.add("Second Item");
titles.add("Third Item");
titles.add("Fourth Item");
images.add(R.drawable.ic_airline_seat_flat_angled_black_24dp);
images.add(R.drawable.ic_airplanemode_active_black_24dp);
images.add(R.drawable.ic_brightness_1_black_24dp);
images.add(R.drawable.ic_build_black_24dp);
adapter = new Adapter(this,titles,images);

Now Lets create adapter to bind the data to our Recyclerview, Create new Java Class Called adapter and with following code. 


Now, lets create the instance of Adapter in our mainactivity.java file 


Adapter adapter = new Adapter(this,titles,images);

Now we need to create the LayoutManager for the  recyclerview and here we need to make changes , generally we used to use LinearLayoutManager() but now we will use GridLayoutManager() as shown below :



GridLayoutManager gridLayoutManager = new GridLayoutManager(this,2,GridLayoutManager.VERTICAL,false);
dataList.setLayoutManager(gridLayoutManager);
dataList.setAdapter(adapter);//set adapter to recyclerview

The "2" in the GridLayoutManager Defines the number of Column to be displayed in the activity , you can change it accordingly. 

Now the Final MainActivity.java code looks like below: 





And Finally , we can run our application to see how it looks like in the Devices, you can add or Remove data from the list to make changes in Gridview item.



Full Source Code is Available in Github: HERE

This Tutorial is Part of the Android Tutorial Series Created for Our Youtube Channel SmallAcademy, You can find watch the full video Here.



No comments

Powered by Blogger.