Home ANDROID WordPress to Android App using JSON API Tutorial

WordPress to Android App using JSON API Tutorial

105
0
SHARE
WordPress to Android App using JSON API Tutorial
WordPress to Android App using JSON API Tutorial

The Android App which you will developed using this tutorial will be work for fetching your WordPress website data (posts & pages) to the android layout. Alternative like webview in android is use to display your website pages as it is in android app. The difference between webview and actual android app using JSON is that in webview the original website is opened like it is open in mobile browser. But in Android app using JSON the data of the website will be fetch from the MySQL database and displayed on Android App layouts.

WordPress Website Android App using JSON

As the website took too many seconds for loading, this problem will be solved in Android App, App will be dedicated to specific website only benefiting the users to enjoy each and every content of your website in App format. Notification will help you to connect with users directly and anytime – no matter whether they are active on App or not.

So in WordPress to Android App using JSON API Tutorial, i will explain you how to create a Android App for your WordPress website. For that you need a WordPress website and other tool which we regularly used for developing android app.

WordPress JSON plugin

Step.1> You need to have a plugin in your WordPress website which will convert your WordPress data from MySQL database in JSON format.

Step.2> Install Jetpack or WP REST API plugin from WordPress plugin dashboard and activate it. (To know, Read it: How to Install and Activate WordPress Plugin)

Step.3> Now this plugin will give WordPress website output in JSON format through URL like: https://public-api.wordpress.com/rest/v1.1/sites/HERE YOUR WEBSITE DOMAIN/posts/ See output below.

JSON API OUTPUT
JSON API OUTPUT

Now we will use this URL in our android java file, lets start creating android app for WordPress Website.

How to Make Android App for WordPress Website

Tighten your seat belts we are moving to the world of coding. Now start your android studio and as usual create a Android App project with name BUZZMYCODE.

Creating WordPress Android App Project

We need the following dependencies to be added in our app level build.gradle file.

compile 'com.google.code.gson:gson:2.2.+'
compile 'com.android.volley:volley:1.0.0'

Add internet access permission by adding following line in AndroidManifest.xml file.

<uses-permission android:name="android.permission.INTERNET" />

Ok now we will create a layout in which the website post Title will be display. we will create a ListView in our activity_main.xml. In the ListView we will show all the latest post fetched from the REST API or Jetpack JSON API.

<LinearLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/postList"/>

</LinearLayout>

Ok, when any one click on title then it should show the content of the post for that we will create a new layout. Create a new file named post.xml inside your layout directory and write the following code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/title"
        android:layout_marginBottom="5dp"
        android:textSize="20dp"
        android:padding="5dp"
        android:textColor="#000000"/>

    <WebView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/content" />

</LinearLayout>

Here we will start coding our java files, as usual’s lets start with MainActivity.java

package buzzmycode.com;

import android.app.ProgressDialog;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

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.StringRequest;
import com.android.volley.toolbox.Volley;
import com.google.gson.Gson;

import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {
    String url = "http://YOUR WEBSITE URL/wp-json/wp/v2/posts?filter[posts_per_page]=10&fields=id,title";
    List<Object> list;
    Gson gson;
    ProgressDialog progressDialog;
    ListView postList;
    Map<String,Object> mapPost;
    Map<String,Object> mapTitle;
    int postID;
    String postTitle[];

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        postList = (ListView)findViewById(R.id.postList);
        progressDialog = new ProgressDialog(MainActivity.this);
        progressDialog.setMessage("Loading...");
        progressDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
        progressDialog.show();

        StringRequest request = new StringRequest(Request.Method.GET, url, new Response.Listener<String>() {
            @Override
            public void onResponse(String s) {
                gson = new Gson();
                list = (List) gson.fromJson(s, List.class);
                postTitle = new String[list.size()];

                for(int i=0;i<list.size();++i){
                    mapPost = (Map<String,Object>)list.get(i);
                    mapTitle = (Map<String, Object>) mapPost.get("title");
                    postTitle[i] = (String) mapTitle.get("rendered");
                }

                postList.setAdapter(new ArrayAdapter(MainActivity.this,android.R.layout.simple_list_item_1,postTitle));
                progressDialog.dismiss();
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError volleyError) {
                Toast.makeText(MainActivity.this, "Some error occurred", Toast.LENGTH_LONG).show();
            }
        });

        RequestQueue rQueue = Volley.newRequestQueue(MainActivity.this);
        rQueue.add(request);

        postList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                mapPost = (Map<String,Object>)list.get(position);
                postID = ((Double)mapPost.get("id")).intValue();

                Intent intent = new Intent(getApplicationContext(),Post.class);
                intent.putExtra("id", ""+postID);
                startActivity(intent);
            }
        });
    }
}

NOTE: DON’T FORGET TO REPLACE YOUR WEBSITE URL WITH YOUR WEBSITE DOMAIN NAME.

For specific post display we will create a new java file name Post.java

package buzzmycode.com;

import android.app.ProgressDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import android.widget.TextView;
import android.widget.Toast;

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.StringRequest;
import com.android.volley.toolbox.Volley;
import com.google.gson.Gson;
import java.util.Map;

public class Post extends AppCompatActivity {
    TextView title;
    WebView content;
    ProgressDialog progressDialog;
    Gson gson;
    Map<String, Object> mapPost;
    Map<String, Object> mapTitle;
    Map<String, Object> mapContent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.post);

        final String id = getIntent().getExtras().getString("id");

        title = (TextView) findViewById(R.id.title);
        content = (WebView)findViewById(R.id.content);

        progressDialog = new ProgressDialog(Post.this);
        progressDialog.setMessage("Loading...");
        progressDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
        progressDialog.show();

        String url = "http://YOUR WEBSITE URL/wp-json/wp/v2/posts/"+id+"?fields=title,content";

        StringRequest request = new StringRequest(Request.Method.GET, url, new Response.Listener<String>() {
            @Override
            public void onResponse(String s) {
                gson = new Gson();
                mapPost = (Map<String, Object>) gson.fromJson(s, Map.class);
                mapTitle = (Map<String, Object>) mapPost.get("title");
                mapContent = (Map<String, Object>) mapPost.get("content");

                title.setText(mapTitle.get("rendered").toString());
                content.loadData(mapContent.get("rendered").toString(),"text/html","UTF-8");

                progressDialog.dismiss();
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError volleyError) {
                progressDialog.dismiss();
                Toast.makeText(Post.this, id, Toast.LENGTH_LONG).show();
            }
        });

        RequestQueue rQueue = Volley.newRequestQueue(Post.this);
        rQueue.add(request);
    }
}

Now you can run your application. Just make sure that you have changed the URLs with your own blog and installed the REST API plugin or Jetpack Json API plugin correctly.

Following are the output of App created by me, you can also install my app from Google Play Store. Here is the link Buzzmycode android app.
[sociallocker id=”2776″]WORDPRESS WEBSITE ANDROID APP PROJECT[/sociallocker]
List of posts on Android App for WordPress Website

WordPress Website Android App
WordPress Website Android App

Output for Specific Post on WordPress Android App

WordPress Blog Android App
WordPress Blog Android App

If you have any doubts about WordPress to Android App Tutorial then please ask me in comment box , you will exact answer with complete solution.