Skip to content

Instantly share code, notes, and snippets.

@aqua30
Created September 20, 2017 08:05
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aqua30/a1458929420d2ff925ffb2ada7568702 to your computer and use it in GitHub Desktop.
Save aqua30/a1458929420d2ff925ffb2ada7568702 to your computer and use it in GitHub Desktop.
Parallax effect using RecyclerView in the most simple way using scroll listener of recycler view.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical">
<ImageView
android:id="@+id/parallax_image"
android:layout_width="match_parent"
android:layout_height="350dp"
android:scaleType="centerCrop"
android:src="@drawable/img_user_avatar" />
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingTop="350dp"
app:layoutManager="LinearLayoutManager"
tools:listitem="@layout/ly_list_item" />
</RelativeLayout>
/**
* Created by Saurabh(aqua) in 2017.
*/
public class RecyclerParallaxActivity extends BaseActivity {
/* view binding */
@BindView(R.id.recycler_view)RecyclerView recyclerView;
@BindView(R.id.parallax_image)ImageView parallaxImage;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
/* simple adapter with textview in layout */
ParallaxAdapter adapter = new ParallaxAdapter();
recyclerView.setAdapter(adapter);
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
/* calculate the range which we have to cover */
int maxDistance = recyclerView.getPaddingTop();
/* calculate the scroll amount when recycler scrolls from the top */
int movement = maxDistance - recyclerView.getChildAt(0).getTop();
/* if we're reaching the top or within the range, keep translating the parallax image */
if (movement >= 0 && movement <= maxDistance) {
parallaxImage.setTranslationY(-movement/2);
} else {
/* if the scrolling goes above the range then set the image to the maximum value */
parallaxImage.setTranslationY(-maxDistance);
}
}
});
}
/* can be replaced with setContentView() in onCreate() */
/* kept for brevity */
@Override
protected int getActivityLayout() {
return R.layout.ac_parallax;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment