How do I create space between cards (RecyclerView) and top when SwipeRefreshLayout is used (page pulled down)

See more:

Java

Mobile

Android

I've utilised SwipeRefreshLayout so users can formally see the RecyclerView is refreshing (reloading data) as a result of the page pull down gesture.

But what I would like to happen is, like on Facebook or WhatsApp: When the user pulls down the page a gap appears between the first card and top of the window. This gap then disappears again when the page is released.


How do I do this, as I can't figure out what I'm missing. If I've done something wrong, or if there is something else I should add; please let me know


Examples:

[img]http://i.stack.imgur.com/b74pJ.jpg[/img]


My code so far is below:

CardAdapter.java

public class CardAdapter extends RecyclerView.Adapter<CardAdapter.ViewHolder> {
    
        public List<TTItem> posts = new ArrayList<>();
    
        public void addItems(List<TTItem> items) {
            posts.addAll(items);
            notifyDataSetChanged();
        }
    
        public void clear() {
            posts.clear();
            notifyDataSetChanged();
        }
    
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            Context context = parent.getContext();
            View view = View.inflate(context, R.layout.item_cardview, null);
            return new ViewHolder(view);
        }
    
        @Override
        public void onBindViewHolder(ViewHolder holder, int position) {
            holder.mTextView.setText(posts.get(position).title);
            Picasso.with(holder.mImageView.getContext()).load(posts.get(position).images[0]).into(holder.mImageView);
        }
    
        @Override
        public int getItemCount() {
            return posts.size();
        }
    
        static class ViewHolder extends RecyclerView.ViewHolder {
            public TextView mTextView;
            public ImageView mImageView;
    
            public ViewHolder(View view) {
                super(view);
                mTextView = (TextView) view.findViewById(R.id.textview);
                mImageView = (ImageView) view.findViewById(R.id.imageView);
            }
        }
    }

MainActivity.java

public class MainActivity extends ActionBarActivity implements SwipeRefreshLayout.OnRefreshListener {
        @InjectView(R.id.mainView)
        RecyclerView mRecyclerView;
        @InjectView(R.id.refreshContainer)
        SwipeRefreshLayout refreshLayout;
        private LinearLayoutManager mLayoutManager;
        private CardAdapter mAdapter;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            ButterKnife.inject(this);
            mRecyclerView.setHasFixedSize(true);
            refreshLayout.setOnRefreshListener(this);
            TypedValue tv = new TypedValue();
            int actionBarHeight = 0;
            if (getTheme().resolveAttribute(R.attr.actionBarSize, tv, true)) {
                actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
            }
            refreshLayout.setProgressViewEndTarget(true, actionBarHeight);
            mAdapter = new CardAdapter();
            mRecyclerView.setAdapter(mAdapter);
            // use a linear layout manager
            mLayoutManager = new GridLayoutManager(this, 1);
            mRecyclerView.setLayoutManager(mLayoutManager);
        }
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is present.
            return true;
        }
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            // Handle action bar item clicks here. The action bar will
            // automatically handle clicks on the Home/Up button, so long
            // as you specify a parent activity in AndroidManifest.xml.
            return super.onOptionsItemSelected(item);
        }
        @Override
        public void onRefresh() {
            mAdapter.clear();
            Handler handler = new Handler();
            handler.postDelayed(new Runnable() {
                public void run() {
                    refreshLayout.setRefreshing(false);
                }
            }, 2500);
        }
    }

Activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">
    
    
    
        <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/refreshContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <android.support.v7.widget.RecyclerView
                android:id="@+id/mainView"
                android:scrollbars="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </android.support.v4.widget.SwipeRefreshLayout>
    
    
    </LinearLayout>

item_cardview.xml:

<?xml version="1.0" encoding="utf-8"?>
   <android.support.v7.widget.CardView
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:card_view="http://schemas.android.com/apk/res-auto"
       android:layout_width="200dp"
       android:layout_height="200dp"
       android:padding="10dp"
       card_view:cardCornerRadius="2dp"
       card_view:contentPadding= "5dp"
       card_view:cardUseCompatPadding="true"
       >
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="vertical">
           <ImageView
               android:id="@+id/imageView"
               android:layout_width="match_parent"
               android:layout_height="150dp"
               android:scaleType="centerCrop"/>
           <TextView
               android:id="@+id/textview"
               android:layout_width="match_parent"
               android:layout_height="wrap_removed"
               android:textSize="20sp"
               android:textStyle="bold"
               android:layout_gravity="center"/>
       </LinearLayout>
   </android.support.v7.widget.CardView>