Skip to main content

WP Android App using REST and volley part2

In last part of WP Android App using REST and volley tutorial we have learned to set up the basic UI of our WP app. In this part we will learn how to implement the below two features for our WP app.


  • Retrieve the sort description of the post and show in WP app

  • Show the featured Image in WP app



So first we will start by retrieving the short description of the post and show that description in our WP app.

In last tutorial we only show the title of the post, but we know showing only short title will not describe the post very well, so we should show some short description about the post. For this we don't need to do much work just need to retrieve the excerpt tag from the JSON Object that we have already fetched during retrieving the list of all post for our WP android App.

Below is the link of the series or Article of WP android App



Get the excerpt content from JSON Object



For getting the excerpt from the post list JSON Object and store it in variable we need to follow the below steps.

First of all we need to add new variable in our post.java file and set the get and set method.

String excerpt;
public String getExcerpt() {
return excerpt;
}
public void setExcerpt(String excerpt) {
this.excerpt = excerpt;
}


Now retrieve and set the value of excerpt into variable using below two-line of code, below code we have to add in the same method where we retrieve the title of the post.


//Get excerpt
JSONObject exerptObj=obj.getJSONObject("excerpt");
post.setExcerpt(exerptObj.getString("rendered"));


 

Further, we have to show that value in our app also, so we need to add a TextView to the our PostItem layout xml file as given below.

<TextView
android:id="@+id/excerpt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textIsSelectable="true"
android:textSize="14sp"
android:visibility="visible" />


 

At last we need to update our post item adapter file that is PostAdapter.java file, add the below line in our VideoViewHolder and declare the variable.


protected TextView vExcerpt;
vExcerpt=(TextView) v.findViewById(R.id.excerpt);


Then set the value to our text view.

 

((VideoViewHolder)holder).vExcerpt.setText(Html.fromHtml(post.getExcerpt()));


Important point to notice here is, we are setting the Html.fromHtml inside setText method , it is because excerpt are returned in the html format.

Get the featured Image of the Post in WP App



So far we have done with basic layout of the our WP App and now we want to set the featured image of the post to make it more attractive.

So for adding the featured Image we need to do two work.


  • First retrieve the featured Image

  • Set the featured image into the post



So for retrieving the featured image we need to modify getPost method of MainActivit.java file as given below.

Here we suppose that you have already added a variable in our Post.java file to store the featured Image Url like below.

 

String postImg;
public String getPostImg() {
return postImg;
}
public void setPostImg(String postImg) {
this.postImg = postImg;
}


 

For retrieving the featured image first we need to get the Url of the featured JSON Url and then we need to retrieve that json

 

JSONObject featureImage=obj.getJSONObject("_links");
JSONArray featureImageUrl=featureImage.getJSONArray("wp:featuredmedia");
JSONObject featureImageObj=featureImageUrl.getJSONObject(0);
String fiurl=featureImageObj.getString("href");


 

Retrieve the JSON and store the URL into the respective position in list.



 

if(fiurl!=null) {
Log.d(TAG, featureImageObj.getString("href"));
final int id=i;

JsonObjectRequest getMedia = new JsonObjectRequest(Request.Method.GET,
fiurl, null,
new Response.Listener<JSONObject>() {
@Override
public void onResponse(JSONObject response) {
try {
Log.d(TAG, response.getString("source_url"));
post.setPostImg(response.getString("source_url"));
} catch (JSONException e) {
e.printStackTrace();
}

postAdapter.notifyItemChanged(id);
}
}, new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
Log.d(TAG, error.toString());
}
}

);
requestQueue.add(getMedia);
}


 

After the above change we are successfully get the URL of our featured image and we need to set that into our imageview by modifying the our post adapter class as given below.

 

GlideApp.with(context)
.load(post.getPostImg())
.thumbnail(0.2f)
.apply(fitCenterTransform())
.centerCrop()
.diskCacheStrategy(DiskCacheStrategy.RESOURCE)
.skipMemoryCache(false)
.listener(new RequestListener<Drawable>() {
@Override
public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {

Log.e(TAG, "Load failed", e);
for (Throwable t : e.getRootCauses()) {
Log.e(TAG, "Caused by", t);
}
e.logRootCauses(TAG);
return false;
}

@Override
public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
return false;
}
})
.into(((VideoViewHolder) holder).vImage);


 

Now our WP android app will look like as given below.

WP android app

If you have not read the first post of creating the WP Android App then you can first have look on below WP android app using REST and Volley.

https://www.nplix.com/2017/11/12/wp-android-app-using-rest/

 

Comments

  1. […] Next PostWP Android App using REST and volley part2 […]

    ReplyDelete
  2. Full Source Code Please

    ReplyDelete
  3. Hi Rakha,

    you can find the source code at below link.
    https://github.com/debugandroid/WPApp

    Let me know in case of any further issue.

    Thanks,

    ReplyDelete
  4. Thanks a lot bro Pawan Kumar.
    Have a great day!

    ReplyDelete
  5. How to get featured image of post using retrofit??

    ReplyDelete
  6. In reply to Sagar Sharma.
    Refer the below tutorial:-
    https://www.nplix.com/wp-android-app-using-rest-volley-livedata-part3/

    // getting URL of the Post fetured Image
    JSONObject featureImage=obj.getJSONObject(“_links”);
    JSONArray featureImageUrl=featureImage.getJSONArray(“wp:featuredmedia”);
    JSONObject featureImageObj=featureImageUrl.getJSONObject(0);
    String fiurl=featureImageObj.getString(“href”);

    ReplyDelete

Post a Comment

Popular posts from this blog

WordPress Android App with REST API And Retrofit

Retrofit is the library which converts your JSON data into Java object. In this tutorial, we will learn about how to implement the Retrofit to create a WordPress Mobile App. As we all know, WordPress is the one of the biggest CMS (Content Management System) of the world. Wordpress full fill the requirements for all most every type of the website. So, in this tutorial, I am going to learn how to create an Android App using the WordPress REST API and Retrofit.
What is Retrofit?
If you want to know about Retrofit, I would like to give you just a simple one-line explanation of the Retrofit. It is a library which converts your REST HTTP request to Java interface. We will learn how we can do all these stuff using some very simple steps.

Further, you can check the Retrofit Library here.

So, In this tutorial, we will use the Retrofit to retrieve all post and there except ( A short Description of Post) form a WordPress website.
Prerequisite for using the Retrofit for WordPress Android App
There is s…

Flutter How to Start Android Activity from Flutter View

Flutter and Dart is an excellent combination for creating the UI, but for accessing the platform-specific service we need to open platform-specific activity. So lets in this article we will explore how to start an android activity and access the service from Flutter View.

Create a Project for this Android Activity Flutter View Demo Create a Project From File menu select the New Flutter Project Enter the project name Select the AndroidX support and click on next After the above, we step click on Finish We will have the following project structure created. Create the Second Activity in Android
Just go to the android folder and open it in separate windows. We will have the following project structure.









Create the Activity Just right click on the Kotlin folder and create a blank activity from the menu. If you create the activity then you may be required to upgrade the Gradle and do some import. So Just click on update and wait for the project sync completed.
Update the project build config …

Flutter Theme Creation, Programmatic Way

Flutter and Dart is an excellent combination for creating the mobile app with material design with nice GUI. Its lots of widget which help the developer for creating the app UI very fast with respect to the other language. You may face some problem in starting due to comm, curly brace and semicolon but after some time you will find the way how to work with these all stuff and it becomes very easy for you. But in this article, we are not going to discuss all these. In this article, we will handle a very interesting topic on how to create a custom theme or multiple themes and let's user decide which theme to use.



Create a flutter project



So let's create a flutter project by selecting the appropriate option from the File menu in android studio or Visual Code. If you are new to Flutter and Dart you can check out our recent post to get started Creating Cross-platform app using flutter.



Once your project is created you will get the default counter app and you try running the app in the…