New Update Version 3.80:

• Load featured image from RSS Feed
• Show image in ListView
• Cache image in local storage
• Scale image bitmap to fix out of memory issue

In the latest RSS standard, there is no tag for image. So in my previous project, I just preload an Android icon on each ListView row. In the past few weeks, many friends send me messages to request loading image in ListView. But, you need to keep in mind that the image tag is not specified in RSS Standard. In my example, I am using a wordpress plugin JMS Rss Feed in my website, so that RSS of my website will return a <jms-featured-image> tag which will contain a featured image in each article. In my Android RSS Reader App, I will search for tag to get the image url and load it into ListView.

This is the No.6 Android tutorial about how to create a Rss Reader Android App. If you want to build a RSS Reader step by step, you’d better start from the beginning. Here is the full tutorial list for this course.

• Android Rss Reader Example 1: How to Use ListView and ArrayAdapter
• Android Rss Reader Example 2: Load Data by HTTP Request in Android
• Android Rss Reader Example 3: Parse XML in Android
• Android Rss Reader Example 4: Drag to Refresh ListView
• Android Rss Reader Example 5: Show WebSite Content in WebView
• Advanced Tutorial 6: Load Featured Image In ListView From Rss Feed
• Advanced Tutorial 7: Add Android Navigation Drawer Menu

Add Image Tag In Your Rss

Before you start to build your RSS Reader App, you need to make sure there is image tag in your RSS feed. Since the image tag isn’t included in the RSS standard, you can install my plugin JMS Rss Feed to add an image tag in your RSS feed if you are using WordPress to build your website or blog. After installing the plugin successfully, there will be a< tag <jms-featured-image> appearing in your RSS Feed.

your website rss feed will look like:

<item>
	<title>Transparency Concept in PNG</title>
	<link>https://jmsliu.com/2661/transparency-concept-in-png.html?utm_source=rss&utm_medium=rss&utm_campaign=transparency-concept-in-png</link>
	<comments>https://jmsliu.com/2661/transparency-concept-in-png.html#comments</comments>
	<pubDate>Sun, 18 Jan 2015 03:11:59 +0000</pubDate>
	<category>
		<!&#91;CDATA&#91; Other Online Technology &#93;&#93;>
	</category>
	<guid isPermaLink="false">https://jmsliu.com/?p=2661</guid>
	<description>
		<!&#91;CDATA&#91;Transparency is fully supported in PNG, but it is very complicated to manipulate in program...&#93;&#93;>
	</description>
	<content:encoded>
		<!&#91;CDATA&#91;Transparency is fully supported in PNG, but it is very complicated to manipulate in program...&#93;&#93;>
	</content:encoded>
	<wfw:commentRss>https://jmsliu.com/2661/transparency-concept-in-png.html/feed</wfw:commentRss>
	<slash:comments>0</slash:comments>
	<jms-featured-image>https://jmsliu.com/wp-content/uploads/2015/01/Transparency-In-PNG.png</jms-featured-image>
</item>

Parse RSS Reed XML And Get Image URL

After we get rss feed ready, we can add some code to get the image url from rss feed. I am using XmlPullParser to parse the XML. So when I get a start tag whose name is “jms-featured-image”, we set the flag to get the image link. Here is the code example:

if (eventType == XmlPullParser.START_TAG) {
	if (xpp.getName().equals("item")) {
		pdData = new PostData();
		currentTag = RSSXMLTag.IGNORETAG;
	} else if (xpp.getName().equals("title")) {
		currentTag = RSSXMLTag.TITLE;
	} else if (xpp.getName().equals("link")) {
		currentTag = RSSXMLTag.LINK;
	} else if (xpp.getName().equals("pubDate")) {
		currentTag = RSSXMLTag.DATE;
	} else if (xpp.getName().equals("jms-featured-image")) {
		currentTag = RSSXMLTag.FEATURED_IMAGE;
	}
}

After we set the flag as RSSXMLTag.FEATURED_IMAGE, we will handle all the incoming text as the image url. Here is the source code:

if (eventType == XmlPullParser.TEXT) {
	String content = xpp.getText();
	content = content.trim();
	if (pdData != null) {
		switch (currentTag) {
		case TITLE:
			//do something...
			break;
		case LINK:
			//do something...
			break;
		case DATE:
			//do something...
			break;
		case CONTENT:
			//do something...
			break;
		case GUID:
			//do something...
			break;
		case FEATURED_IMAGE:
			if (content.length() != 0) {
				if (pdData.postThumbUrl != null) {
					pdData.postThumbUrl += content;
				} else {
					pdData.postThumbUrl = content;
				}
			}
			break;
		case DESCRIPTION:
			//do something...
			break;
		default:
			break;
		}
	}
}

All above code is modified basing on my third tutorial Parse XML in Android. Now we get all post information from the RSS Feed, including post title, date, description, featured image url and content. In next task, we will show the post featured image in ListView.

Load RSS Image In ListView

In last step, we already get all post information from RSS Feed xml. In this step, we will load image in each row of ListView. We will work in PostItemAdapter class. Once the ListView wants to get a View for its row, we will prepare a View with image and title. First of all, I will add two new attributes in ViewHolder class.

static class ViewHolder {
	TextView postTitleView;
	TextView postDateView;
	ImageView postThumbView;
	String postThumbViewURL;
}

The postThumbView is the ImageView which will show the post iamge. The postThumbViewURL is the image url where I will load the image in AsyncTask. Here is the example source code of getView in class PostItemAdapter:

public View getView(int position, View convertView, ViewGroup parent) {
	ViewHolder viewHolder;
	if (convertView == null) {
		convertView = inflater.inflate(R.layout.postitem, null);

		viewHolder = new ViewHolder();
		viewHolder.postThumbView = (ImageView) convertView.findViewById(R.id.postThumb);
		viewHolder.postTitleView = (TextView) convertView.findViewById(R.id.postTitleLabel);
		viewHolder.postDateView = (TextView) convertView.findViewById(R.id.postDateLabel);
		convertView.setTag(viewHolder);
	} else {
		viewHolder = (ViewHolder) convertView.getTag();
	}

	PostData post = datas.get(position);
	if (post.postThumbUrl != null) {
		viewHolder.postThumbViewURL = post.postThumbUrl;
		new DownloadImageTask().execute(viewHolder);
	} else {
		viewHolder.postThumbView.setImageResource(R.drawable.postthumb_loading);
	}

	viewHolder.postTitleView.setText(post.postTitle);
	viewHolder.postDateView.setText(post.postDate);
	return convertView;
}

For DownloadImageTask class, you can refer this article Download Images by AsyncTask. There is a very good example to teach you how to download image by AsyncTask.

More Performance Improvement

Right now, we successfully load the RSS feed image into the ListView. However, there are still much room to improve the performance. One improvement is downloading the images and saving them offline. This cache mechanism will improve the user experience significantly. When caching the image offline, the ListView doesn’t need to download the image again and again when your users are scrolling the ListView up and down. For more information, you can check this article Android Save And Load Downloading File Locally

The second improvement is scale down the image before showing them in ListView. As we just need to show an image icon besides each post in ListView, the image icon size may be 100 x 100 pixels or even smaller. We really don’t need a large image like 300 x 400 pixels or 600 x 300 pixels as our icon. So we can load a lower resolution image in memory and display it in the ListView. This improvement will save huge amount of memory in our app and it will make ListView scrolling more smoothly.

Try The Example With All Improvements

You can download and install this android app by click the following link, or scan the following QR code to download and install on your android phone simply. If you feel it is helpful, please support me by clicking the banner inside the app.
Download and Run Rss Reader App on Your Android Phone

Get Full Improvement Source Code Under $9.99

You will get whole Android RSS Feed App source code at $9.99. After you get the source code, you have the full right to use it.

What You Will Get

• Loading RSS Feed from internet
• Parse RSS Feed XML
• Show post title in a list
• Load post image beside title
• Cache image offline
• Scale image small to fit icon size

What You Can Do

• Load your own website rss feed
• Monetize with AdMob Ads
• Use in your own project
• Publish In Google Play