There is a view pager, and used the DepthPageTransformer .
mViewPager.setPageTransformer(false, new DepthPageTransformer());
The DepthPageTransformer code:
public class DepthPageTransformer implements PageTransformer {
private static float MIN_SCALE = 0.5f;
#Override
public void transformPage(View view, float position) {
/**
* [-1,0]Use the default slide transition when moving to the left page
* (0,1] Use the default slide transition when moving to the right page
* (1,+Infinity] This page is way off-screen to the right.
* [-Infinity,-1) This page is way off-screen to the left.
*/
int pageWidth = view.getWidth();
if (position > 1){
view.setAlpha(0);
view.setTranslationX(0);
}
else if (position > 0){
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
}
else if (position >= -1){
view.setAlpha(1);
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE + (1 - MIN_SCALE)
* (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
}
else{
view.setAlpha(0);
view.setScaleX(1);
view.setScaleY(1);
}
}
}
Somethings it will happen when scroll the view pager: all the fragment is gone. Or the only back fragment is shown, and the scale is 0.5, but the front fragment is gone, so we can see a small fragment in the screen.
Related
I am using viewpager2 with fragmentStateAdapter.
Also, setting page transformer as DepthPageTransformation(transition is working correctly the way I want)
But when I swipe up the pages, the on click events on that fragment works on double click(event works after clicking twice on it)
If I remove pageTransformation from the viewPager, then it works fine.
So, not able to understand that why is transformation causing click event problem.
private static final float MIN_SCALE = 0.75f;
public void transformPage(#NonNull View view, float position) {
int pageHeight = view.getHeight();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0f);
Log.d("batman",position+" <-1");
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1f);
view.setTranslationY(0f);
view.setScaleX(1f);
view.setScaleY(1f);
Log.d("batman",position+" <=0");
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationY(pageHeight * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
Log.d("batman",position+" <=1");
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0f);
Log.d("batman",position+" else");
}
}
}
HomeFragment(adapter setting):
mAdapter = new ViewPagerAdapter(this);
setPageChangeListener();
mViewPager.setAdapter(mAdapter);
// mViewPager.setOffscreenPageLimit(3);
mViewPager.setPageTransformer( new DepthPageTransformer());
I want that button click event should work at one click when the page is swiped up.
The clicks of the previous fragment were getting disabled on swipe up because I was updating my fragment which is added in view pager from onPageSelected() listener, so that was making the button work on double click.
#Override
public void onPageSelected(int position) {
homePresenter.onPageSelected();
currentPg = position;
}
Maybe we cannot update our fragment from this listener.
I was looking for vertical viewpager then I found this answer
it's working fine, but now I need to slide only half of the fragment.
I did this before, using horizontal viewpager with below solution
Override the getPageWidth method of PagerAdapter and make it return 0.5f;
but because I'm using vertical viewpager instead of horizontal viewpager, and FragmentPagerAdapter does not have any override method to return height
Is there any possible solution to do it?
just replace VerticalPageTransformer class with this source
private class VerticalPageTransformer implements ViewPager.PageTransformer {
#Override
public void transformPage(View view, float position) {
if (position < -1) {
view.setAlpha(0);
} else if (position <= 1) {
view.setAlpha(1);
view.setTranslationX(view.getWidth() * -position);
float yPosition = position * (float)(view.getHeight() / 2.5);
view.setTranslationY(yPosition);
} else {
view.setAlpha(0);
}
}
}
it works perfectly ;)
I have a ViewPager and a SlidingTabLayout (uses com.jpardogo.materialtabstrip:library:1.1.0) that works fine. The transition used is the DepthPageTransformer. My question is how could I have a different color for every tab/fragment and when I change tabs it smoothly blends to the tab color. I would also like the same thing to happen to the tabs, toolbar, and the very top bar. Help would be very appreciated!
An example would be the 360 Security App (https://play.google.com/store/apps/details?id=com.qihoo.security&hl=en)
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
I'm trying to create a tinder-like UI in android using the ViewPager.
I have looked at this library: https://github.com/kikoso/Swipeable-Cards, but I'd like to be able to see the previous card once I swipe right, hence the preference for a ViewPager.
The specific UI detail I am looking for is:
Stacking of images with the outline of the next view underneath the current view. I have been able to achieve the stacking of views through the ViewPager.PageTransformer interface, but I am unable to get the outline of the stack of the subsequent views inside the pager - the part that gives it a 3d look - like over here - card stacked on top of another card - http://i1.cdnds.net/14/38/300x522/friends-tinder-profiles-ross.jpg
Here is my pageTransform method
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
view.setRotation(90*(position));
} else if (position < 1) { // (0,1]
// Fade the page out.
view.setAlpha(1);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
view.setScaleX(1);
view.setScaleY(1);
} else if (position==1) {
view.setAlpha(1);
// view.setPadding(0,15,0,0);
}
else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
Is this possible with the viewPager?
So this was the way that I set it up - its a little hacky because I manually trigger the transformPage method as mentioned in my comment here:
Android ViewPager manually call PageTransformer transformPage
BUT, it works!
#Override
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setTranslationY(0);
view.setScaleX(1);
view.setScaleY(1);
view.setRotation(90*(position));
} else if (position < 1) { // (0,1]
// Fade the page out.
view.setAlpha(1);
view.setRotation(0);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
view.setTranslationY(50*position);
view.setScaleX(Math.max(0.9f, (1 - position)));
view.setScaleY(Math.max(0.9f, (1 - position)));
CardView cv = (CardView)view.findViewById(R.id.card_view);
cv.setPadding(0,0,0,0);
} else if (position==1) {
view.setAlpha(1);
view.setTranslationX(pageWidth*-position);
view.setTranslationY(50*position);
view.setScaleX(Math.max(0.9f, (1 - position)));
view.setScaleY(Math.max(0.9f, (1 - position)));
}
else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(1);
}
}
You can not implement tinder effect with PageTransformer interface because the position value is just 1 axis value. You should have other values like touch point coordinates in x, y axis because tinder effect uses trigonometrical functions.
You can easily do this using the Android Library Truffle-Shuffle. You can add X number of cards with any xml content inside of the cards. https://github.com/intuit/truffle-shuffle
I'm trying to change my ViewPager transition animation.
I'd like to have the same behavior as the default gallery, when you switch from one photo to the next one. It's basically an animation where the current page goes to the left while the next one comes from behind it and grows larger.
I've seen that I can change the animation with a PageTransformer.
pager.setPageTransformer(false, new PageTransformer() {
#Override
public void transformPage(View page, float position) {
if (position < 0) {
} else {
final float normalizedposition = Math.abs(Math.abs(position) - 1);
page.setScaleX(normalizedposition / 2 + 0.5f);
page.setScaleY(normalizedposition / 2 + 0.5f);
}
}
});
With that, I have the current page sliding to the left, that's ok.
The new page starts small in size and grows, that's also ok. But, the page comes from the right to center. I'd like to remove the translation and have it already in the middle, but small, hidden by the current page.
If I add page.setTranslationX(1080 * (-(position))); then the next pages stays in the middle of the screen, but they are visible at all time above the current page. If I also add alpha to the page, the page appearing isn't hidden behind the old one.
I've tried to check in the source code of the gallery app but I didn't found any reference to the transformPage function.
Turns out to be easy. It is in the demos in the android developper website.
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
See here (Depth page transformer).