I have a layout with 2*2/3*3/4*4... ImageView. and some of them randomly colored like this:
For ranodomly colored one of Imageview, I have Use this code:
Random random = new Random();
id = array_image1.get(random.nextInt(array_image1.size()));
ObjectAnimator animator = ObjectAnimator.ofInt(findViewById(id), "backgroundResource", R.drawable.original_img, R.drawable.org_state).setDuration(1500);
animator.setStartDelay(1500);
animator.setEvaluator(new ArgbEvaluator());
animator.start();
And I'm handling some click event on colored ImageView like this:
for (int i = 0; i < array_image11.size(); ++i) {
final int btn = array_image11.get(i);
findViewById(btn).setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
if ((findViewById(id)).equals(findViewById(btn)))
//Inform the user the button has been clicked
{
//forward
findViewById(id).setBackgroundResource(R.drawable.original_img);
}else {
//backward
Toast.makeText(StaticSpatial.this, "wrong", Toast.LENGTH_SHORT).show();
}
});
}
There is no problem till above.
But When I'm adding a random rotate animation code like this:
int n;
int[] a=new int[]{1,2};
final Random rnd = new Random();
n=a[rnd.nextInt(a.length)];
if(n==1)
{
ObjectAnimator rotateAnimator = ObjectAnimator.ofFloat(l4, View.ROTATION, 0, 90);
rotateAnimator.setDuration(2000); // miliseconds
rotateAnimator.start();n);
}
else
{
ObjectAnimator rotateAnimator = ObjectAnimator.ofFloat(l4, View.ROTATION, 0, 90);
rotateAnimator.setDuration(2000); // miliseconds
rotateAnimator.start();
}
After rotation image look like this(i.e. colored Imageview chage it's position):
After adding this rotate animation code my clickEvent not get correct ImageView id.
i.e. when imageview change it's position,their id should be go with that positon. but imageview id ramains at same postion.
So How to get required ImageviewId after rotation
Update:
After using azizbekian's answer(now using animator instead of animation) I found correct image-view id , but only first time.
i.e. first time when Activity starts it works good but when I'm going to a new view(say 3*3) and return back again to this view(2*2),it returns wrong image-view id till Activity restarts again.see my updated code for ref.
Explanation of working and issue:
I have already said that there are many matix of Imageview such as 2*2/3*3/4*4..... So when we start Application first load 2*2 matrix of imageview and when we click the odd colored imageview it goes to 3*3 matrix but when we click other than odd colored imageviewthen it goes to next level say 3*3.So when app start first time when I click on odd colored imageview it goes to 3*3 matrix but when return again on 2*2 after clicking other than odd colored imageview.and then again when we click on colored imageview it not get correct image id. and if any other query plz ask?
How to resolve this issue ?
When ImageView changes it's position, their id should go with that position. But ImageView id remains at same position.
That's because you are using Animation, which in fact doesn't change your View's position. What is does it makes an illusion of animation, so it only changes that view's matrix, but doesn't perform layout changes to the view.
Use Animator API instead of Animation.
Update
Given this animation xml:
<set xmlns:android="schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000" />
</set>
This can be substituted with following:
ObjectAnimator rotateAnimator = ObjectAnimator.ofFloat(yourView, View.ROTATION, 0, 90);
rotateAnimator.setDuration(2000);
rotateAnimator.start();
Update:
Just set rotation zero at every load of view (or layout) like this:
mylayoutname.setRotation(0);
Because after rotation it doesn't go to zero degree automatically until activity stops.
Maybe instead of using rotation you can store the Ids of the ImageViews in a List or Array and the Id of the currently colored ImageView in a separated variable, and when you have to rotate instead you can simply select one random ImageView from the List/Array (excluding the currently colored one), remove the color from the previous one and color the new one.
By the way, when you have 3x3, 5x5, 7x7 etc. layouts is the middle ImageView never colored? 'Cause in those cases a rotation wouldn't change anything (visually, at least). I mean, a rotation works for choosing a random square in a layout of 2x2 squares, but not in any other case. Do you need to choose the squares randomly or do they need to always be chosen by a rotation? (I hope what I mean is clear...)
Related
I have a RecyclerView on the screen and products with images in it. I'm trying to make an animation where the image of the product from the RecyclerView moves to the floating action button on the screen (both have the same parent layout - a coordinator layout.)
I have tried achieving this with TranslateAnimation and when that didn't work well, I also tried doing it with ObjectAnimator, but with both the animation always either starts from the wrong position or ends in the wrong position on the screen.
This was my attempt to achieve this with TranslateAnimation:
// Get the X and Y position of the ImageView and the FAB
int[] imageViewPos = new int[2];
productImage.getLocationInWindow(imageViewPos);
int[] fabPos = new int[2];
fab.getLocationInWindow(fabPos);
// Calculate the x and the y distance between the FAB and the imageView
xDelta = fabPos[0] - imageViewPos[0];
yDelta = fabPos[1] - smallImageViewPos[1];
productMoveAnimation = new TranslateAnimation(0, xDelta, 0, yDelta);
productMoveAnimation.setDuration(500);
productMoveAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
productImage.startAnimation(productMoveAnimation);
I also tried to use getLocationOnScreen instead of getLocationInWindow, but the productImage still didn't move to the correct position of the FAB.
This was my attempt to achieve this using ObjectAnimator:
pvhX = PropertyValuesHolder.ofFloat("x", imageViewPos[0], fabPos[0]);
pvhY = PropertyValuesHolder.ofFloat("y", imageViewPos[1], fabPos[1]);
productMoveAnim = ObjectAnimator.ofPropertyValuesHolder(productImage, pvhX, pvhY);
productMoveAnim.start();
And with this code instead, the ImageView kept going off the screen in the animation - even though it did start from the correct position. I tried getLocationOnScreen here too, and getLeft and getTop but it didn't fix anything.
I would really appreciate if anyone could help me figure out what I'm missing here, thanks in advance for any help! :)
I´m new to programming, started in the Lockdown last year with youtube videos and a book. I´m trying to make a button, that starts an fade out animation on an ImageView. which should be repeatable. It´s basically a dice roll and i want the dice to appear and then disappear every time within like 2 seconds after click.
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fade_out);
dice.setAnimation(animation);
animation.setStartOffset(3000);
animation.setDuration(100);
dice.setVisibility(View.VISIBLE);
dice.animate().alpha(1).setDuration(500);
btnDice.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Animation animation1 =AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fade_out);
dice.setAnimation(animation1);
}
});
this is the content of the fade_out animation:
<alpha
android:duration="2000"
android:fromAlpha="1"
android:interpolator="#android:anim/accelerate_interpolator"
android:toAlpha="0"
/>
and i´ve got this in the top part:
android:fillAfter="true"
this is my dice, its an array with 6 dice pictures in it:
private void changeDice() {
Random random = new Random();
int randomNumber = random.nextInt(6);
dice.setBackgroundResource(dicee.getResourceId(randomNumber, 1));
}
im not sure how to connect all this to make the button appear and disappear each time. it works only once and since i put the dice image to "gone" added this:
dice.setVisibility(View.VISIBLE);
dice.animate().alpha(1).setDuration(500);
i get some weird results, that i cant explain. first animation works, after that the dice appear, animation wont trigger again and on multiple clicks the dice sometimes disappear.
maybe someone might see what i could change to make it work.
I want to place some images (triggered on click action) inside a layout. I have to place them such that they don't get out of the parent layout.
Code I'm using to add a new image on clicking the layout:
LinearLayout layout = (LinearLayout) findViewById(R.id.layout);
ImageView image = new ImageView(this);
LinearLayout.LayoutParams coordinates = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
image.setLayoutParams(coordinates);
image.setImageResource(R.drawable.image);
layout.addView(image);
If I press on the layout , I must see my imageView put randomly.
Random random = new Random();
int x = random.nextInt(layout.getWidth());
int y = random.nextInt(layout.getHeight());
image.setX(x);
image.setY(y);
But this won't do it. And I see those images outside my layout too.
You are setting x & y which are upper left-top corner - starting point of image to display it. As x/y value can be right/bottom corner, therefore, your image goes out of layout in that case.
Please note - x, y are starting point from where your image will be drawn.
You need to make sure that layoutWidth - x >= imageWidth and layoutHeight - y >= imageHeight.
I wanna create a view with Arc Shape background.. my view has weight of .3.. which makes it fill one third of my layout..
I try to set its background to an arc shape (I want it to be half oval) like this:
ArcShape shape = new ArcShape(270, 180);
ShapeDrawable shapeDrawable = new ShapeDrawable(shape);
shapeDrawable.getPaint().setColor(getResources().getColor(R.color.primary_color));
leftPathView.setBackgroundDrawable(shapeDrawable);
this generates the shape I need but it doesn't fill the space of my view.. It only takes half of it.. But when I create a completed circle it takes all the space..
Any Idea ?
After a bit of research I found this to be the best answer. Especially if you want to do this in your onCreate function, bacause when the onCreate function hasn't ended the layout does not yet have a width and height (more info here).
final LinearLayout leftPathView= (LinearLayout) findViewById(R.id.left_path_view);
layout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
leftPathView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
leftPathView.setX(-layout.getWidth());
leftPathView.getLayoutParams().width = layout.getWidth() * 2;
leftPathView.requestLayout();
}
});
ArcShape shape = new ArcShape(270, 180);
ShapeDrawable shapeDrawable = new ShapeDrawable(shape);
shapeDrawable.getPaint().setColor(getResources().getColor(R.color.primary_color));
layout.setBackground(shapeDrawable);
This code does make your View go out of the bounds of your screen, so when adding other items to this View you need to take that into account. A solution for that could be to put the View in a RelativeLayout and put another view on top of the leftPathView.
I'm trying to animate UI elements. I would like to move an editText and a Button from the middle to the top of the screen and display results of an http call below them in a table. It would be great if anyone could point me in the right direction, at this point I don't know wether I should use Java or XML for this.
Thanks in advance.
Use Translation framework to achieve this, this works as:
TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
So you need to write your code for moving view in y-axis direction, as follows:
mAnimation = new TranslateAnimation(0, 0, 0, 599);
mAnimation.setDuration(10000);
mAnimation.setFillAfter(true);
mAnimation.setRepeatCount(-1);
mAnimation.setRepeatMode(Animation.REVERSE);
view.setAnimation(mAnimation);
Here view may be anything, textview, imageView etc.
accepted answer caused an error inside my code, code snippet below almost identical to accepted answer & worked without causing errors, to slide an object off the screen. i needed gestures tied to keyPad to also 'slide away' , and switched from TranslateAnimation to ObjectAnimator (second block of code below).
final LinearLayout keyPad = (LinearLayout)findViewById(R.id.keyPad);
moveKeyPadUp(keyPad);
private void moveKeyPadUp(LinearLayout keyPad){
Animation animation = new TranslateAnimation(0,0,0,-500);
animation.setDuration(1000);
animation.setFillAfter(true);
keyPad.startAnimation(animation);
}
private void moveKeyPadUpdated(LinearLayout keyPad){
ObjectAnimator mover = ObjectAnimator.ofFloat(keyPad,"translationY",0,-500);
mover.setDuration(300);
mover.start();
}