Search code examples
androidandroid-viewpagerpicasso

Glitch in viewPager


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.

enter image description here

Please help!


Solution

  • Found out myself! I had to set cropToPadding as true for the overflowing imageView.