I have a question regarding crossfading on a viewpager where I have objects that depends on their z-layer. I found this topic OnPageChangeListener alpha crossfading which provides the exact solution that I'm after except that the z-layers are ignored in the swiping, but only for the items on the left side, not the items on the right side.
First you can see the content on the left side, where the button is "cut" in half, next the transition, and, third, the item on the right side where the button is shown in its entirety. What I don't understand is why the button is only partly visible and what I need to do to make it fully visible?
content_main.xml:
<?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/sand">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:textSize="30dp"
android:text="Hello World!" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="350dp"
android:layout_below="@+id/title" />
</RelativeLayout>
content_main_item.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="350dp">
<ImageView
android:id="@+id/background_color"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="center" />
<RelativeLayout
android:id="@+id/background_part"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/sand"
android:layout_gravity="center_horizontal|bottom">
</RelativeLayout>
<RelativeLayout
android:id="@+id/item_container"
android:layout_width="match_parent"
android:layout_height="350dp">
<ImageView
android:id="@+id/page_image"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:src="@drawable/smaller" />
<TextView
android:id="@+id/page_header"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignBottom="@+id/page_image"
android:layout_marginBottom="45dp"
android:text="Header Blue"
android:lines="2"
android:textColor="@android:color/black"
android:textAllCaps="true"
android:textStyle="bold"
android:gravity="center"
android:textSize="20dp" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
>
<Button
android:id="@+id/page_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:text="Click me"
/>
</FrameLayout>
</RelativeLayout>
</FrameLayout>
My modified CustomPageTransformer:
public class CustomPageTransformer implements ViewPager.PageTransformer {
public static final float ALPHA_VALUE = 0.8f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
View backgroundImageView = view.findViewById(R.id.background_color);
View contentView1 = view.findViewById(R.id.item_container);
if (position < -1) {
// This page is way off-screen to the left
} else if (position <= 0) { // [-1,0]
// This page is moving out to the left
if (backgroundImageView != null) {
// Fade the image in
backgroundImageView.setAlpha(ALPHA_VALUE + position);
}
// But swipe the contentView
swipeContent(position, pageWidth, contentView1);
// Counteract the default swipe
view.setTranslationX(pageWidth * -position);
} else if (position <= 1) { // (0,1]
// This page is moving in from the right
// Counteract the default swipe
view.setTranslationX(pageWidth * -position);
swipeContent(position, pageWidth, contentView1);
if (backgroundImageView != null) {
// Fade the image out
backgroundImageView.setAlpha(ALPHA_VALUE - position);
}
} else {
// This page is way off-screen to the right
}
contentView1.bringToFront();
}
private void swipeContent(float position, int pageWidth, View view) {
if (view != null) {
view.setTranslationX(pageWidth * position);
}
}
}
The initialization of viewpager and transformer looks like this:
viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setPageTransformer(false, new CustomPageTransformer());
pagerAdapter = new ItemPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(pagerAdapter);
viewPager.setOffscreenPageLimit(1);
pagerAdapter.setItems(items);
You can find the full source code here.
