New Update Version 4.4:

  • Add Navigation Drawer
  • Load rss from a specified category
  • Enable to switch categories
  • Fix some bugs

In last tutorial, I have talked about how to add featured image in your website rss feed and show image in my Android RSS Reader. To improve the performance in RSS Reader 3.8, I also add a cache mechanism. I am using AsyncTask to download the image from website, then saving it on mini-sd card or external storage. If there is no external storage available, I will save the image in internal storage. Another improvement of Rss Reader 3.8 is scaling down the image bitmap, which will use less memory to hold the post featured image in ListView. Rss Reader 3.8 is a final version which has all the necessary features for a simple RSS Reader. However, there are still mcuh space to improve. For example, we can add a side menu to allow people to switch rss feed from different website, or from different categories. Staring from Android 4, there is a new Android component, Navigation Drawer, to help us implement this type of side menu.

In the new version, I will add navigation drawer in my Rss Reader to allow readers to switch Rss Feed by categories. The new version will be 4.0. From Rss Reader 4.0, the whole project will be built in Android Studio. The reason I am using Android Studio is very simple. Android Studio is the official Android IDE now. Migrating project from Eclipse to Android Studio is a very headache task. After several hours hard working, I gave up in the end. Rss Reader 4.0 is a pure Android Studio project now.

This is the No.7 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.

Build Main App Layout With DrawerLayout

To add a navigation drawer in Rss Reader, we need to use DrawerLayout object as the root view of the layout. In the DrawerLayout, there are two views. One is FrameLayout which holds the main content of our app. The other one is fragment which is the navigation drawer. Here is the example of source code activity_main.xml.

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout"
    android:layout_width="match_parent" android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout android:id="@+id/container" android:layout_width="match_parent"
        android:layout_height="match_parent">
        <fragment
            android:id="@+id/postlist_fragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:tag="postlist_fragment"
            android:name="com.jmsliu.rssreader.PostListFragment"/>
    </FrameLayout>

    <fragment android:id="@+id/navigation_drawer"
        android:layout_width="@dimen/navigation_drawer_width" android:layout_height="match_parent"
        android:layout_gravity="start" android:name="com.jmsliu.rssreader.NavigationDrawerFragment"
        tools:layout="@layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>

Implement Navigation Drawer Fragment

Navigation Drawer is a fragment. Depending on your UI design, you can implement Navigation Drawer in different styles. The most common style of Navigation Drawer is a list.

In Android Studio, it provides a template to create Android App with navigation drawer. If we create the project from the template, we will get a navigation drawer class NavigationDrawerFragment, and a navigation drawer layout xml fragment_navigation_drawer.xml. The navigation drawer layout xml is a simple ListView. Here is the example source code:

<ListView 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:choiceMode="singleChoice"
    android:divider="@android:color/transparent" android:dividerHeight="0dp"
    android:background="#cccc" tools:context=".NavigationDrawerFragment" />

In the navigation drawer class NavigationDrawerFragment, we need to instantiate the ListView object with a customized adapter in onCreateView(); Here is the source code example:

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        mDrawerListView = (ListView) inflater.inflate(
                R.layout.fragment_navigation_drawer, container, false);
        mDrawerListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                selectItem(position);
            }
        });

        mDrawerListView.setAdapter(new DrawerListAdapter(
                getActionBar().getThemedContext(),
                GlobalClass.instance().categoryList));
        mDrawerListView.setItemChecked(mCurrentSelectedPosition, true);
        return mDrawerListView;
    }

DrawerListAdapter is our customized adapter which will render the category row in the ListView in navigation drawer. If you want to implement a simple side menu with navigation drawer, you can use ArrayAdapter instead.

Handling Click Events in Navigation Drawer

After we successfully initialize the RSS category in navigation drawer, our next job is handling navigation click events. When users select an item in the navigation drawer list, the onItemClick event will be trigger. In above example source code, we set an onItemClick event handler which will call selectItem() when user are clicking on the navigation drawer listview. Here is the source code of selectItem() function.

private void selectItem(int position) {
	mCurrentSelectedPosition = position;
	if (mDrawerListView != null) {
		mDrawerListView.setItemChecked(position, true);
	}
	if (mDrawerLayout != null) {
		mDrawerLayout.closeDrawer(mFragmentContainerView);
	}
	if (mCallbacks != null) {
		mCallbacks.onNavigationDrawerItemSelected(position);
	}
}

mCallbacks is variable which implements the interface NavigationDrawerCallbacks. In my Android app, it is the main activity. First, let’s see how the NavigationDrawerCallbacks looks like:

public static interface NavigationDrawerCallbacks {
	void onNavigationDrawerItemSelected(int position);
}

In my main activity, I will implement the interface function onNavigationDrawerItemSelected. Here is the source code.

@Override
public void onNavigationDrawerItemSelected(int position) {
	PostListFragment postListFragment = (PostListFragment) getSupportFragmentManager().findFragmentByTag("postlist_fragment");

	DrawerData data = GlobalClass.instance().categoryList.get(position);
	if(data.name != "") {
		String url = String.format(GlobalClass.instance().CATEGORY_RSSURL, data.name);
		postListFragment.rssURL = String.format(GlobalClass.instance().CATEGORY_RSSURL, data.name);
		//Toast.makeText(this, url, Toast.LENGTH_SHORT).show();
	} else {
		postListFragment.rssURL = GlobalClass.instance().RSSURL;
		//Toast.makeText(this, GlobalClass.instance().RSSURL, Toast.LENGTH_SHORT).show();
	}

	PostDataModel.getInstance().listData.clear();
	PostDataModel.getInstance().guidList.clear();
	postListFragment.manualRefresh();
}

In the above source code, I will find postlist fragment first. It is a fragment which contains the list of post in a ListView. Basing on the position where users click in the navigation drawer listview, I will refresh the ListView in post list fragment. Here is how the navigation drawer looks like in new RSS Reader.

Navigation-Drawer

Notes:
Different from Rss Reader 3.8, I redesign the RSS Reader 4.0 with MVC model. MainActivity in Rss Reader 4.0 doesn’t handle the post list rendering and XML parser. It will only hold two view, the navigation drawer and the post list fragment. The post list fragment will handle all the rendering jobs for RSS post list. And there is a PostDataModel which will handle all xml parsing jobs.

Try Example Android App

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
chart

Get Full Improvement Source Code Under $12.99


You will get whole Android Rss Feed App 4.0 source code at $12.99. With this source code, you will get following features:

  • Loading RSS Feed from internet
  • Parse RSS Feed XML
  • Show post title in a list
  • Load post featured image
  • Change categories in navigation drawer
  • Cache image offline

What You Can Do

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

127 Comments

  1. Hi James, I installed the example RSS reader app on Galaxy S4 (4.4.2) and it ran fine. Then I purchased the source code, and received “Android Rss Reader Example Source Code V4.1” (not 4.4?) on 3/6, built it in Android Studio 1.1.0 and ran it in emulator and S4. In both cases, it crashed with the ‘Unfortunately, JMSLIU RSS has stopped’ error message immediately after clicking on one of the navigation drawer items. I have not been able to find the root cause (no stack trace at all). Is the download source code up to date with bug fixes? Thanks Paul

    1. Hi, Paul

      Don’t worry about it. I already update the latest version on my website, and I can sent it to you via the email. Is your email ok, the one you left on my website with your comment? So I can send the latest version to you.

  2. Hi James, I have buy the old Android Rss Reader Example Source Code 2.4, can I receive the new version or at least the 2.4 ?

    Sorry for my english, the email I’ve used for the payment is the same I have left in the comment.

    1. In the middle of the article, there is a title “Get Full Improvement Source Code“, you can get the source code as you follow the instruction.

  3. Hello James, I just bought your source code and after paying i was told to download this file called “Android”. I dont know what it is but doesnt seem like the source code to me. Help would me appreciated, thank you.

    1. Hello, don’t worry about it. If you didn’t get the source code, I will send it to your email. As I tested my payment gateway, it seems to be working properly for me. Any way, just give me several minutes, let me send the source code to your email.

          1. I got it thank you so much, now I can maybe progress in my school project which is to make an app that reads articles from major news websites. I have one built but its in json and just having huge problems. Anyways thanks alot and keep up the good work, you are helping many people.

  4. Hey again, I am having a hard time inserting a rss feed, some reason the category name gets appended to my url. I cant find the code where you append the the category name to the end of the url.

      1. Hey please disregard my other comments, the issue was just syntax. Everything works like a charm.

        Thank you,
        Malyar 🙂

      1. in which file I add RSS links? I am totally confused where I add links for example I want to add guardian rss feed where I add this link?

  5. when I add guardian rss it’s show blank screen public static final String RSSURL =”http://jmsliu.com/feed?paged=”;
    I change this to this but it’s not work public static final String RSSURL =”http://www.theguardian.com/us/sport/rss”;

    1. Hi Adalberto,

      My tutorial shows you how to load standard rss feed from website. You can follow the tutorial and try if the tutorial could work with your rss feed.

      Thanks

  6. if i open an item, i get the title en description but i don’t get the featured image above the title, is it possible?

    thanks

        1. The source code is for learning. The money you paid is to get the source code and learn how to program. If you need personal training or app customization, please contact me here

  7. Hi, I have just purchased your source code but I don’t understand how to implement two things:

    1) How can I show the selected news in a new fragment (in the source code there is a webview that shows home page);

    2) Why when I click on the drawer menu after I clicked on a menu item it doesn’t happen anything? I should select more than once what listview I want to view!

    Thanks in advance

    1. Hi,

      Regarding your question, the answers are:

      1) In the source code version 4.0 and later, there is a webview, which shows the content of the news, not the home page.

      You will find following code:

      webView.loadData(s, “text/html; charset=utf-8”, “utf-8”);

      2) In drawer menu, which item do you click on? There are 5 menu items, All, Android, IOS, HTMl5, and Other. When you click any of them, it will refresh the list to show you the relevant news list.

      Thanks

      1. Thank you for answering

        1) I know but in my case it shows me only the title of the post without content and below that the whole homepage. Maybe I have to modify the SINGLE_POSTURL? Or what?

        2) Yes, when I only click on the menu it works. But for example if I open an article in a webview and I want to open menu and click on another category, the menu doesn’t work. It opens itself and if I click on a category nothing happends.

        1. OK.

          I think first, you need to install the wordpress plugin to get the content, which i described in the post. I think you need to make sure that your Single_POSTURL works before trying it in the app.

          For second question, as you want to show the news list but you are viewing a news. You need to go back to the news list and the menu will work.

          Thanks

  8. Hi JMS

    I order this App last Friday and I modified it as my application fine. I have two question to that.

    1.How to load cached file (content and image) to webview if internet connection is disabled (off line)when starts this app?
    I need it as a off line reader.

    Currently app cannot load anything if internet was disconnect when starts

    2.If in the postitem view, to disable internet, then click item, the app will crash , are you have good idea to detect internet status in every user’s use condition?

    thanks
    Laurence

    webView.getSettings().setAppCacheEnabled(true);webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);

    webView.getSettings().setAppCacheMaxSize(1024 * 1024 * 8);

    1. That’s a good question. Actually, I am planning to add “push notificatin” and local cache with sqlite in the app. But I was too busy these days. So regarding your questions, you can use sqlite database to save your cache.

      When the internet is disable, I think there will be some exception when you click the postitem view. You can catch the exception and write some code to solve your problem.

      I hope above tips may be helpful.

  9. thanks , Thanks for your suggestion.

    1.can we access cached data (content or image) replace of sqllite database and put them into postview directly if network was disable?

    Sorry i did don’t understand webview class so much, can we cheat it to access cached data if network is unavailable?

    2.I got your point , maybe you can fix this crash bug if you have free time.

    Thanks
    Laurence

    1. 1. You can use the cached data or sqlite data and put them into postview directly.

      For webview, I know you can put text from cached data, but I am not sure if you can use local cached image in webview.

      1. Hi James,
        Sorry I made some mistaken so as that I get crash status. I need to check side by side what happen and use original source code , but I forget to backup , Can you send the original file to me again ? please mail to my email / laurencechen2010@gmail.com

        Do you need any order evidence ? I can provide it

        thanks

  10. Hi James,
    sorry to bother you , I solve crash question already.
    my last question is that , i study how to load cache data into postlistfragment & postviewgragment directly when starts APP in off line but got no idea in these days, can you teach me how to insert code in postlistgragment class?

    thanks
    Laurence

    1. OK. First, you need to cache your data which is loaded from the server. Let’s say save all text data into sqlite and save image on sd card.

      Then, in the postlistfragment, you can load cached data from sqlite before trying to load data from internet.

      You can use the same idea to load data to postviewfragment.

  11. Hi James,

    how can I display only the body of the post and not the entire page when I click on it? Which part of code should I modify? I tried to take it from the rss feed but when I make Log.d(“MyApp”, “RSSCONTENTTAG: ” + currentTag); it appears “CONTENT”. Where else should I modify the code?

    Thanks

    1. In this source code, the app only loads the content, not the entire page. I don’t really understand your question clearly. Maybe you can prepare some screenshot and show me what you want to implement.

      Thanks

      1. I want to show only the post text and nothing else. No header, no footer, no css… Like the third image: http://techiedreams.com/wp-content/uploads/2012/12/banner_post10.png
        Instead, when I retrieve the post list and I click on one of them to open it, it loads the post page.

        For example I have this rss page:
        http://www.ilmartino.it/feed/

        And this is what I obtain clicking one of the news (the title plus the entire page!)
        http://s22.postimg.org/5zp90uzfl/ilm.png

        1. First, do you own the website? If not, it will be very hard for you to only show the body of post. But it is still possible. If the website belongs to you, then you need to make some customization on your website rss feed xml to provide the article body content.

          If the website belongs to you and the website is powered by WordPress, you can use this plugin: JMS Rss Feed Featured Image Plugin. It will solve your problem.

          1. Yes, that’s my site. I’ve installed the plugin but now it shows me only the title and gives me this in logcat when I open a post:

            “Uncaught ReferenceError: hljs is not defined”, source: data:text/html; charset=utf-8,JMSLIU.COMRiserva di Punta Aderci distrutta da un incendiohljs.initHighlightingOnLoad(); (1)

          2. I’ve noticed that the variable content is empty in JmsliuStyle file. This happens if I change this:

            public static final String RSSURL = “http://jmsliu.com/feed?paged=”;
            public static final String CATEGORY_RSSURL = “http://jmsliu.com/category/%s/feed?paged=”;
            public static final String SINGLE_POSTURL = “http://jmsliu.com/index.php?jms_rss_post_url=”;

            to this:

            public static final String RSSURL = “http://ilmartino.it/feed?paged=”;
            public static final String CATEGORY_RSSURL = “http://ilmartino.it/category/%s/feed?paged=”;
            public static final String SINGLE_POSTURL = “http://ilmartino.it/index.php?jms_rss_post_url=”;

        2. Hi, Corinne

          Your problem about “Uncaught ReferenceError: hljs is not defined” is addressed in JmsliuStyle.java.

          Please edit this file and delete follow line:

  12. Hello

    How can I activate the navigation drawer items even if I have opened a post? They seem not to work when I’m on a post.

    1. That’s easy. Press back button and you will find the news list already updated. Actually, I think it is necessary to go back automatically from single post view when you click navigation drawer.

      You can check this method:
      getFragmentManager().popBackStack()

  13. Hey, I just purchased the code, but it hasn’t gotten sent, nor did I get a link. I’d really appreciate it if you would send it to me at your earliest opportunity. Thank you.

    1. Hello,

      Don’t worry about it. I will send you the source code to your email. BTW, your email will not be disclosed to public.

    2. Hi, I sent the source code to your email address q*******@hotmail.com. Please check it.

      Best Regards
      James

        1. Hello Attila,

          I have tried to send the source code with my several email accounts to you. I hope you can get it.

  14. Hi,
    I was wondering: how can I add a share button bar below the post in the post fragment in order to share the content of the post on social network?

    1. Hi Carol,

      That’s easy. First, you already get the article link in the post fragment. Then, you can add a share button under webview. When user clicks the button, you can share the url with facebook sdk.

  15. Hi,
    I brought your code. I have modified below code. but in Single_PostURL is not working and I owned the site.
    When I clicked one news from home page, I got with capital letter instead of .
    public static final String RSSURL = “http://www.mysite.com/feed?paged=”;
    public static final String CATEGORY_RSSURL = “http://www.mysite.com/category/%s/feed?paged=”;
    public static final String SINGLE_POSTURL = “http://mysite.com/index.php?jms_rss_post_url=”;

  16. Hi,

    I have purchased your code on June 30 thru my PayPal account.For me Single post URL is not working.when I click any news,it’s displaying Details with capital letter instead of details.

    I have modified below code

    public static final String RSSURL = “http://jmsliu.com/feed?paged=”;
    public static final String CATEGORY_RSSURL = “http://jmsliu.com/category/%s/feed?paged=”;
    public static final String SINGLE_POSTURL = “http://jmsliu.com/index.php?jms_rss_post_url=”;

    to this:

    public static final String RSSURL = “http://mysite.com/feed?paged=”;
    public static final String CATEGORY_RSSURL = “http://mysite.com/category/%s/feed?paged=”;
    public static final String SINGLE_POSTURL = “http://mysite.com/index.php?jms_rss_post_url=”;

  17. Hello James,
    Last 23-August I bought your code. The webserver send an error at the moment of the download and the app can not be downloaded.
    Immediatly I send you an email to your paypal email account.
    I think you are on holidays, travelling or something typical of August because I dont have response.

    Please, send me the app at this email account or to the used at paypal transactions when you have a moment.

    23 ago 2015 20:56:02 CEST
    Id. de transacción: 7ST74304R57956419

    Thanks,
    Juan.

    1. Hi Juan,

      I am sorry for the late reply. I have sent you the source code to your email address h******n@gmail.com.

      1. Hey James dont worry about the late reply. We live in a world where we want and we get everything “now .. now .. now”. If you send me the code via air mail, I will take this few days 😉

        In a few days I will be playing with it. Any question I will ask here, but now I have one question without testing your code.
        What about html tags? I have a feed from joomla that sends a lot of codes and in other rss readers the appear.

        Thanks,
        Juan

  18. Hi James,

    I paid for the rss source but the server had errors. Can you send me the source?

    This is the information from PayPal
    Aug 31, 2015 17:35:24 PDT
    Transaction ID: 0KK74294LX965044V

  19. Hello James,
    I bought your code yesterday (Aug 31). The web-server had an error when I clicked download project.
    I sent you an email to your Gmail given by Paypal.

    Please, send me the app at this email account or to the used at Paypal transactions when you have a moment.

    Aug 31, 2015 17:35:24 PDT
    Transaction ID: 0KK74294LX965044V

  20. Hi james,
    i just buy your full code RSS and i would like to help for something .

    For example you select “android” via menu drawer and you select an article to read .
    after that you would like to change from “android” to “ios” via menu drawer , and when you press in “ios” , the app do nothing and screen still display the first article you read in “android” category.

    1. Hello,

      After you select one article to read, you need to go back to the list and select the category. I think it can be improved. For example, you can programmely go back to article list, then refresh the category.

      1. hello,
        how can i disable the menu drawer when i read the full article, i would like to give the specific class to desactivate the menu drawer in fragment postview.
        thanks

  21. Hey, I purchased your complete application for development purposes! but I can’t download the app, I get INVALID REQUEST each time!!!!!

    1. Hello,

      By default, you can download the source code directly after you make the payment. I guess my website is too busy and all resource is exhausted.

      Don’t worry about it. I already sent the source code to your email as an attachment.

      Best Regards
      James

      1. What if I want to load public news site (CNN, Yahoo, etc) RSS feeds to the app as well, how would I do that?
        I’m not sure I fully understand how the GlobalClass.java works, because it seems to be more customized to your website rss?
        Any suggestions!
        Thanks in advance,

        1. My rss reader is designed for wordpress website, with my rss plugin. If you want to load the rss from CNN or Yahoo, you have to change some code, like disabling the image.

  22. Hi, James.
    I bought the source code about paypal and received a file named android to download during the checkout process. I’m sorry not to know what to do with.this downloaded file. I can’t open this.
    Please come back with solving information. Thanks in advance.

    1. Hello,
      Don’t worry about it. Usually you will see a download link after you make the payment successfully. Anyway, I send the source code to your email which you are using to make the payment.

  23. hi james,

    I buy the source code with paypal and I received was very good work. I want to change it because I want the navigation drawer the “android” send to a business, how can I do ?? does it change in GlobalClass.java ?? I do not see what code to …

    is what to change in it:

    instance.categoryList.add (data);
                 data = new DrawerData ();
                 data.title = “ALL”;
                 data.name = “”;
                 data.type = 0;
                 instance.categoryList.add (data);
                 data = new DrawerData ();
                 data.title = “android”;
                 data.name = “android”;
                 data.type = 0;

    I am sorry for my bad English, I’m French.

    I thank you in advance,
    Guillaume

    1. sorry I meant:

      I want to change it because i want the drawer navigation the “android” send to a Activity

      My translator mistranslated

        1. hi james,

          yes it is exactly that I would like that when you click on “Android” in the navigation drawer we can open a new activity

          Thank you for your help

          1. Intent intent = new Intent(this, DisplayMessageActivity.class);
            //send some data to next activity
            //intent.putExtra(EXTRA_MESSAGE, message);
            startActivity(intent);

          2. ok thank you james, it’s cool.

            However, I do not know where to paste the code, can you tell me ?? and I shall place or the name of the activity that I want to bring up ??

          3. Hello Guillaume,

            The source code is helping you to understand the tutorial deeply. If you want to customize the project for your own purpose, you’d better read the source code and study. I only provide support if the original source code doesn’t work.

            Thanks

    1. Hello Anee,

      After you make the payment, a download windows will appear. Then you can click to download. If you are missing the download link, let me send the source code to your email.

      Thanks

  24. Hi james

    I paid for you code and I downloaded it and it work.

    please I have two issue.

    I discover that I can read offline.

    I use BlogSpot for my blog and I can I adjust the code for use.

    1. Hello Ali,

      image tag in your rss feed url is not rss standard. Therefore, please check the xml parse code. You need to add logic to parse your image tag.

      Best Regards
      James

  25. Hi
    I have bought recently your code. The RSSURL is ok …. it works but single posturl what I should put in this string in the globalclass.

    when I click one of the items on the list then it should open me the contents regarding the title but it’s not opening the contents it shows only the title

        1. first, you need to check if your own url can give enough content. The best way is comparing your rss feed content with mine.

    1. Very simple. Please compare my rss xml with your rss xml, you will find out the difference. Loading slow could be the internet issue, not the app problem.

    1. Oh, actually you could be able to download the source code once you make the payment immediately. But don’t worry, let me send the source code to your email which you are using in PayPal.

  26. James, i got this error

    Unsupported method: BaseConfig.getApplicationIdSuffix().
    The version of Gradle you connect to does not support that method.
    To resolve the problem you can change/upgrade the target version of Gradle you connect to.
    Alternatively, you can ignore this exception and read other information from the model.

Leave a Reply to Nabeel Cancel reply

Your email address will not be published. Required fields are marked *