aen2018 Rss Reader Andaid App Turia 4: Drag to Reesh in ListView Android Example Programming Guides and Tip All About HTML $ Components, IOS iPhone iPad Apps, Android Apps and Components Programming Tutorials ‘Search Go Rss Reader Android App Tutorial 4: Drag to Refresh in ListView Android Example On June 25, 2013, in Android, by James ‘New Update: Adding Loading More in FooterView Several weeks ago, I created a [OS tutorial about how to implement pull to reftesh in IOS UlTableView. In my Rss reader android app, 1 also want to add pull to refresh feature so that user can easily update the ListView content. I searched online and spend several to integrate one open source project in my Android ListView example. After that, find it is quite hard to make some change basing on the open source project because of its poor flexibility Therefore, I decide to create my own drag to refresh ListView (or called pull to refresh ListView), In my app, I will create a subclass of ListView which is called RefreshableList View. The new ListView class will allow user to drag down and trigger loading event. So my RefreshableL istView will implement the interface OnSerollL istener and override the interface functions onScroll and onScrollStateChanged; To track user interactions, | will override the function onTouchEvent as well. Once we drag down the ListView, we will see the headerView which gives a tip “Pull Down to Update”. If we release ListView, the headerView will stay on the top and wait for updating, Once the updating processing finishes, the header View will shrink back and disappear. Now let's see the example source code step by step This is the No.4 Android tutorial about how to create a Rss Reader Android App. Before staring to read this Android tutorial, you may want to read the following android tutorial as well + Android Rss Reader Example 1; How to Use ListView and AvrayAdapter Android Rss Reader Example 2: Load Data by HTTP Request in Androu Android Rss Reader Example 3: Parse XML in Android Android Rss Reader Example 4: Drag to Refiesh ListView Android Rss Reader Example 5: Show WebSite Content in WebView Advanced Tutorial 6: Advanced Tutorial 7: Add Android Navigation Drawer Menu First ofall, we will initialize the header view in the constructor. In the header view, there is arrow image, a progress bar and two tip text boxes. This is the layout xml of the header view. @1| ttp: //schemas android. com/apk/res/android” 03 xmlns:tools="http: //schemas.android.com/tools" ea android: layout_width="fill_parent" es. android: layout_height="Fi1l_parent” 06 tools: context=".MainActivity” e7 android: paddingTop="1edp" e8 android: paddingBottom="1¢dp" e9 android: paddingLeft="Sdp"> 18 1 16 v7 24 25 «ProgressBar 26 android: id="@+id/head_progressBar™ 27 style="?android: attr/progressBarStyleSmall” 28 android: layout_width="wrap_content” 29 android: layout_height="wrap_content” 30 android: layout_gravity="center” 31 android: visibility="gone" /> 32 33 34 4e 41 54 55 56| ‘Now, let's see how | initialize the header view in ListView constructor. @1| private void init(Context context) { 2 inflater = LayoutInflater.from(context) ; 3 headerRelativeLayout = (RelativeLayout)inflater.inflate(context, R.layout.refresh_header_view, null); 4 arrowImage = (ImageView) headerRelativeLayout.. FindViewById(R.id.head_arrowImageView) ; es progressBar = (ProgressBar )headerRelativeLayout. findViewById(R.id.head_progressBar) 6 headerTextView = (TextView)headerRelativel ayout.. findViewById(R.id.head_tipsTextView) ; e7 lastUpdateDateTextView = (TextView)headerRelativeLayout . FindViewById(R.id.head_lastUpdatedDateTextView) ; e38 e9 headerRelativeLayout.setPadding(®, -1 * HEADER HEIGHT, ©, @)5 10 this. addHeaderView(headerRelativelayout, null, false); ai} Ftpjmstiu com/1520rss-reader-andoi¢-app-tuoral-4-crag-o-rfreshinlistiew-ancrois example imazna0s Rss Reater Ancol App Tutorial Drag to Reeshn UstVew Anoid Example ‘The first step is done. We create the header view and add it in the ListView. In our second step, I will override the onTouchEvent function, which will handle the users interaction, such as touch, pull down, and release. 1 wil monitor three MotionEvent: + ACTION_DOWN: User is starting to pull the ListView down * ACTION_MOVE: User is pulling the ListView + ACTION_UP: User released ListView Onve user touches the screen, the ACTION_DOWN event will be triggered. In this state, I will record the start point from which user is starting to pull the ListView Post} Tie Tiss he Pest me: ee #E * cna pe ra pull to refresh state ACTION_DOWN from Fee When user is pulling the ListView, the ACTION_MOVE event will keep being triggered. In this state, I will change the header view top padding to show the indicator. Bo Mido titra * Gere quem * * gee pull to refresh state ACTION_MOVE ‘Afer user released the ListView, the ACTION_UP event is triggered. In this state, I will check the final top padding of header view and decide if triggering the refresh function, Ftpjmstiu com/1520rss-reader-andoi¢-app-tuoral-4-crag-o-rfreshinlistiew-ancrois example im 38aen2018 Rss Reader Andaid App Turia 4: Drag to Reesh in ListView Android Example ct) Te Tis he Post #5 i: # me pull to refresh state ACTION_UP. Now, let’s see the android example code, @1| @override @2| public boolean onTouchEvent(MotionEvent ev) { @3 7/ TODO Auto-generated method stub ea switch (ev.getAction()) { @s case MotionEvent .ACTION_DOWN: @6 //isDragging = true; @7 startY = ev.get¥(); ee break; cr) case MotionEvent. ACTION MOVE: 10 if (lisLoading) { n deltaY = ev.get¥() - starty; 2 3B Log.d("debug", String. valueOf(deltay)); 14 15 headerRelativelayout. setPadding( 16 headerRelativeLayout.getPaddingLeft(), -1 v7 * HEADER HEIGHT + (int) deltaY, 0, 18 headerRelativeLayout .getPaddingBottom(}); 19 20 if(headerRelativeLayout.getPaddingTop() >= HEADER HETGHT && currentState == STATE_PULL_TO_REFRESH) { 21 //change state 22 currentState = STATE_RELEASE_TO_UPDATE; 23 arrowImage.clearAnimation(); 24 arrowImage. startAnimation(rotateAnimation) ; 25 headerTextView. setText(R.string.release_to refresh); 26 } else if (headerRelativeLayout.getPaddingTop() < HEADER HEIGHT && currentState == STATE RELEASE_TO_UPDATE) { 27 currentState = STATE PULL_TO_REFRESH; 28 arrowImage.clearAnimation() 29 arrowImage. startAnimation(reverseRotateAnimation) ; 30 headerTextView. setText(R.string.pull_to_refresh); 31 } 32 } 33 break; 34 case MotionEvent .ACTION_UP: 35 //isDragging = false; 36 37 if (lisLoading) { 38 if (headerRelativeLayout.getPaddingTop() < HEADER HEIGHT) { 39 // come back Ftpjmstiu com/15204rss-reader-andoi¢-app-tuoral-4- crag o-rfreshinlistiew-ancrois example imaen2018 Rss Reader Andaid App Turia 4: Drag to Reesh in ListView Android Example 40 headerRelativeLayout . setPadding( a1 headerRelativeLayout.getPaddingLeft(), -1 42 * HEADER_HEIGHT, 0, 43 headerRelativelayout .getPaddingBottom()) 5 44 } else { 45, // come to HEADER_HEIGHT and start the trigger 46 headerRelativeLayout. setPadding( 47 headerRelativelayout.getPaddingleft(), HEADER_TOP, 0, 48 headerRelativeLayout .getPaddingBottom()) ; 49 headerTextView. setText(R. string. loading) ; se progressBar.setVisibility(View.VISIBLE) ; 51 arrowlmage.clearAnimation(); 52 arrowlmage. setVisibility (View. GONE) ; 53 54 Z/START LOADING 55 isLoading = true; 56 if (refreshDelegate != null) { 57 refreshDelegate.startFresh(); 58 } 59 } 62 } 61 break; 62 default: 63 break; 64 } 65 66 return super.onTouchEvent (ev); 67|} In this android example, I has shown how to implement the pull to refresh feature by yourself. Actually it is very casy to implement. The whole feature is only two files. The refresh header view layout file and RefreshableList View class java file, Therefore, it will be very easy to use in different project. New Update: Add Loading More in Footer View This update includes several improvement. First, I make a change on the pull to refresh logic. So the updating content will appear on the top of the ListView. It makes more sense for pull to update action. Furthermore, I add another feature in the footer view. When users push the list to the bottom, they will see a "Click to load more..." This new feature will allow user to load old content from the server. Then, all old content title will put in the end of ListView estas hePes click to load more in footerview How to Monetize Your Android App by ListView Ftpjmstiu com/1520rss-reader-andoi¢-app-tuoral-4-crag-o-rfreshinlistiew-ancrois example imaen2018 Rss Reader Andaid App Turia 4: Drag to Reesh in ListView Android Example The most simple way to monetize your android applications is add a AdMob Ads Banner. If you are using ListView, it will be very easy for you accomplish that. Especially when you add the AdMob banner between your real content in the ListView, the opportunity for users to click the Ads is increased unbelievable. Here is another example to show you how to add AdMob Banner in the ListView, Get Pull to Refresh Project Source Code Under $1.99 You can get this confirmed working pull to refresh project source code under $1.99. Once you get the source code, you can just import the project source code in your Eclipse and run it. This source code is very easy to customized. There are two files involved. bain ayaly Within the project, you will get: + MainActivity.java: the example project main activity java file, + RefreshableListView.java: the pull to refresh ListView class file + res/layout/main.xml: the example project main layout xml res/layout/refresh_header_view.xml: the pull to refresh header view layout xml res/layout/refresh_footer_view.xml: the pull to refresh footer view layout xml Next: Show WebSite Content in WebView In this example, I demonstrate how to drag ListView up and down to refresh the content. In next tutorial, Twill show you how to show the web content in a new aetivity by clicking the item in ListView. Go to next tutorial: Show WebSite Content in WebView sao) | ‘Tagged with: Admob + Android + monetize tablet applications Rss Reader Android App Tutorial 3: Parse XML in Android RSS Reader Android App Tutorial 5: Show WebSite 5 bView Twoet (0 6 Responses to “Rss Reader Android App Tutorial 4: Drag to Refresh in ListView Android Example” 1 Paul says: August 26, 2013 at 6:23 pm Thank you for source code Reply ° James says: August 27. 2013 at 9:45 am Welcome Reply Ftpjmstiu com/1520rss-reader-andoi¢-app-tuoral-4-crag-o-rfreshinlistiew-ancrois example im 6aen2018 Rss Reader Ando App Tera 4: Drag to Reffesh in istView Anroid Example Neeraj Gupta says July 24, 2014 at 6:58 pm Hello ‘This is Neeraj and I am unable to implement this app. Please guide me, My email id is neerajgupta123456@gmail.com Reply. ° James says: ly 25.2014 at 10-04 am ‘You can get the source code in the end of the article. If you want to get the full source code of my Rss Reader Android Project, you can go to this post: hups/ iu com/156S/rss-read Reply Bi pera x50 January 29, 2015 at 11:34 am I think — (RelativeLayout)inflate(context, R layout refresh_header_view, null), should be- (RelativeLayout)inflaterinflate(context, R.layout.refresh_header_view, null); Correct? Reply ° James says: January 29, 2015 at 11:57 am Yes, you are right. I will correct the error soon. ‘Thank you for your help. James Reply Leave a Reply Name (required) Mail (will not be published) (required) Website Ftpjmstiu com/1520rss-reader-andoi¢-app-tuoral-4-crag-o-rfreshinlistiew-ancrois example im 78aen2018 Rss Reader Andaid App Turia 4: Drag to Reesh in ListView Android Example ‘Submit Comment James Liu Se Fallow 91 fallowers JMS Digital Goods Ecommerce Platform PHP based payment and management system. It provides a easy way for you to manage and sell your digital goods and products on your website, inline Bootstrap Donation Wi Bootstrap based online donation widget. It will help you collect donations easily on your own website. Free Online Sprite Sheet Decomposer Decompose and ereate animations from a sprite sheet easily. It will help you cut sprite sheet animation pictures into separate frame pictures Google Translate Voice MP3 Downloader Download word voice-over in one click. It will help you to get the word pronunciation mp3 file from Google Translate service, JMS Rss Feed Featured Image Plugin ‘Adds the featured image url in a tag into to your posts to the RSS feed. Featured Tutorials Admob in Android Application (Integrated with Google Play Service) Android Rss Reader App Tutorial (1-5) Android Wallpaper App Tutorial (1-5 iPhone Rss Reader App IOS Tutorial (1-4) Popular Posts Click Button in ListView And Get Item Position © Download Images by AsyneTask in ListView Android Example © Rss Reader App Android Tutorial 1: ListView and ArrayAdapter © Android Save And Load Downloading File Locally Categories © Androi * Android Phone and Tablet Ftpjmstiu com/1520rss-reader-andoi¢-app-tuoral-4-crag-o-rfreshinlistiew-ancrois example imazrr2018 Rss Reader Andaid App Turia 4: Drag to Reesh in ListView Android Example © Flash Flex AIR * HTMLS Phone iPad Object-C © Make Money Online * Other Online Technology 2015 © Alll Rights Reserved by Programming Guides and Tips Privacy Policy Ftpjmstiu com/1520rss-reader-andoi¢-app-tuoral-4-crag-o-rfreshinlistiew-ancrois example im