I have made a view pager slider which slider layout. I have added parallax like transformation to it.
Code:
viewPager.setClipToPadding(false);
viewPager.setPadding(64, 0, 64, 0);
viewPager.setPageMargin(24);
viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
@Override
public void transformPage(@NonNull View view, float v) {
if (v >= -1 && v <= 1) {
view.findViewById(R.id.imageView_backdrop).setTranslationX(-v*(viewPager.getWidth()/2));
} else {
view.setAlpha(1);
}
}
});
And the layout:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/imageView_backdrop"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:scaleX="1.2"
android:scaleY="1.2"
android:src="@drawable/musical"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintEnd_toEndOf="@id/imageView_overlay"
app:layout_constraintStart_toStartOf="@id/imageView_overlay"
app:layout_constraintTop_toTopOf="@id/imageView_overlay" />
<ImageView
android:id="@+id/imageView_overlay"
android:layout_width="0dp"
android:layout_height="0dp"
android:alpha="0.65"
android:src="@drawable/bg_rounded_rectangle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<...>
</android.support.constraint.ConstraintLayout>
I have made the imageview to scale 1.2 because the parallax would give me empty edges on swiping.
But the Images are not fitting inside their layout, and overflowing.
Please help!
Found out myself! I had to set cropToPadding as true for the overflowing imageView.