JSON is also known as (JavaScript Object Notation) is a format to exchange the data from the server. The data stored in JSON format is lightweight and easy to handle. With the help of JSON, we can access the data in the form of JsonArray, JsonObject, and JsonStringer. In this article, we will specifically take a look at the implementation of JsonObject using Volley in Android.
JSON Object: Json Object can be easily identified with “{” braces opening and “}” braces closing. We can fetch data from JSON objects with their key value. From that key, we can access the value of that key.
What we are going to build in this article?
We will be building a simple application in which we will be displaying a simple CardView in which we will display a single course that is available on Geeks for Geeks. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Below is the JSON object from which we will be displaying the data in our Android App.
{
“courseName”:”Fork CPP”,
“courseimg”:”https://media.geeksforgeeks.org/img-practice/banner/fork-cpp-thumbnail.png”,
“courseMode”:”Online Batch”,
“courseTracks”:”6 Tracks”
}
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Add the below dependency in your build.gradle file
Below is the dependency for Volley which we will be using to get the data from API. For adding this dependency navigate to the app > Gradle Scripts > build.gradle(app) and add the below dependency in the dependencies section. We have used the Picasso dependency for image loading from the URL.
// below line is used for volley library
implementation ‘com.android.volley:volley:1.1.1’
// below line is used for image loading library
implementation ‘com.squareup.picasso:picasso:2.71828’
After adding this dependency sync your project and now move towards the AndroidManifest.xml part.
Step 3: Adding permissions to the internet in the AndroidManifest.xml file
Navigate to the app > AndroidManifest.xml and add the below code to it.
XML
<!--permissions for INTERNET--><uses-permission android:name="android.permission.INTERNET"/> |
Step 4: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <androidx.cardview.widget.CardView android:id="@+id/idCVCourse" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:elevation="10dp" android:visibility="gone" app:cardCornerRadius="8dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:id="@+id/idIVCourse" android:layout_width="match_parent" android:layout_height="300dp" android:layout_margin="5dp" /> <TextView android:id="@+id/idTVCourseName" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:padding="5dp" android:text="Course Name " android:textColor="@color/black" android:textSize="18sp" android:textStyle="bold" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:orientation="horizontal" android:weightSum="2"> <TextView android:id="@+id/idTVBatch" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:padding="5dp" android:text="Batch" android:textColor="@color/black" /> <TextView android:id="@+id/idTVTracks" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:padding="5dp" android:text="Tracks" android:textColor="@color/black" /> </LinearLayout> </LinearLayout> </androidx.cardview.widget.CardView> <ProgressBar android:id="@+id/idLoadingPB" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:visibility="visible" /> </RelativeLayout> |
Step 5: Working with the MainActivity.java file
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Java
import android.os.Bundle;import android.view.View;import android.widget.ImageView;import android.widget.ProgressBar;import android.widget.TextView;import android.widget.Toast; import androidx.appcompat.app.AppCompatActivity;import androidx.cardview.widget.CardView; import com.android.volley.Request;import com.android.volley.RequestQueue;import com.android.volley.Response;import com.android.volley.VolleyError;import com.android.volley.toolbox.JsonObjectRequest;import com.android.volley.toolbox.Volley;import com.squareup.picasso.Picasso; import org.json.JSONException;import org.json.JSONObject; public class MainActivity extends AppCompatActivity { // creating variables for our textview, // imageview,cardview and progressbar. private TextView courseNameTV, courseTracksTV, courseBatchTV; private ImageView courseIV; private ProgressBar loadingPB; private CardView courseCV; // below line is the variable for url from // where we will be querying our data. @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // in below line we are initializing our all views. loadingPB = findViewById(R.id.idLoadingPB); courseCV = findViewById(R.id.idCVCourse); courseNameTV = findViewById(R.id.idTVCourseName); courseTracksTV = findViewById(R.id.idTVTracks); courseBatchTV = findViewById(R.id.idTVBatch); courseIV = findViewById(R.id.idIVCourse); // creating a new variable for our request queue RequestQueue queue = Volley.newRequestQueue(MainActivity.this); // as our data is in json object format so we are using // json object request to make data request from our url. // in below line we are making a json object // request and creating a new json object request. // inside our json object request we are calling a // method to get the data, "url" from where we are // calling our data,"null" as we are not passing any data. // later on we are calling response listener method // to get the response from our API. JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(Request.Method.GET, url, null, new Response.Listener<JSONObject>() { @Override public void onResponse(JSONObject response) { // inside the on response method. // we are hiding our progress bar. loadingPB.setVisibility(View.GONE); // in below line we are making our card // view visible after we get all the data. courseCV.setVisibility(View.VISIBLE); try { // now we get our response from API in json object format. // in below line we are extracting a string with its key // value from our json object. // similarly we are extracting all the strings from our json object. String courseName = response.getString("courseName"); String courseTracks = response.getString("courseTracks"); String courseMode = response.getString("courseMode"); String courseImageURL = response.getString("courseimg"); // after extracting all the data we are // setting that data to all our views. courseNameTV.setText(courseName); courseTracksTV.setText(courseTracks); courseBatchTV.setText(courseMode); // we are using picasso to load the image from url. Picasso.get().load(courseImageURL).into(courseIV); } catch (JSONException e) { // if we do not extract data from json object properly. // below line of code is use to handle json exception e.printStackTrace(); } } }, new Response.ErrorListener() { // this is the error listener method which // we will call if we get any error from API. @Override public void onErrorResponse(VolleyError error) { // below line is use to display a toast message along with our error. Toast.makeText(MainActivity.this, "Fail to get data..", Toast.LENGTH_SHORT).show(); } }); // at last we are adding our json // object request to our request // queue to fetch all the json data. queue.add(jsonObjectRequest); }} |
Now run your app and see the output of the app.
