I know how to use CircularReveal to reveal a view, so I'm looking for a way to do something like "CircularHide". In other words, I want to invisible a view by a circular animation (increasing radius) after making it visible. How can I do that?
I've written this to reveal:
private void startCircularReveal() {
RelativeLayout changeableLayout = findViewById(R.id.layoutChangeable);
int centerX = (likeButton.getRight() + likeButton.getLeft()) / 2;
int centerY = (likeButton.getBottom() + likeButton.getTop()) / 2;
float endRadius = (float) Math.hypot(changeableLayout.getWidth(), changeableLayout.getHeight());
changeableLayout.setVisibility(View.VISIBLE);
Animator revealAnimator = ViewAnimationUtils.createCircularReveal(changeableLayout,
centerX, centerY, 0, endRadius);
revealAnimator.setDuration(200).start();
}
Related
On scroll, I want to rotate and translate these list items in a way that they still are around in a circular manner. I have made a custom view and over ride these methods with this rotation and translation as used Here. But rotations are a bit weird and non circular.
This is what I want to achieve
#Override
protected void dispatchDraw(Canvas canvas) {
canvas.save();
int top = getTop();
float rotate = calculateAngle(top, recyclerViewHeight);
Matrix m = canvas.getMatrix();
m.preTranslate(-2 / getWidth(), -2 / getHeight());
m.postRotate(rotate);
m.postTranslate(2 / getWidth(), 2 / getHeight());
canvas.concat(m);
super.dispatchDraw(canvas);
canvas.restore();
}
private float calculateAngle(int top, float height) {
float result = 0f;
float fullAngleFactor= 60f;
if (top < height / 2f) {
result = (top - (height / 2f)) / (height / 2f) * fullAngleFactor;
} else if (top > height / 2f) {
result = (top - (height / 2f)) / (height / 2f) * fullAngleFactor;
}
return result;
}
I used this library to achieve same behavior. No need to create any custom view and override onDraw() or onDispatchDraw(). I used this layout manager configuration:
layoutManager = new CircleLayoutManager.Builder(this)
.setRadius(900)
.setAngleInterval(30)
.setDistanceToBottom(-350)
.setGravity(CircleLayoutManager.LEFT)
.build();
I am trying to draw spiral view as in screenshot attached,
I have array of points to draw based on number on circles.
I am new to android and kotlin .
Can anyone please suggest how to do this?
Today I added spiral drawing to this custom scrolling shapes app I'm building. My implementation makes use of Android import android.graphics.Path;. The spiral drawing is based on the user scrolling, with more segments added as the user scrolls.
The gist of the solution is as follows: I start with an initial arc and draw that. That arc is the initial arc of the spiral. On that arc has been added to the path, then use the bounding Rect of the Path to determine the bounds for the next segment of the arc.
The below is a sample but for full context you'll need to view the project: https://github.com/jdgreene2008/android_custom_views
private void addTopSpiralSegment(Path path, RectF bounds, SpiralSegment spiralSegment) {
float centerX = bounds.centerX();
float centerY = bounds.centerY();
float segmentBoundsLeft;
float segmentBoundsRight;
float segmentBoundsTop;
float segmentBoundsBottom;
if (path.isEmpty()) {
segmentBoundsLeft = centerX - spiralSegment.getWidth() / 2;
segmentBoundsRight = centerX + spiralSegment.getWidth() / 2;
segmentBoundsTop = centerY - spiralSegment.getHeight() / 2;
segmentBoundsBottom = centerY + spiralSegment.getHeight() / 2;
} else {
RectF pathBounds = new RectF();
path.computeBounds(pathBounds, true);
segmentBoundsLeft = pathBounds.left;
segmentBoundsRight = segmentBoundsLeft + spiralSegment.getWidth();
segmentBoundsTop = centerY - spiralSegment.getHeight() / 2;
segmentBoundsBottom = centerY + spiralSegment.getHeight() / 2;
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
path.addArc(segmentBoundsLeft, segmentBoundsTop, segmentBoundsRight,
segmentBoundsBottom, 180, 180);
}
}
private void addBottomSpiralSegment(Path path, RectF bounds, SpiralSegment spiralSegment) {
float centerX = bounds.centerX();
float centerY = bounds.centerY();
float segmentBoundsLeft;
float segmentBoundsRight;
float segmentBoundsTop;
float segmentBoundsBottom;
if (path.isEmpty()) {
segmentBoundsLeft = centerX - spiralSegment.getWidth() / 2;
segmentBoundsRight = centerX + spiralSegment.getWidth() / 2;
segmentBoundsTop = centerY - spiralSegment.getHeight() / 2;
segmentBoundsBottom = centerY + spiralSegment.getHeight() / 2;
} else {
RectF pathBounds = new RectF();
path.computeBounds(pathBounds, true);
segmentBoundsLeft = pathBounds.right - spiralSegment.getWidth();
segmentBoundsRight = pathBounds.right;
segmentBoundsTop = centerY - spiralSegment.getHeight() / 2;
segmentBoundsBottom = centerY + spiralSegment.getHeight() / 2;
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
path.addArc(segmentBoundsLeft, segmentBoundsTop, segmentBoundsRight,
segmentBoundsBottom, 0, 180);
}
}
I am trying to modify a little this library: https://github.com/Shinelw/ColorArcProgressBar
And this is what i've done so far, without the purple circle indicator:
arc progress bar
My question is: how can i animate the purple circle along with the progress(as shown in the image)?
Inside ColorArcProgressBar class that extends View, at onDraw method, this is how the progress is draw: canvas.drawArc(bgRect, startAngle, currentAngle, false, progressPaint);
and the animation is
private void setAnimation(float last, float current, int length) {
progressAnimator = ValueAnimator.ofFloat(last, current);
progressAnimator.setDuration(length);
progressAnimator.setTarget(currentAngle);
progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
currentAngle = (float) animation.getAnimatedValue();
curValues = currentAngle / k;
}
});
progressAnimator.start();
}
I managed to position the purple bitmat at the start of the progress like this:
canvas.drawBitmap(mIcon,bgRect.left+mIcon.getWidth()/2 +30, bgRect.bottom - 40 +mIcon.getHeight()/2 , null);
Now, how can I animate it along the arc like the progress?
Didn't try this out, if it's not right it's close...
// since currentAngle is a "sweep" angle, the
// final angle should be current + start
float thetaD = startAngle + currentAngle;
if (thetaD > 360F) {
thetaD -= 360F;
}
// convert degrees to radians
float theta = (float) Math.toRadians(thetaD);
// polar to Cartesian coordinates
float x = (float) (Math.cos(theta) * bgRect.width() / 2) + bgRect.centerX();
float y = (float) (Math.sin(theta) * bgRect.height() / 2) + bgRect.centerY();
canvas.drawBitmap(mIcon, x - mIcon.getWidth()/2, y - mIcon.getHeight()/2 , null);
It helped that your bitmap is circular, so we didn't have to rotate that...
I tried to implement createCircularReveal() in FloatingButton. But the animation is too fast. How to increase the duration of the Animation. I tried setDuration(milli-seconds), But its not working.
I follow developer.android.com, Defining Custom Animations
Here my code:
int cx = (fabBtn.getLeft() + fabBtn.getRight()) / 2;
int cy = (fabBtn.getTop() + fabBtn.getBottom()) / 2;
int finalRadius = Math.max(fabBtn.getWidth(), fabBtn.getHeight());
Animator anim = ViewAnimationUtils.createCircularReveal(fabBtn, cx, cy, 2, finalRadius);
anim.setDuration(2000);
fabBtn.setVisibility(View.VISIBLE);
anim.start();
I am also facing the issue as I mentioned and I am able to resolve this issue by getting cx and cy the center position for image view (In your case I think it is button).
So get cx and cy using this:
int cx = (fabBtn.getWidth()) / 2;
int cy = (fabBtn.getHeight()) / 2;
Instead of this::
int cx = (fabBtn.getLeft() + fabBtn.getRight()) / 2;
int cy = (fabBtn.getTop() + fabBtn.getBottom()) / 2;
You might be calling getWidth() and getHeight() too soon.
So you'll have to use a getViewTreeObserver()
Be sure to add a duration to anim.setDuration(time) and set the initial visibility of the view to INVISIBLE
Here the code:
public void checker() {
myView.getViewTreeObserver().addOnPreDrawListener(
new ViewTreeObserver.OnPreDrawListener() {
public boolean onPreDraw() {
int finalHeight = myView.getMeasuredHeight();
int finalWidth = myView.getMeasuredWidth();
// Do your work here
myView.getViewTreeObserver().removeOnPreDrawListener(this);
cx = finalHeight / 2;
cy = finalWidth / 2;
finalRadius = Math.max(finalHeight, finalWidth);
anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
myView.setVisibility(View.VISIBLE);
anim.setDuration(3000);
anim.start();
return true;
}
});
}
I thought I had the same problem, but it seems that, for some reason, a duration of just 2000 milliseconds is not enough for the animation to show. When I set the duration to 3000, I saw a beautiful circle animation.
A small delay of 1 second also helped
// get the center for the clipping circle
int cx = myView.getWidth() / 2;
int cy = myView.getHeight() / 2;
// get the final radius for the clipping circle
int finalRadius = Math.max(myView.getWidth(), myView.getHeight());
// create the animator for this view (the start radius is zero)
Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
anim.setStartDelay(1000);
// make the view visible when the animation starts
anim.addListener(new AnimatorListenerAdapter()
{
#Override
public void onAnimationStart(Animator animation)
{
super.onAnimationStart(animation);
myView.setVisibility(View.VISIBLE);
}
});
// start the animation
anim.start();
The following is supposed to draw an axis in the middle of the screen. However, nothing appears. I am positive that is has to do with my Paths.
#Override
protected void onDraw(Canvas canvas) {
//Variables declared here temporarily for testing purposes
int canterX = getWidth() /2;
int centerY = getHeight() /2;
int radius = 150;
Path verticalAxis = new Path();
Path horizontalAxis = new Path();
drawAxis();
}
private void drawAxis(Canvas canvas) {
int axisLineThickness = 1;
int verticalEndX;
int verticalEndY;
int horizontalEndX;
int horizontalEndY;
Paint axisPaint = new Paint();
axisPaint.setColor(Color.WHITE);
axisPaint.setStrokeWidth(axisLineThickness);
double theta;
for(int i = 90; i < 360; i += 180) {
theta = toRadians(i);
verticalEndX = centerX + (int) ((cos(theta)) * radius);
verticalEndY = centerY + (int) ((sin(theta)) * radius);
verticalAxis.moveTo(centerX, centerY);
verticalAxis.lineTo(verticalEndX, verticalEndY);
}
canvas.drawPath(verticalAxis, axisColor);
for(int i = 90; i < 360; i += 180) {
theta = toRadians(i);
horizontalEndX = centerX + (int) ((cos(theta)) * radius);
horizontalEndY = centerY + (int) ((sin(theta)) * radius);
horizontalAxis.moveTo(centerX, centerY);
horizontalAxis.lineTo(verticalEndX, verticalEndY);
}
canvas.drawPath(horizontalAxis, axisColor);
}
I know I can make the axis draw if I add the following to the vertical and horizontal for loops respectively:
Vertical For Loop:
canvas.drawLine(centerX, centerY, verticalEndX, verticalEndY, paint);
Horizontal For Loop:
canvas.drawLine(centerX, centerY, horizontalEndX, horizontalEndY, paint);
But I don't want to solve the issue this way, I want to correct what is wrong with my paths. Can anyone tell me why the points aren't adding to my path correctly? The loop should only go through twice which creates a line for each side of the axis. Ie. One loop creates the top of the vertical axis and the second loop creates the bottom part.
How do I get my paths create that full line and then draw it outside of the loop?
Paint's default style appears to be FILL, so maybe just having a line in your path is confusing things. Try setting it to STROKE:
axisPaint.setStyle(Paint.Style.STROKE);
See Paint.Style