Skip to content

Instantly share code, notes, and snippets.

@aqua30
Last active May 9, 2022 05:34
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aqua30/1f2d7a5930cbe6d4b04195e8d1e5d5cd to your computer and use it in GitHub Desktop.
Save aqua30/1f2d7a5930cbe6d4b04195e8d1e5d5cd to your computer and use it in GitHub Desktop.
Simplest ScrollView Parallax technique in Android. No library required and just with 4 lines of code, you can easily create parallax effect.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical">
/* image to be parallaxed */
<ImageView
android:id="@+id/parallax_image"
android:layout_width="match_parent"
android:layout_height="280dp"
android:scaleType="centerCrop"
android:src="@drawable/img_user_avatar" />
<ScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:orientation="vertical">
<TextView
android:id="@+id/tv_perhour"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="280dp"
android:layout_weight="1"
android:background="@color/white"
android:gravity="left"
android:text="@string/lorem_ipsum"
android:textColor="@color/black"
android:textSize="20sp" />
</ScrollView>
</RelativeLayout>
/**
* Created by Saurabh(aqua) in 2017.
*/
public class ParallaxActivity extends BaseActivity {
/* view binding */
@BindView(R.id.scrollView)ScrollView scrollView;
@BindView(R.id.parallax_image)ImageView parallaxImage;
@BindView(R.id.tv_perhour)TextView textView;
/* color binding */
@BindColor(R.color.white)int whiteColor;
@BindColor(android.R.color.transparent)int transparentColor;
int maxTexSize = 30;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
/* set scroll listener on scroll view */
scrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
@Override
public void onScrollChanged() {
/* calculating the maximum distance we need to scroll for parallax */
int maxDistance = parallaxImage.getHeight();
/* getting the amount of scroll on Y-axis */
int movement = scrollView.getScrollY();
/* checking if we've reached the top. if yes then stop translation otherwise continue */
if (movement >= 0 && movement <= maxDistance) {
/* moving the parallax image by half the distance of the total scroll */
parallaxImage.setTranslationY(-movement/2);
}
}
});
}
/* this can be deleted in place of setContentView() in onCreate() */
/* added for brevity */
@Override
protected int getActivityLayout() {
return R.layout.activity_parallax;
}
}
@aqua30
Copy link
Author

aqua30 commented Sep 19, 2017

1
2

@yena-choi
Copy link

Thanks! It was helpful 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment