Turing Your WordPress site into an android App

Turn your WordPress site into a native android app. Certainly not talking about creating a webview and loading an URL with it. In conclusion almost all android apps for website’s are URL loaded inside a webview. Although the webview is present here but it’s different.Let me explain.Don’t have to,let me show it.





In fact this video is sufficient explanation. However for this project we are using an actual website, yes this website. Hence turning this site into an android app. So let’s begin, Mainly this project is divided in to three.

  1. WordPress part.
  2. Web-service Part.
  3. Android part.

WordPress Part

In the first place start by installing a plugin for Accelerated Mobile Pages (AMP), i am using this one. Then after installing the plugin you can check your amp url. As a result normal url for a post is “www.yourwebsite.com/post/” and it’s amp url is “www.yourwebsite.com/post/amp/”. Keep it in mind we will be using it later.

Web-service Part

In addition to WordPress part this gets posts details from your database to android. Since it’s the sole purpose of this part. While only focus of this projects are posts. You can modify it as you like, either posts or pages even both. On with the code, Like my all other posts this web-service is also written in php. While WordPress is written using php as the scripting language. Therefore making it much more practical to use php. Create a folder in your public_html so we can access it like this “www.yourwebsite.com/yourfolder/webservice.php”.

However some of the things are gathered using WordPress functions. Especially relevant things like database name password thumbnail etc. So sensitive information’s are therefore hidden. Another interesting thing is that this code is universal just copy  and use. Also it work’s with any WordPress websites.

webservice.php




Android Part

Finally, Android part include fetching the information provided by the web-service. However the received information has a pattern and it’s repeating. Therefore we need to create a type for pattern and an adapter for repeating part. Also a list for displaying the adapter. Finally activity for reading the post.

Type

All the information received are of string type so it’s easy to work with. Class file for setting and getting information in this case string value’s. Another way is you can just sent it directly to the adapter, by using type complexity of the code is reduced.

WordPressType.java

Before creating the adapter, See the images in the below image. Another class is created for caching those images to avoid using up the resources.

Turn your wordpress site into an android app logicchip1

BitmapCache.java

 

Adapter

So the adapter extents RecyclerView.Adapter and it’s placed inside the RecyclerView that’s the list. Like any adapter both xml and java part is required. CardView looks cool so it’s created with card view.

wordpress_layout.xml

Errors are common while coding, if  “com.android.volley.toolbox.NetworkImageView” showing an error include volley in your dependencies .

AdapterForWordPress.java

So the adapter contain ((WordPress)context).LoadPostView (); , because adapter can’t directly call parent activity methods. However LoadPostView() is the method and WordPress is the parent activity.

Parent activity

So the Parent activity contains SwipeRefreshLayout + NestedScrollView + RecyclerView. As a result of combining this, user interface is more material design. However this includes swipe refresh option auto hiding of action bar, and CallingPage is the web-service method. Retrieved web-service information is changed to type and that is place inside an array-list is passed to adapter. Another method LoadPostView is for the launching activity to read the post along with the link of selected post.

Also user interface for parent activity.

activity_wordpress.xml

 

Reading post

So Remember the AMP mentioned above seems like we are using it now. First of all see the xml yes it contain’s a webview, then the class file PostView. In fact parameter passed from parent activity is changed like this, from “www.yourwebsite.com/post/” to “www.yourwebsite.com/post/amp/” . As a result of this operation webview loads the AMP version of your page. Because of class MyWebChromeClient inside PostView  we can play videos in webview. Similarly MyBrowser class is for handling the clicks inside the webview along with some other functions like 404, 403 error’s etc.

activity_post_view.xml

PostView.java

Constants.java

In order to keep constant values for easy access.

 

 

Leave a Reply

%d bloggers like this: