Created
September 20, 2017 08:05
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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