I'm new to Android programming. I'm working on an app that requires some form of animation. Please take a look at
I want an animation where a scroll rolls down at the top with this text in it as soon as this activity starts & rolls up when the connect button is pressed. I have no clue where or how to begin with the animation. Any kind of links to tutorials or posts on StackOverflow will be of much help.
Thank you for your time!
Since your question is really really broad, I'll give you a broad answer as well.
I think by "scrolling animation" you mean an animation in which a black (or some other color) area slowly covers up/reveals the screen. I don't know why would this look cool, but whatever.
Step 1
Create an animation XML file. In this file, you would specify that the view should translate downwards by x pixels where x is the height of the screen. And create another animation file. This time, specify that it should translate upwards.
If you need help creating XML view animations, have a look here
Now you have two animations - move upwards and downwards.
Step 2
Okay, now you should create a custom view. You can start by doing this:
public class ScrollingView extends View {
}
And implement all the required constructors.
Override onDraw like this:
cover the whole view with black or some other color
draw the scroll at the top of the view. The scroll should be an image like this one:
If you don't like using an image, you can draw it yourself, using code!
You can get help on this here
Step 3
In onCreate of your activity, create a ScrollingView. This view should be as wide as the screen and as high as the screen. Position the view at (0, 0) and bring it to front so that it covers up the whole screen.
Step 4
Next, apply the animation you created in step 1 to the scrolling view.
Related
I've searched and searched, but couldn't find what I was looking for...
There are many ways to animate in android and being a newbie I do not know which solution to choose for my app.
Here's what I want to do:
It's an animation of rectangles moving slowly (takes ~10 min to cross the screen) from top to bottom through the screen.
Each and every one of the rectangles is clickable, through some listener, and does something.
Two or three buttons at the bottom of the screen (which I already created as floating action buttons) do not move and float "on top", i.e. the moving rectangles pass underneath them as they move down the screen.
The animation can be stopped and then resumes by the action buttons mentioned above.
Newly appearing rectangles appear on top as they " emerge" slowly from the top of the screen, i.e. when part of them is still outside, as they reveal themself by moving down.
I want this to be simple and robust.
How should I implement this, and please explain why...
As a loop?
A separate thread? Of so how?
I would like to understand the rationale behind every approach...
Thanks,
Julius
I am using this: CircularFloatingActionMenu
I have been able to use it so far pretty well. I am able to move it to desired positions as described in the ReadMe and even set rotation, theme coloring etc. My problem is I am trying to create a custom animation so that when placed in the upper right the icons shoot downwards. I kind of cheated and got it to appear to work by setting the start/end angle at 89 and 90 degrees so instead of being in a line they are just slightly off, but my problem is that when the animation finishes the final position ends up stacking all the icons on top of one another. I have attached screenshot demonstrating this.
Ive called my SlideDownAnimationHandler.java class as such:
FloatingActionMenu actionMenuTopRight = new FloatingActionMenu.Builder(this)
.setStartAngle(89)
.setEndAngle(90)
.setAnimationHandler(new SlideDownAnimationHandler())
.addSubActionView(rLSubBuilder.setContentView(rlIcon1).build())
.addSubActionView(rLSubBuilder.setContentView(rlIcon2).build())
.addSubActionView(rLSubBuilder.setContentView(rlIcon3).build())
//.addSubActionView(rLSubBuilder.setContentView(rlIcon4).build())
//.addSubActionView(rLSubBuilder.setContentView(rlIcon5).build())
.attachTo(darkButton)
.build();
I don't really want to post the SlideDownAnimationHandler.java classify as it is quite large (~100 lines of code). I'm wondering if theres a better way to properly animate the slide down effect, and also how to set their final position in a similar fashion to how i set the y translation in the animation itself.
I'm tackling the task of an overlaying drawable over a view that animates the drawing of a checkmark as in the following video https://vid.me/MsQj
I don't have a preferred method for doing this but it's just not coming out the way I wanted it to, I tried:
Two views, each with on side of the checkmark to be revealed with an animation, however I'm stuck at the "revealed with an animation" since I can't use the circular reveal on -21
Frame by frame animation, this is the easiest but I'd hate to have 60 images for this stupid animation if it can be done programmatically
Drawing on a custom view canvas
My question would be, is there anything that can make this easier on me, or do I have to tackle it head first and just get on with it
You could create a custom View class which contains two lines defined by ShapeDrawables, one for each leg of the tick. Expose the lengths of these two lines as properties of the class, and then use Property Animation to animate the lengths of the lines.
Property Animation is flexible enough to handle pretty complex timing and sequencing of various properties. In this particular case you would probably want to use an AnimatorSet to sequence the two line animations so the second starts once the first has finished.
I ended up developing a custom View thanks to #SoundConception suggestion and finding out about ObjectAnimator which are very powerful in Android. In essence what goes on is we set a width for the first and second line that make the checkmark and using the animator change the value of those properties from 0 to the desired one.
On the setter for the property, we invalidate the View to redraw it with the new value and with a little tweaking I made a nice View that while its currently only working for my specific layout (ie it needs some more work on the offset calculation) it's able to draw an animated checkmark with some stuff that is customizable.
Precisely, you can set the line width, the color, the length and the animation time. And touching the java file, you can change the interpolator and all the rest of the stuff.
Hopefully the code, while not really commented serves as a basis for someone trying something similar.
For example the following code would generate something like this video, although not really because I was testing opacity and thinner lines, but you get my drift.
<coop.devtopia.CheckmarkView
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:id="#+id/view"
app:first_leg_length="50"
app:second_leg_length="100"
app:total_duration="1500"
app:stroke_width="20"
app:stroke_color="#22000000"/>
Repository
Update 4/2/15
I've played with this a little further and added dynamic offset calculation (fancy way of saying centering) to the tick, meaning we can generate big checkmarks, small checkmarks, skinny or thick, reversed or straight and they will be centered in the view. Can't guarantee the same for checkmarks bigger than the container, they will likely be cropped.
Here are a few of the checkmarks generated for this demonstration, of course the animate as if drawn and the effect can be very pleasing and resource friendly. This turn out to be a pretty interesting subject after all.
I have a panoramic background as a sky that i want to move from left to right and then from right to left to simulate a moving clouds animation as a screen background .
This should repeat indefinitely and after goin to the right most then return back to the left most..
I have tried the following:
Animation left = AnimationUtils.loadAnimation(MainActivity.this, com.icare.kids.R.anim.view_transition_out_right);
left.setRepeatCount(Animation.INFINITE);
left.setRepeatMode(Animation.REVERSE);
left.setDuration(3000);
findViewById(id.cloud).startAnimation(left);
But this does not seem to work... any solution for that ?
I am currently setting the image to an ImageView as follows:
<ImageView
android:id="#+id/cloud"
android:layout_width="3000dip"
android:layout_height="wrap_content"
android:layout_below="#id/topbar"
android:scaleType="matrix"
android:src="#drawable/bgpan" />
how can i set the image to the screen to start from the left most like this below, so to help in the panoramic animation effect:
The best solution that is efficient and fast on all phone ranges was to actually only animate the clouds while keeping the background static.
you can also add some variable to the speed that would add some randomization to the speed of the clouds so you don't get a monotonic looping.
Implementation details and solution was taken from this answer
One thing you might be able to try is using a Viewpager object with fake drag, where you continually re-add the background to new views that get generated, while disabling user input.
This will give the illusion of what you are trying to do.
So lets say you have 4 views in your adapter, each view contains just one of the image assets that fills the whole screen, and Viewpager's fake drag pans from View A to View B, draws View C and draws View D, then it fake drags from View B to View C and draws View A again
I'm curious if that would work for you
Hey I was wondering if there is any way to do this without going insane with lil buttons built up to make it but basically what I want to do is make two curved buttons around a circle one, is there any way of doing this?
Hers an example of what I kinda want, sorry for how crude the drawing is.
There are two parts in answering this question : how to have buttons looking like this, and getting the touch on the areas you draw.
For the first part, you can use a FrameLayout or a Relative Layout to draw your buttons exactly where you want, and custom images as background (maybe for the circle you can make a ShapeDrawable).
For the second part, it can be very simple : if the Circle (biggest button) is on top of the other two, then this can be ok. But I guess the touchable area on each button will be a rectangle.
Another way to do this is create a custom view, handle the Touch events yourself and based on the X and Y, detect which part has been touched