CODEWITHSUNDEEP
javaandroidgoogle-chromepull-to-refresh
user1209216
user1209216

Reputation: 7914

Android - implement pull to refresh like Chrome

I was able to find many implementations of pull to refresh for android apps. However, I can't find the one specific that I want. It's already used in Google Chrome for Android, but also other apps use the same way (NovaLauncher, AliExpress and many others).

This is how does it look like: enter image description here

When you pull down, there is small circle arrow shown. How can I implement the same in my app?

Upvotes: 2

Views: 2181

Answers (3)

Androider
Androider

Reputation: 3873

Try this.

Layout XML:

<android.support.v4.widget.SwipeRefreshLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/swipe_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:text="@string/hello_world"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:gravity="center"/>
    </ScrollView>

</android.support.v4.widget.SwipeRefreshLayout>

MainActivity (which implements SwipeRefreshLayout):

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    swipeLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_container);
    swipeLayout.setOnRefreshListener(this);
    swipeLayout.setColorScheme(android.R.color.holo_blue_bright, 
            android.R.color.holo_green_light, 
            android.R.color.holo_orange_light, 
            android.R.color.holo_red_light);
}


@Override public void onRefresh() {
    new Handler().postDelayed(new Runnable() {
        @Override public void run() {
            swipeLayout.setRefreshing(false);
        }
    }, 5000);
}

For more, check this link:
http://www.androidhive.info/2015/05/android-swipe-down-to-refresh-listview-tutorial/

Upvotes: 3

Sacky San
Sacky San

Reputation: 1662

I implemented this in my xhtml page. Works great.

<script type="text/javascript">         //<![CDATA[
         window.addEventListener('load', function() {
              var maybePreventPullToRefresh = false;
              var lastTouchY = 0;
              var touchstartHandler = function(e) {
                if (e.touches.length != 1) return;
                lastTouchY = e.touches[0].clientY;
                // Pull-to-refresh will only trigger if the scroll begins when the
                // document's Y offset is zero.
                maybePreventPullToRefresh =
                    window.pageYOffset == 0;
              }

              var touchmoveHandler = function(e) {
                var touchY = e.touches[0].clientY;
                var touchYDelta = touchY - lastTouchY;
                lastTouchY = touchY;

                if (maybePreventPullToRefresh) {
                  // To suppress pull-to-refresh it is sufficient to preventDefault the
                  // first overscrolling touchmove.
                  maybePreventPullToRefresh = false;
                  if (touchYDelta > 0) {
                    e.preventDefault();
                    return;
                  }
                }
              }

              document.addEventListener('touchstart', touchstartHandler, false);
              document.addEventListener('touchmove', touchmoveHandler, false);      });
                //]]>    </script>

Upvotes: 0

Miljac
Miljac

Reputation: 2045

There is a nice tutorial about it.

Basically you need to put something you want to refresh inside SwipeRefreshLayout

 <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/activity_main_swipe_refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ListView
            android:id="@+id/activity_main_listview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >
        </ListView>

    </android.support.v4.widget.SwipeRefreshLayout>

Set adapter

class MainActivity extends Activity {

  ListView mListView;
  SwipeRefreshLayout mSwipeRefreshLayout;
  Adapter mAdapter;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.acivity_main);
    SwipeRefreshLayout mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.activity_main_swipe_refresh_layout);
    mListView = findViewById(R.id.activity_main_list_view);
 mListView.setAdapter(new ArrayAdapter<String>(){
    String[] fakeTweets = getResources().getStringArray(R.array.fake_tweets);
    mAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, fakeTweets)
    listView.setAdapter(mAdapter);
  });
  }
}

And attach setOnRefreshListener

@Override
  public void onCreate(Bundle savedInstanceState) {
  ...
    listView.setAdapter();
    mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
      @Override
      public void onRefresh() {
          doSomething();
  }

Upvotes: 3

Related Questions