Android Fade Out To New View - java

I have an ImageView. When I change its image resource, I want to fade to the new resource. (I don't want the old resource to fade out and the new one to fade in; I want the new one to already be in the background and the old image to fade out, revealing the new image.) Is there a way to do this with only one View? I don't want to use two stacked Views because I need to do this with enough images that it would be bad for performance. Right now, I just have the basics:
fadeout animation
<?xml version="1.0" encoding="UTF-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_interpolator"
android:fromAlpha="1.0" android:toAlpha="0.0" />
using fadeout animation on the View
Animation fadeout = AnimationUtils.loadAnimation(this, R.anim.fadeout);
fadeout.setDuration(0);
boardView[location].startAnimation(fadeout);
Now, I need to somehow make the new image appear in the background as the View is fading out. Is this possible without adding a second View in the background?

ObjectAnimator alphaAnimation = ObjectAnimator.ofFloat(view, View.ALPHA, 1,0);
This would be the one of the way to do fade in/out animation. You just needs to the pass the view to which perform the animation, objectAnimator supports from honeycomb version

Related

How can I move View from Y position to another Y

I have a button and I want to make an animation of going down. I made it but the functionality is left at the previous position(like the button moves but if I click on it, it doesn't work, but if I click its previous position it will work)
Animation logbtn = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.logbtnanim);
button.startAnimation(logbtn);
And the animation code is this.
P.S. Parent is the constraint layout.
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<translate
android:fromYDelta="0"
android:toYDelta="100"
android:duration="1000"/>
</set>
First of all you don't need the AnimatorSet Tag if you only have one animation. This is used if you want to play multiple animations together.
Second you are using TranslateAnimation which does not animate the Buttons property, it only moves the pixels on the screen, so after the animation, Android still thinks the view is at the old position, that is why it is still clickable there.
I suggest doing it in Java code using ViewPropertyAnimator something like :
button.animate().translationY(...f).duration(1000);
Or ObjectAnimator which is a little more flexible since you can also do it in xml.

ImageView onClick animation doesn't work after change in resource

I'm new to android, and I am currently working on a simple connect three game, I have nine ImageViews which contain transparent images, when the ImageView is clicked, the resource is changed to x or o.
I've tried adding more animation, and setting resource to null rather than a transparent image, but it didn't work, only restarting the activity seems to fix it.
public void oneClick (View view)
{
//image view onClick
ImageView one = (ImageView) findViewById(R.id.one);
one.setImageResource(R.drawable.x); //setting x or y
one.animate().rotation(180).setDuration(500); //animation
}
Here's how I reset the images,
one.setImageResource(R.drawable.transp)
After this, if the onClick activity is called again, the image is set.
However the animation doesn't seem to work.
What am I doing wrong?
My image was rotated 180, so it wasn't rotating again, the simple solution was to reset the orentation of the image then run the rotate animation again, which seems to have fixed it!
clicked.setImageResource(R.drawable.x);
clicked.animate().rotation(180).setDuration(500);
after this
clicked.animate().rotation(0);
now if I use the rotation animation again, it seems to work!
This is a simple fix. Simply add .start() to your animation. It should look like this afterward:
one.animate().rotation(180).setDuration(500).start();

How to create a "fill-up" animation in Android

I'm trying to create a "fill-up" animation on a shape in Android. It should start being completely invisible and then gradually "fill up" from the bottom like this:
What I am specifically trying to animate is a circle such as this one:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#666666"/>
<size
android:width="120dp"
android:height="120dp"/>
</shape>
I have checked out the AlphaAnimation, RotateAnimation, ScaleAnimation and TranslateAnimation (sublasses of Animation) but I can't find a way to use them for this.
Here is how I eventually solved it:
I included this library from github https://github.com/lzyzsd/CircleProgress which contains a circular progress bar (CircleProgress). I added a countdowntimer to gradually increase the "progress" it is displaying
Here is the code:
final CircleProgress circularProgress =(CircleProgress)findViewById(R.id.circleProgress);
//Hides the text and the part of the circle which should not be shown
circularProgress.setUnfinishedColor(Color.parseColor("#00000000"));
circularProgress.setTextColor(Color.parseColor("#00000000"));
//Makes the circle red
circularProgress.setFinishedColor("#FF0000");
final int timeToCountDownMilis = 10000;
circularProgress.setMax(timeToCountDownMilis);
//Initiates and starts the countdowntimer which gradually increases the "progress" in the progress bar
new CountDownTimer(timeToCountDownMilis,70){
onTick(long milisUntilFinished){
circularProgress.setProgress(timeToCountDownMilis-(int)milisUntilFinished);
}
onFinish(){
}
}.start();
Thanks to Stan for pointing me to circular progress bars!
You could dig deep in Animations, like drawPath etc. What I should do in this case is simplier a bit:
-place a full red circle on a screen
-put a View with white bg over it (like a square), covering all the circle
-animate that white square View moving up revealing your circle
You could use a simple transition animation to do it.
That way it gonna looks like a filling animation you want.
Well, my answer was given following images you provide and it covers the target good enough. But if you wish something like a progress bar looking so, you should visit https://github.com/snowdream/awesome-android and check circular progress bar libs there, at least you'll maybe lern how to achieve your goal Or find out its already done.

Progress bar sizing Android

I am looking for a way to make a progress bar fill effect on Android.
I have a FrameLayout called progressBar and inside this FrameLayout is a LinearLayout called filledBar. I don't know the literal widths of either progressBar or filledBar, but I would like filledBar to take up a certain amount of progressBar. How would I do this? (I am creating both bars programatically)
quite simple, do a XML layout like this:
FrameLayout
View // background set to be a custom drawable
TextView // gravity right
in code you inflate it and set the drawable:
private CustomDrawable drawable;
drawable = new CustomDrawable(context);
View v = layout.findViewById(...
v.setBackground(drawable);
then to update the percentage
drawable.setLevel(10); // for 10% for example
when you create your custom drawble inside the draw method it's a simple call to drawRect
{
canvas.drawRect(0, 0, getLevel()/100*canvas.getWidth(), canvas.getHeight, paint);
}
the paint you create with the color you want it to be.
That's a very rough idea, but I hope it's enough to guide you to the correct direction.

Layered SurfaceViews in a FrameLayout in Android

I am attempting to build an augmented reality application for Android and have come across the problem of layering surface views. I need a surface view to display the camera preview onto which I will overlay graphics, and I need a surface view to draw my graphics on. This second surface also needs to be drawn above the camera preview but have a transparent background. In my current implementation, I have both surface views working and appearing as they are supposed to, but the background is not transparent and therefore there is no appearance of the second surface view with the graphics drawn being superimposed on the camera preview surface view. How could this be achieved? Upon searching numerous stack overflow questions as well as other forums I've come across many conflicting opinions pertaining to this matter. Some say that layering surface views in Android is impossible whilst others say that it is a matter of using a different layout (FrameLayout vs. LinearLayout?) Specifically, my implementation includes two views: a class, CustomCameraView, that extends SurfaceView, and a class, CustomDrawView, that also extends SurfaceView contained in a FrameLayout with the CustomDrawView appearing after the CustomCameraView. How can these be layered so that CustomDrawView seems superimposed on CustomCameraView?
I think a lot of people have tried this. A Google Enginee stated (here) clearly, that you should avoid stacking Surface Views. Even if somebody has found some trick to do it, it is probably incompatible and will lead to problems.
I think this gives three options, depending on your requirements:
View(s) on Top of Surface View
Use a Surface View for the Camera preview and stack Views on top of it. The disadvantage of this approach is that drawing on "normal" Views a) is slower and b) takes place in the UI thread. You can get around b) if you implement the threads yourself. But generally, that is probably the way to go if your overlays contain something like UI elements or a few Drawables that don't need to be updated too often.
Do everything in a SurfaceView
This will give yo better performance and less overhead during runtime. You have just one SurfaceView. Composite the overlays on your SurfaceView and and draw everything there. Of course, you can combine both approaches.
Do everything in a GLSurfaceView
This is probably the way to go for real performance. Like above, but with the camera view rendering to a OpenGL texture in a GLSurfaceView.
I got this working having 2 transparent views above the camera's SurfaceView using the following approach:
My activity sets up all its views in the onCreate() method, I make no use of any layout file for that. It looks as follows:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null); //savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
cameraPreview = new CameraPreview(this);
addContentView(cameraPreview, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
animationView = new AnimationView(this);
addContentView(animationView, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
crosslinesView = new CrosslinesView(this);
addContentView(crosslinesView, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
}
cameraPreview is of type SurfaceView, animationView and crosslinesViews are of type View. The onDraw() of the 2 latter views looks as follows:
protected void onDraw(Canvas canvas) {
// Have the view being transparent
canvas.drawARGB(0, 0, 0, 0);
// Your drawing code goes here
// ...
}
Good luck!

Categories

Resources