Parsing JSON Using Volley & RecyclerView

<div dir=”ltr” style=”text-align: left;”><span style=”font-family: ‘georgia’ , ‘times new roman’ , serif;”>Hello Everyone, welcome to another tutorials post on how to parse JSON in android studio using Volley and Display parse data into recyclerView. Here today we will use volley to extract the data from the JSON file and Picasso is used for displaying images in recyclerView.</span>
<span style=”font-family: ‘georgia’ , ‘times new roman’ , serif;”>In the last post, we discussed how to use GridViewLayout for recyclerview and you can read that post first, only because almost all the procedure is same, since we will be using the recyclerView here as well with Volley. </span>
<span style=”font-family: ‘georgia’ , ‘times new roman’ , serif;”>
</span>
<h4 style=”text-align: left;”><span style=”font-family: ‘georgia’ , ‘times new roman’ , serif;”>Lets Start By Creating Android Studio Project :</span></h4>
<div><span style=”font-family: ‘georgia’ , ‘times new roman’ , serif;”>&gt;&gt; Create an Android Studio Project </span></div>
<div><span style=”font-family: ‘georgia’ , ‘times new roman’ , serif;”>&gt;&gt; Lets Add Required Libraries for this project. </span></div>
<div><span style=”font-family: ‘georgia’ , ‘times new roman’ , serif;”> </span></div>
<div><span style=”font-family: ‘georgia’ , ‘times new roman’ , serif;”>So We will need Picasso and volley for this project, Copy the dependency URL given below and paste it to Build.gradle file of your app section:</span></div>
<div></div>
<blockquote class=”tr_bq”>implementation ‘com.squareup.picasso:picasso:2.71828’
implementation ‘com.android.volley:volley:1.1.1′</blockquote>
Once the project is synced, its time to create the required layout for our recycler view, We will create one custom layout view for the recyclerview. The layout contains ImageView for song cover image, Song title, and Artists image.

Also, Add RecyclerView widget in activity_main.xml files to display the data.

&nbsp;
<table class=”tr-caption-container” style=”margin-left: auto; margin-right: auto; text-align: center;” cellspacing=”0″ cellpadding=”0″ align=”center”>
<tbody>
<tr>
<td style=”text-align: center;”><a style=”margin-left: auto; margin-right: auto;” href=”https://1.bp.blogspot.com/-TdqU_d8ovBs/XiajPIs_i7I/AAAAAAAAFHU/ooRBm3ygQ6gE1dOeikGnNRmYxCe0OuSOgCLcBGAsYHQ/s1600/custom_layout.png”><img src=”https://1.bp.blogspot.com/-TdqU_d8ovBs/XiajPIs_i7I/AAAAAAAAFHU/ooRBm3ygQ6gE1dOeikGnNRmYxCe0OuSOgCLcBGAsYHQ/s640/custom_layout.png” width=”640″ height=”577″ border=”0″ data-original-height=”872″ data-original-width=”965″ /></a></td>
</tr>
<tr>
<td class=”tr-caption” style=”text-align: center;”>Custom Layout For RecyclerView</td>
</tr>
</tbody>
</table>
The XML layout source code is given below:
<script src=”https://gist.github.com/bikashthapa01/50242f4055e3c0fec707ca9589c22e19.js?file=custom_layout.xml”></script>

Now we will create the Song.java class, which will hold the data extracted from the JSON file. Let’s start by creating the class in our project, we will also create setter and getter for the fields we have in the class.

The Class source code is given below:
<script src=”https://gist.github.com/bikashthapa01/50242f4055e3c0fec707ca9589c22e19.js?file=Song.java”></script>

Now let’s create the adapter, that will help us bind the data to our custom layout using recyclerView.
The source code is given below:

<script src=”https://gist.github.com/bikashthapa01/50242f4055e3c0fec707ca9589c22e19.js?file=Adapter.java”></script>

The JSON data is saved in the URL given here:
<blockquote class=”tr_bq”><span style=”background-color: white; color: green; font-family: ‘courier new’; font-size: 13.5pt; font-weight: bold;”><a href=”http://starlord.hackerearth.com/studio” target=”_blank” rel=”noopener noreferrer”>http://starlord.hackerearth.com/studio</a></span></blockquote>
Now the following code is used to extract the data from the given URL and We are using List&lt;Song&gt; to store each song object received from the JSON file.  And afterward we are passing that to Adapter.

<script src=”https://gist.github.com/bikashthapa01/50242f4055e3c0fec707ca9589c22e19.js?file=volley.java”></script>

Final code of MainActivity.java is given below:

<script src=”https://gist.github.com/bikashthapa01/50242f4055e3c0fec707ca9589c22e19.js?file=MainActivity.java”></script>

Finally, add Internet Permission at your AndroidManifest.xml file and we are ready to go.
<blockquote class=”tr_bq” style=”background-color: white; font-family: ‘Courier New’; font-size: 13.5pt;”>&lt;<span style=”color: navy; font-weight: bold;”>uses-permission </span><span style=”color: #660e7a; font-weight: bold;”>android</span><span style=”color: blue; font-weight: bold;”>:name</span><span style=”color: green; font-weight: bold;”>=”android.permission.INTERNET”</span>/&gt;</blockquote>
&gt;&gt; Let’s Run the app and see what happens. Let’s go.

Watch Video Tutorials here:

<span style=”font-size: x-large;”>FINAL FULL SOURCE CODE FOR THIS PROJECT IS GIVEN <a href=”https://smallacademy.co/download.php/?get=aHR0cHM6Ly9naXRodWIuY29tL2Jpa2FzaHRoYXBhMDEvYW5kcm9pZC1yZWN5Y2xlcnZpZXctYXMtZ3JpZHZpZXc,” target=”_blank” rel=”noopener noreferrer”>HERE </a>.</span>

</div>

We will be happy to hear your thoughts

Leave a reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

SmallAcademy
Logo