Develop Reference

more button between two recycler view

I have two recycler views in one screen and in between of them, there is one more button like this.
I want to update the height of recycler view of the upper one to MATCH PARENT with animation, So I had tried this.
binding.moreLl.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
ValueAnimator anim = ValueAnimator.ofInt();
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = binding.fragmentWalletRv.getLayoutParams();
layoutParams.height = val;
binding.fragmentWalletRv.setLayoutParams(layoutParams);
}
});
anim.setDuration(500);
anim.start();
}
});
But unfortunately i cant get the expected result. So please guide me how i can do that thing.
Thanks in advance.

If you just want to have an animation when layout changes, no need to use a custom animation.
Try adding default layout change animation by enabling
android:animateLayoutChanges="true"
to the parent layout in xml.
On your more button click, only change the LayoutParams of the Recyclerview.
To change the speed of animation
LinearLayout layout = mContentView.findViewById(R.id.parent_layout);
LayoutTransition lt = layout.getLayoutTransition();
lt.setDuration(2000);

public class SlideAnimation extends Animation {
int mFromHeight;
int mToHeight;
View mView;
public SlideAnimation(View view, int fromHeight, int toHeight) {
this.mView = view;
this.mFromHeight = fromHeight;
this.mToHeight = toHeight;
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation transformation) {
int newHeight;
if (mView.getHeight() != mToHeight) {
newHeight = (int) (mFromHeight + ((mToHeight - mFromHeight) * interpolatedTime));
mView.getLayoutParams().height = newHeight;
mView.requestLayout();
}
}
#Override
public void initialize(int width, int height, int parentWidth, int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
}
#Override
public boolean willChangeBounds() {
return true;
}
}
Use above animation like below
rv1 = findViewById(R.id.rv1);
Animation animation = new SlideAnimation(rv1, rv1.getHeight(), 500);
animation.setInterpolator(new AccelerateInterpolator());
animation.setDuration(500);
rv1.setAnimation(animation);
rv1.startAnimation(animation);

Shape Android Material Design

I want to ask about how to create animation for changing shape in android material design. And this is video that I got from Android Material Design guidelines.
Material can change shape
Thank you.

This is a quick implementation of that animation you linked to. It's using CardView from the support library, plus a custom PathInterpolator to make it move more like in the video (the default AccelerateDecelerateInterpolator is too abrupt, but you go with that one in pre-Lollipop devices). It's not a work of art, but hopefully this should give you an idea of one possible way these paper animations can be created.
Here's a demo video https://drive.google.com/file/d/0B7TH7VeIpgSQYkx2TVlSakZidXM/view.
final int origSize = getResources().getDimensionPixelSize(R.dimen.original_size);
final int origRadius = getResources().getDimensionPixelSize(R.dimen.original_radius);
final int targetRadius1 = getResources().getDimensionPixelSize(R.dimen.target_radius_1);
final int targetRadius2 = getResources().getDimensionPixelSize(R.dimen.target_radius_2);
final int targetSize1 = origSize * 2;
final int targetSize2 = origSize * 4;
final int ANIMATION_INTERVAL_MS = 600;
final int ANIMATION_DURATION_MS = 700;
private void doMaterialAnimation() {
ValueAnimator va1 = ObjectAnimator.ofFloat(1, 0);
va1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
transformMaterial(origSize, targetSize1, origRadius, targetRadius1, animation);
}
});
ValueAnimator va2 = ObjectAnimator.ofFloat(1, 0);
va2.setStartDelay(ANIMATION_INTERVAL_MS);
va2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
transformMaterial(targetSize1, targetSize2, targetRadius1, targetRadius2, animation);
}
});
ValueAnimator va3 = ObjectAnimator.ofFloat(1, 0);
va3.setStartDelay(ANIMATION_INTERVAL_MS);
va3.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
transformMaterial(targetSize2, origSize, targetRadius2, origRadius, animation);
}
});
AnimatorSet aset = new AnimatorSet();
aset.playSequentially(va1, va2, va3);
aset.setDuration(ANIMATION_DURATION_MS);
aset.setInterpolator(new PathInterpolator(0.75f, 0.1f, 0.25f, 0.9f));
aset.start();
}
private void transformMaterial(int origSize,
int targetSize,
int origRadius,
int targetRadius,
ValueAnimator animation) {
float fraction = (float) animation.getAnimatedValue();
cardView.setRadius(interpolate(origRadius, targetRadius, fraction));
cardView.getLayoutParams().width = cardView.getLayoutParams().height
= (int) ((targetSize - origSize) * (1 - fraction) + origSize);
cardView.requestLayout();
}
private float interpolate(int from, int to, float fraction) {
return ((from - to) * fraction) + to;
}
This is the card, just for reference.
<android.support.v7.widget.CardView
android:id="#+id/card"
android:background="#color/background_material_light"
app:cardCornerRadius="#dimen/original_radius"
android:layout_centerInParent="true"
android:layout_width="#dimen/original_size"
android:layout_height="#dimen/original_size"
>

Android fragment transition custom view

I want to create a custom animation for fragment transition. The animation is in form of a circle that increases his radius from a specific size until it is equal to window height. I can use ScaleAnimation, but then I'll lose drawable quality. Does someone have any ideas ho to do this. Thanks in advance.

Ok. I'll answer my own question :). To animate the fragment transition with my custom transition (a colored circle that increases his size) I have done the following:
- create a custom view that draws a circle and add the possibility to increase his radius;
- place this view in my FragmentActivity xml layout;
- when the target button is clicked and fragment should change I've called ValueAnimator to change circle radius;
Final code will look something like this:
public class MainScreenActivity extends AppCompatActivity {
private Button targetButton;
private CircleView circleView;
public void targetButtonClick(View view) {
AnimationHandler handler = new AnimationHandler(view.getX(),view.getY());
handler.animate();
}
private class AnimationHandler implements Animator.AnimatorListener, ValueAnimator.AnimatorUpdateListener {
private static final int TRANSITION_ANIM_DURATION = 500;
private final float centerX;
private final float centerY;
private ValueAnimator valueAnimator;
public AnimationHandler(float x, float y) {
this.centerX = x;
this.centerY = y;
init();
}
private void init() {
Point point = new Point();
getWindowManager().getDefaultDisplay().getSize(point);
valueAnimator = ValueAnimator.ofFloat(0, point.y);
valueAnimator.setDuration(TRANSITION_ANIM_DURATION);
valueAnimator.addUpdateListener(this);
valueAnimator.addListener(this);
}
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
#Override
public void onAnimationUpdate(ValueAnimator animation) {
circleView.setRadius((float) animation.getAnimatedValue());
}
public void animate() {
circleView.setXCenter(centerX);
circleView.setYCenter(centerY);
int color = getResources().getColor(android.R.color.dark_red);
circleView.setStrokeWidth(getResources().getDimensionPixelSize(R.dimen.trans_circle_width));
valueAnimator.start();
}
}
}

Expand Animation to work on both sides? (on negative axis)

I implemented an ExpandAnimation on view like this:
#Override
protected void applyTransformation(float interpolatedTime,
Transformation t) {
LayoutParams lp =
(LayoutParams) view.getLayoutParams();
if(rightAnimation){
lp.width = (int) (mStartWidth + mDeltaWidth *
interpolatedTime);
view.setLayoutParams(lp);
}else{
}
}
With this animation my view expands and shrinks.
What i want to do is to implement this animation to the other side (to -x side) as well. But i get confused a little bit, since shrinking the width will not work.
(Since minus widths or heights are not allowed)
Does anyone know a better way to implement expand animation to the left (-x) or up(-y) side as well?
Or maybe mirroring the view?

Finally I achieved to make a left hand side expand animation. Here is the code:
private class ExpandAnimation extends Animation implements Animation.AnimationListener {
private final int mStartWidth;
private final int mDeltaWidth;
int delta;
public ExpandAnimation(int startWidth, int endWidth) {
mStartWidth = startWidth;
mDeltaWidth = endWidth - startWidth;
RelativeLayout.LayoutParams param = (RelativeLayout.LayoutParams) getLayoutParams();
delta = param.width;
setAnimationListener(this);
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
RelativeLayout.LayoutParams param = (RelativeLayout.LayoutParams) getLayoutParams();
delta = param.width;
if(param.width <= 0){
delta = 0;
}
param.width = (int) (mStartWidth + mDeltaWidth *
interpolatedTime);
if(delta != 0){
delta = (int) (mStartWidth + mDeltaWidth *
interpolatedTime) - delta;
}
param.leftMargin -=delta;
setLayoutParams(param);
}
#Override
public boolean willChangeBounds() {
return true;
}
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
setText(text);
requestLayout();
mExpanded = !mExpanded;
}
#Override
public void onAnimationRepeat(Animation animation) {
}
}
For a reason that I don't know, width comes as -2 in the start. So i filter out that by an if. Apply Transformation method does the job.

animate a view from a particular point to fill whole screen and the re size it back to that point

I Know how to animate a view to whole screen and animate back to its original size. here is the link to do this Re sizing through animation
But the problem is that this technique works only when if my view is place at the start of the screen.
What i want is that if my view of height and width (50,50) is placed in center of screen below some button and i click that view it should animate to fill the whole screen and when clicked again it animates back to its original size (50,50)

If you're using LinearLayout, try to set AnimationListener for this animation and toggle the visibility of the button appropriately. Set button's visibility to View.GONE onAnimationStart when 'expanding' view and to View.VISIBLE onAnimationEnd when 'collapsing' it. Using RelativeLayout can be the solution for this problem too.
For animation:
public class ExpandCollapseViewAnimation extends Animation {
int targetWidth;
int targetHeight;
int initialWidth;
int initialHeight;
boolean expand;
View view;
public ExpandCollapseViewAnimation(View view, int targetWidth, int targetHeight ,boolean expand) {
this.view = view;
this.targetWidth = targetWidth;
this.targetHeight = targetHeight;
this.initialWidth = view.getWidth();
this.initialHeight = view.getHeight();
this.expand = expand;
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
int newWidth, newHeight;
if (expand) {
newWidth = this.initialWidth
+ (int) ((this.targetWidth - this.initialWidth) * interpolatedTime);
newHeight = this.initialHeight
+ (int) ((this.targetHeight - this.initialHeight) * interpolatedTime);
} else {
newWidth = this.initialWidth
- (int) ((this.initialWidth - this.targetWidth) * interpolatedTime);
newHeight = this.initialHeight
- (int) ((this.initialHeight - this.targetHeight) * interpolatedTime);
}
view.getLayoutParams().width = newWidth;
view.getLayoutParams().height = newHeight;
view.requestLayout();
}
#Override
public void initialize(int width, int height, int parentWidth,
int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
}
#Override
public boolean willChangeBounds() {
return true;
}
}
And layout XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button android:id="#+id/btn"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:text="Test"/>
<View android:id="#+id/centered_view"
android:layout_width="50dp"
android:layout_height="50dp"
android:clickable="true"
android:layout_gravity="center_horizontal"
android:background="#FF0000"/>
</LinearLayout>
This code works:
animatedView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (!expand) expandView();
else collapseView();
}
});
private void expandView() {
expand = true;
animatedView.clearAnimation();
Display display = this.getWindowManager().getDefaultDisplay();
int maxWidth = display.getWidth();
int maxHeight = display.getHeight();
ExpandCollapseViewAnimation animation = new ExpandCollapseViewAnimation(animatedView, maxWidth,maxHeight, expand);
animation.setDuration(500);
animation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
btn.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
});
animatedView.startAnimation(animation);
animatedView.invalidate();
}
private void collapseView() {
expand = false;
animatedView.clearAnimation();
ExpandCollapseViewAnimation animation = new ExpandCollapseViewAnimation(
animatedView, dpToPx(this, 50),dpToPx(this, 50), expand);
animation.setDuration(500);
animation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
btn.setVisibility(View.VISIBLE);
}
});
animatedView.startAnimation(animation);
animatedView.invalidate();
}