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.
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
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.
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.
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.
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.
Then set the value to our text view.
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.
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.
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.
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
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.
Now our WP android app will look like as given below.
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/
- 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
- WP Android App using REST and Vollery Part1
- WP Android App using REST and Vollery Part2
- LiveData and ViewModel for WP Android App using REST and volley part3
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.
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/
[…] WP Android App using REST and volley part2 […]
ReplyDelete[…] Create WordPress App using JSON part2 […]
ReplyDelete[…] WP Android App using REST and volley part2 […]
ReplyDelete[…] Next PostWP Android App using REST and volley part2 […]
ReplyDeleteFull Source Code Please
ReplyDeleteHi Rakha,
ReplyDeleteyou can find the source code at below link.
https://github.com/debugandroid/WPApp
Let me know in case of any further issue.
Thanks,
Thanks a lot bro Pawan Kumar.
ReplyDeleteHave a great day!
You are most Welcome!
ReplyDelete[…] WP Android App using REST and volley part2 […]
ReplyDeleteHow to get featured image of post using retrofit??
ReplyDeleteIn reply to Sagar Sharma.
ReplyDeleteRefer 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”);
You wrote this post with great care and attention to detail regarding this issue. Your article provided me with useful information. It's quite beneficial to me as well as others. Mobile App Development Company In Melbourne
ReplyDeleteNice job, this is essential information that is shared by you. This information is meaningful and factual for us to increase our knowledge about it. Always keep sharing this type of information. Website Design Ireland
ReplyDeleteI admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.Hire a hacker site.
ReplyDeleteLots of valuable data can be taken from your article. I am happy that you have shared great info with us, It is a gainful article for us. Thankful to you for sharing an article like this. Android App Development Online Dubai
ReplyDeleteThanks for publishing such great knowledge. You are doing such a great job. This info is very helpful for everyone. Keep it up. Thanks once again for sharing it. hire hackers for whatsapp
ReplyDeletecheck this kind of article and I found your article which is related to my interest.Coding Courses in Adelaide Genuinely it is good and instructive information. Thankful to you for sharing an article like this.
ReplyDeleteThis comment has been removed by the author.
DeleteYou are providing good knowledge. It is really helpful and factual information for us and everyone to increase knowledge. about Webpage Design .Continue sharing your data. Thank you.
ReplyDeleteI read your post and got it quite informative. I couldn't find any knowledge on this matter prior to. I would like to thanks for sharing this article here.web design company san antonio site.
ReplyDeleteYes, Really very good information, this information is excellent and needy for everyone. I am very thankful to you for providing this kind of knowledge. Thanks once again for sharing it. John Deere Tractor price
ReplyDeleteI never found such type of blog. You blog is very different from other ones. Ashok Leyland 10 Wheeler
ReplyDeleteYour blog is very good, it will be easy to buy trucks.
ReplyDeleteTata commercial vehicle
consider exploring Liberating Solution for additional insights and assistance. Thanks once again for sharing."
Delete