Develop Reference

ViewPager with left and right preview

I need to set up a ViewPager with the following requirements:
- at any given time, 3 pages must be visible in the screen
- the center page isn't scaled and the behind pages are 60% of the center page;
- center page, must overlap a bit the behind pages.
From what I saw in other questions I've tried to do this:
viewPager.setClipToPadding(false);
int padding = (metrics.widthPixels - centerViewSize) / 2;
viewPager.setPadding(padding, 0, padding, 0);
viewPager.setPageMargin(-(padding / 2));
viewPager.setCurrentItem(10);
viewPager.setOffscreenPageLimit(3);
Doing this got me here:
This is what I was expecting. Just need to bring to front the current selected item.
I've then tried to scale the view with:
public static final float SCALED_SIZE = 0.6f;
viewPager.setPageTransformer(false, new PageTransformer() {
#Override
public void transformPage(final View page, final float position) {
if (position < -1) {
page.setScaleX(SCALED_SIZE);
page.setScaleY(SCALED_SIZE);
} else if (position <= 1) {
float scaleFactor = Math.max(SCALED_SIZE, 1 - Math.abs(position));
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
} else {
page.setScaleX(SCALED_SIZE);
page.setScaleY(SCALED_SIZE);
}
}});
But that gives me some problems.
The first item that should be selected is not the correct one.
Animation chopy.
At some points, there are more than 3 pages on the screen.
Scale is from the bottom and I would like to be from the center.
Any idea how I can solve my issues?

use Library UltraViewPager. It have very nice effects.

Android - Cube Out Transformer Not working

I am using this Library in order to create a transform effect on a pager. All the classes working good except for the Cube Out and Cube In transform. They appear white while scrolling.
I have also created a custom animation but it still not animate the pager.
What could be the problem here? and why only setRotationY is not working properly?
public class CubePageTrasformer extends BaseTransformer {
#Override
protected void onTransform(View view, float position) {
final float height = view.getHeight();
final float width = view.getWidth();
view.setPivotX(position < 0f ? width : 0f);
view.setPivotY(height * 0.5f);
float rotation = (90f * position);
view.setRotationY(rotation);
}
#Override
public boolean isPagingEnabled() {
return true;
}
}

I had the exact same issue as you and I found that the following change fixed the issue on all devices:
viewPager.clipChildren = false

animate view translationY on bottomsheet scroll

I would like to smoothly animate some views Y position based on the user scrolling a bottom sheet.
http://imgur.com/dVBlh83
However the animation is slightly jerky.
This is probably because scrolling a bottomsheet gives me a slideOffset at some interval, which is too infrequent to setTranlationY like I'm currently doing.
Is there a better way to do this.
Bottom sheet callback
BottomSheetBehavior.BottomSheetCallback() {
#Override public void onSlide(#NonNull View bottomSheetView, float slideOffset) {
int offset = (int) (slideOffset * 100);
if (offset > 0) {
scrollingHeaderView.animate(offset);
}
}
});
scrollingHeaderView
public void animate(int offset) {
position = -(offset / 2);
arrow.setTranslationY(offset * ANIMATION_RATIO_ARROW);
detailView.setTranslationY(offset * ANIMATION_RATIO);
}
I have tried using ObjectAnimator to create lots of small animations at each step.
ObjectAnimator.ofFloat(arrow, "translationY", arrow.getTranslationY(), position * ANIMATION_RATIO_ARROW).start();

in case it helps anyone else. I got it looking much better.
First i set the ration by pixel * range of values i'd get. So offset will be 0 -> 100. Mutliplied by the dp i want the view to move
private static int ANIMATION_RANGE = 100;
arrowScale = -(getResources().getDimensionPixelOffset(R.dimen.arrow_distance) / ANIMATION_RANGE);
containerScale = -(getResources().getDimensionPixelOffset(R.dimen.detail_distance) / ANIMATION_RANGE);
then as the value changes i set this using translationY
arrow.setTranslationY(position * arrowScale);
detailView.setTranslationY(position * containerScale);
I also needed a reset method, which animate back to the original position
public void reset() {
arrow.animate().setDuration(100).translationY(0);
detailView.animate().setDuration(100).translationY(0);
}

How do I scale up/enlarge RecyclerView items only when they are the most centered and shrink them when user swipes away

How do I scale up/enlarge RecyclerView items only when they are the most centered and shrink them when user swipes away?
I was able to achieve that with a ViewPager like so:
viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
#Override
public void transformPage(View page, float position) {
final float normalizedPosition = Math.abs(Math.abs(position) - 1);
page.setScaleX(normalizedPosition / 2 + 0.7f);
page.setScaleY(normalizedPosition / 2 + 0.7f);
page.setPadding(-dpToPx(40), 0, -dpToPx(40), 0);
}
});
But I had to rewrite the functionality and now I am using a horizontal recycler view.
I was able to set a scroll listener to the RecyclerView and scale up the current view, but I don't know how to scale it down when it goes out of focus

Cube Flip animation for Fragments on Android

I want to implement a basic 3d cube and rotate it by 90degrees either horizontally or vertically on Touch. What i want to implement is something similar to what is shown in the image below.
I've achieved this using ViewPager's ViewTransformer
But I am not happy with the result. The animation is not very smooth, and i cannot flip it, i have to drag my finger across the entire widht of the screen to rotate the cube.
I want to just flip it, but am not able to achieve it.
I've used BTGridPager-Android to achieve the above. But as mentioned, its not very convincing.
Here is my ViewTransformer code:
public abstract class ABaseTransformer implements PageTransformer {
#Override
public void transformPage(View page, float position) {
onPreTransform(page, position);
onTransform(page, position);
onPostTransform(page, position);
}
protected void onPreTransform(View page, float position) {
final float width = page.getWidth();
page.setRotationX(0);
page.setRotationY(0);
page.setRotation(0);
page.setScaleX(1);
page.setScaleY(1);
page.setPivotX(0);
page.setPivotY(0);
page.setTranslationY(0);
page.setTranslationX(isPagingEnabled() ? 0f : -width * position);
if (hideOffscreenPages()) {
page.setAlpha(position <= -1f || position >= 1f ? 0f : 1f);
} else {
page.setAlpha(1f);
}
}
public class HorizontalCubeOutTransformer extends ABaseTransformer {
#Override
protected void onTransform(View view, float position) {
final float normalizedposition = Math.abs(1 - Math.abs(position));
view.setPivotX(position < 0f ? view.getWidth() : 0f);
view.setPivotY(view.getHeight() * 0.5f);
view.setRotationY(90f * position);
view.setAlpha(normalizedposition);
}
#Override
public boolean isPagingEnabled() {
return true;
}
}
public class VerticalCubeOutTransformer extends ABaseTransformer {
#Override
protected void onTransform(View view, float position) {
final float normalizedposition = Math.abs(Math.abs(position) - 1);
view.setAlpha(normalizedposition);
view.setTranslationX(view.getWidth() * -position);
view.setTranslationY(position * view.getHeight());
view.setPivotX(view.getWidth() * 0.5f);
view.setPivotY(position < 0f ? view.getHeight() : 0f);
view.setRotationX(90f * -position);
}
#Override
public boolean isPagingEnabled() {
return false;
}
}
What I would like to know is how to rotate the cube on the flip gesture.
Note: I would like to achieve this without OpenGL or SurfaceView.
UPDATE:
till now i have implemented the cube flip using fragmenttransactionExtended but now i got some other problem, as the current fragment disappears as soon as the flip begins

You can use FragmentTransactionExtended
FragmentTransactionExtended
it provides all types of animations between frgaments