Wordpress to Android App using WP REST API Tutorial

Hello, guys welcome to WordPress to Android App Tutorial. In past few years WordPress has grown so much. It is the most popular blogging platform as more than 60 million websites are running on it.

WP REST API is one of the best features added to WordPress. It allows developers to create apps that can easily integrate with WordPress platform. Using this API we can easily retrieve our WordPress site’s data like posts, media, users, etc in JSON format by just sending HTTP request.

So in this tutorial I will teach you to make a very basic Android app for WordPress blog or website using WP REST API.

Note: This tutorial is about creating a very basic Android APP using WP REST API. If you are looking for a complete app with all the standard features like, PUSH NOTIFICATION, BOOKMARKS, SOCIAL SHARING etc. Then you can buy it from us. To get the Android App for your WordPress Blog CLICK HERE.

WordPress to Android App using WP REST API Video Demo

You can check this small video clip demonstrating the final output of this WordPress to Android App Tutorial.

Now, if you want to make the same then lets begin our tutorial.

How to work WP REST API?

To use WP REST API we require following two plugins. So first install these plugins in your wordpress blog.

Installing REST API Plugins

WordPress REST API (Version 2)

Get this plugin from here -> https://wordpress.org/plugins/rest-api/
It is the official WP REST API plugin that will be used to fetch data from blog.

REST API – Filter Fields

Get this plugin from here -> https://wordpress.org/plugins/rest-api-filter-fields/
The JSON data that we will fetch contains some fields that we don’t require. So using this plugin we can filter the data to decrease its size.

Just go the links that I have given above to download and then install these plugins on your blog.

Fetching All Post of Your Website

You can fetch information about all the post on your blog by following URL.

http://your-blog-url/wp-json/wp/v2/posts

For a real example you can see the URL with my blog. Just go to the following link

http://www.thejavaprogrammer.com/wp-json/wp/v2/posts

You will see the following JSON Data.

Fetching Specified Number of Post

For fetching specified number of posts you can use post-per-page filter. The below URL will fetch only 3 posts.

http://your-blog-url/wp-json/wp/v2/posts?filter[posts_per_page]=3

Fetching Particular Post

You can fetch any particular post by its id.

http://your-blog-url/wp-json/wp/v2/posts/67

Here 67 is the id of the post.

Filtering Fields

As you have seen in above JSON data that there are several fields that we don’t require. So with the help of REST API – Filter Fields plugin you can filter few fields. For example you want to fetch only post’s id and title then it can be done by using following URL.

http://your-blog-url/wp-json/wp/v2/posts?fields=id,title

You can also fetch other fields along with id and title by just adding them in the URL. Like if you want to fetch id, title and content then it can be done using following URL.

http://your-blog-url/wp-json/wp/v2/posts?fields=id,title,content

Just make sure you use valid field name.

I hope now you got basic idea of using WP REST API. You can learn more about it by reading API documentation at below link.

http://v2.wp-api.org/reference/

How to Make Android App for WordPress Blog

Below I have shared the example for making simple app. In this app I have fetched titles of some posts and displayed them in a list on one activity. When you will click on any title then it will open another activity and display the title and content of that particular post.

For fetching the data from internet I have used Volley library. If you don’t know how to use it then I would recommend you to read below tutorial.

Android Volley Tutorial to Get JSON from Server

Creating WordPress to Android App Project

Open Android Studio and Create a new 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" />

First 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.

<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>

Now create a new file named post.xml inside your layout directory and write the following code. This file will be used to show the selected post.

<?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>

Now come inside MainActivity.java and write the following code.

package com.wordpressappexample;

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://www.thejavaprogrammer.com/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);

}

});

}

Now create a new Activity to display the selected post. I have created Post.java

package com.wordpressappexample;

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://www.thejavaprogrammer.com/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 correctly.

wordpress to android app tutorial — WordPress to Android App

Try clicking on one of the post and you will see the complete post.

So our app is working fine. Yes we still need to work on improving the UI design, but this tutorial meant to explain you the concept. Now you can do whatever you want with your apps UI.
You can also download the source code of this WordPress to Android App Tutorial from the link given below.

[sociallocker id=1372] WordPress to Android App Source Code [/sociallocker]

If you have any queries regarding this WordPress to Android App Tutorial, then ask them in comment section. I will try my best to help you.