Android Parsing JSON Data Basic tutorial part - II

Parsing a JsonArray in Android

In the previous part of the Json series , we seen the complete basics of json.In this part we are going to actually parse a sample Json Array.The Json will be passed aa a String within the code itself instead of caaling the external URL through HTTP call.

Lets get started.

The sample json we created for todays project[Footballmania]

{
"FIFA World cup 2015":[
{ 
    "Team_Code":"BRA",
           "Team_Name":"BRAZIL",
           "GOAL":"2"
}, 
        {           
           "Team_Code":"GER" 
           "Team_Name":"GERMANY"
           "GOAL":"1"
}
] 
};


The difference between [ and { - (Square brackets and Curly brackets) has been completely explained in the last post of Json.so take a look at that before you proceed.

If your JSON node starts with [, then we should use getJSONArray() method. Same as if the node starts with {, then we should use getJSONObject() method.

Creating New Android Project[FootballMania]

1. Create a new project in Eclipse from File ->New -> Android Application Project. I had left my main activity name as MainActivity.java and gave the package name as com.example.androidgreeve.simplejson

2.Since we are not making any HTTP calls in this part of tutorial,we will make no changes to the Manifest.xml file.

Manifest.XML

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.androidgreeve.simplejson"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.androidgreeve.simplejson.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Creating the Layout 

3.Now will create the required Front End for the todays project in activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" 
    android:background="@drawable/bg">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="29dp"
        android:text="Androidgreeve"
        android:textAppearance="?android:attr/textAppearanceLarge" 
        android:textColor="#fff"
        android:textStyle="bold"
        android:textSize="30sp"
        />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="23dp"
        android:text="FIFA -Final Scoreline"
        android:textAppearance="?android:attr/textAppearanceLarge" 
        android:textColor="#fff"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView2"
        android:layout_below="@+id/textView3"
        android:layout_marginTop="54dp"
        android:text="Code"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#fff" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView4"
        android:layout_below="@+id/textView2"
        android:layout_marginTop="60dp"
        android:text="Team"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#fff"
        android:textSize="15sp" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView4"
        android:layout_alignBottom="@+id/textView4"
        android:layout_centerHorizontal="true"
        android:text="Score"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#fff" />


</RelativeLayout>

Parsing the Json data.

//passing json Array as string.
4.String strJson="{ \"FIFA World cup 2015\" " +
        ":[{\"Team_Code\":\"BRA\"," +
        "\"Team_Name\":\"BRAZIL\"," +
        "\"GOAL\":\"2\"}," +
        "" +
        "{\"Team_Code\":\"GER\"," +
        "\"Team_Name\":\"GERMANY\"," +
        "\"GOAL\":\"1\"}] }";
           
                // Create the root JSONObject from the JSON string.
            JSONObject  jsonRootObject = new JSONObject(strJson);

            //Get the instance of JSONArray that contains JSONObjects
                  JSONArray jsonArray = jsonRootObject.optJSONArray("FIFA World cup 2015");
                   
                //Iterate the jsonArray and print the info of JSONObjects
                  for(int i=0; i < jsonArray.length(); i++){
                   
                     JSONObject jsonObject = jsonArray.getJSONObject(i);
                         
                     String Team_Code = jsonObject.optString("Team_Code").toString();
                     String Team_Name = jsonObject.optString("Team_Name").toString();
                     int GOAL = Integer.parseInt(jsonObject.optString("GOAL").toString());
                      

Complete Code of Mainactivity.java

6. The complete code of the Main_activity
package com.example.androidgreeve.simplejson;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.TextView;

public class MainActivity extends Activity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        TextView T_name= (TextView)findViewById(R.id.textView3);
        TextView T_Code= (TextView)findViewById(R.id.textView4);
        TextView T_goal=(TextView)findViewById(R.id.textView5);
        
        
        String strJson="{ \"FIFA World cup 2015\" " +
        ":[{\"Team_Code\":\"BRA\"," +
        "\"Team_Name\":\"BRAZIL\"," +
        "\"GOAL\":\"2\"}," +
        "" +
        "{\"Team_Code\":\"GER\"," +
        "\"Team_Name\":\"GERMANY\"," +
        "\"GOAL\":\"1\"}] }";   
              
               try {
             
                     // Create the root JSONObject from the JSON string.
              JSONObject  jsonRootObject = new JSONObject(strJson);

              //Get the instance of JSONArray that contains JSONObjects
                    JSONArray jsonArray = jsonRootObject.optJSONArray("FIFA World cup 2015");
                    String name="",code="";
                    String goal="";
                    //Iterate the jsonArray and print the info of JSONObjects
                    for(int i=0; i < jsonArray.length(); i++){
                   
                        JSONObject jsonObject = jsonArray.getJSONObject(i);
                         
                        String Team_Code = jsonObject.optString("Team_Code").toString();
                        String Team_Name = jsonObject.optString("Team_Name").toString();
                        int GOAL = Integer.parseInt(jsonObject.optString("GOAL").toString());
                         
                        name+=Team_Name+"  ";
                        code+=Team_Code+"\n";
                        goal+=GOAL+"\n";
                        //Setting data to XML
                        T_name.setText(name);
                        T_Code.setText(code+"\n");
                        T_goal.setText(goal+"\n");
                        
                      }
            
                    
                   //output.setText(data);
         
                } catch (JSONException e) {e.printStackTrace();}

    }
      
}
    

Whats Next?

7.No worries, this was the simplest method to parse data.In the next tutorial we will parse Json URl anfd fetch data from it.
Dont miss any thing Just subscribe and Share it.  

Happy developing!Happy Coding.

Android Json Parsing basics tutorial

Step by Step guide to learn Json and parsing it in android.  

JSON is very light weight, structured, easy to parse and much human readable. JSON is best alternative to XML when your android app needs to interchange data with your server. 

In this tutorial we are going to learn how to parse JSON in android.But Before that we need to get the basics of Json correctly understood so that it could become easy to implement.

JSON stands for JavaScript Object Notation.It is an independent data exchange format and is the best alternative for XML.

You can see the difference between an XML and Json in the below code.

Simple Example :

Json Version of It.

{"employees":[
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

This XML syntax also defines an employees object with 3 employee records:
The XML version of it.

<employees>
    <employee>
        <firstName>John</firstName> <lastName>Doe</lastName>
    </employee>
    <employee>
        <firstName>Anna</firstName> <lastName>Smith</lastName>
    </employee>
    <employee>
        <firstName>Peter</firstName> <lastName>Jones</lastName>
    </employee>
</employees>

Android provides four different classes to manipulate JSON data. 

These classes are JSONArray,JSONObject,JSONStringer and JSONTokenizer.

The following table will help to understand in detail about it.

JSON Syntax Rules

JSON syntax is a subset of the JavaScript object notation syntax:

• Data is in name/value pairs
• Data is separated by commas
• Curly braces hold objects
• Square brackets hold arrays

JSON data is written as name/value pairs.

A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value:

"firstName":"John"

JSON Values

JSON values can be:

• A number (integer or floating point)
• A string (in double quotes)
• A Boolean (true or false)
• An array (in square brackets)
• An object (in curly braces)
• null

Lets see some Sample JsonArray String 

JSONArray String is like this

[{
"internalName": "blaaa",
"dataVersion": 0,
"name": "Domin91",
"profileIconId": 578,
"revisionId": 0,
},
{
"internalName": "blooo",
"dataVersion": 0,
"name": "Domin91",
"profileIconId": 578,
"revisionId": 0,
}]


An example of JSONObject Is like this
{
"internalName": "domin91",
"dataVersion": 0,
"name": "Domin91",
"profileIconId": 578,
"revisionId": 0,
} 


You can find the difference in the braces of the JSonArray and JsonObject.

Why Json?Why not XML? Difference?Advantages  all this question answer can be found below.

Advantages of JSON

• Smaller message size
• More structural information in the document
  • Can easily distinguish between the number 1 and the string "1" as numbers, strings (and Booleans) are represented differently in JSON.
  • Can easily distinguish between single items and collections of size one (using JSON arrays).
• Easier to represent a null value
• Easily consumed by JavaScript

Advantages of XML

• Namespaces allow for sharing of standard structures
• Better representation for inheritance
• Standard ways of expressing the structure of the document: XML schema, DTD, etc
• Parsing standards: DOM, SAX, StAX
• Standards for querying: XQuery and XPath
• Standards for transforming a document: XSLT

Draw

• Human Readable
• Easy to parse

You can find lots of tools to convert from XMl to Json and viceversa.

Here we end the basics of Json.In the next tutorial we will how to actually parse json in Android app , and it advantages.

If any doubts feel free to ask in the comment below.Any suggestion to be added you are welcomed.

Login screen with Compound drawables

In the last post we looked about the Compound drawables that makes the easy designing of your app.
The compound drawables  can be used to place the image next to textbox.
So In this post we will go through an example of using it by creating a sample login screen.

In the last post we looked about the Compound drawables that makes the easy designing of your app.
The compound drawables  can be used to place the image next to textbox.
So In this post we will go through an example of using it by creating a sample login screen.

So let’s start by creating a new project.

1. Create a new project in Eclipse from File --> New --> Android --> Application Project. While creating the project select the app theme which has Action Bar as shown in the below image.

2.Open the activity_main.xml for creating the layout of the app.
Type the code in the activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center"
        android:orientation="vertical"
        android:layout_marginTop="16dp"
        >

    <EditText
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:gravity="center_vertical"
              android:hint="@string/user_name"
              android:drawableLeft="@drawable/ic_action_person"
              android:drawablePadding="8dp"
            />
    <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:hint="@string/password"
            android:drawableLeft="@drawable/ic_action_accounts"
            android:drawablePadding="8dp"
            />

<Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/log_in"
            android:drawableRight="@drawable/ic_action_accept"
            />

</LinearLayout> 

3.Run the app  

Please subscribe to our site.Share it on facebook and twitter.

How to use Compound drawables in your android app design

A Small Design tip: Compound Drawables.

A question by our reader

I designed a layout which worked perfectly well, but I updated to ADT 16 and the new Lint tool gave me a warning 

"This tag and its children can be replaced by one and a compound drawable."

In this article we’ll have a look at what they are and see how we can use them to simplify some of our layouts.

A quick dig through the documentation for TextView lead me to the setCompoundDrawableWithIntrinsicBounds() method which is a method of attaching drawables to a TextView. We can replace the LinearLayout and its two children with a single TextView:

How to use it:

<TextView

        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text" 
        android:gravity="center"/>

Then in the onCreate() method of our activity we can assign a drawable to appear above the the text.

@Override

public void onCreate( Bundle savedInstanceState )

{

    super.onCreate( savedInstanceState );

    setContentView( R.layout.main );

    TextView tv = (TextView) findViewById( R.id.textView );

    tv.setCompoundDrawablesWithIntrinsicBounds( 0,

        R.drawable.ic_launcher, 0, 0 );

}

Our TextView has four properties that let us specify images to be set around it. These ones are: drawableLeft, drawableRight, drawableTop and drawableBottom. We also can use another one which defines the padding among the text and the images: drawablePadding.

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="16dp"              
              android:gravity="center"
              android:layout_gravity="center_horizontal"
              android:text="@string/my_contacts"
              android:drawableRight="@drawable/ic_action_add_group"
              android:drawablePadding="8dp"
        />

Cool! We removed a level of complexity and made our XML much simpler. It’s almost as easy to set these drawables from code:
textView.setCompoundDrawablesWithIntrinsicBounds
(0, 0, R.drawable.ic_action_add_group, 0);

textView.setCompoundDrawablePadding(...);
There are plenty of other use cases where compound drawables can simplify your layouts. If you use the Lint tool in ADT 16+ you will be alerted to instances where you can make this optimisation. It my only sound like a small improvement to create one Widget instead of three, but if we expand this to the layout that we created in Intelligent Layouts.
What Next ?
We would like to Demonstrate this by designing a small Login page for our app.