Animating a view to draw it from top to bottom - android

<View
android:id="#+id/top_vertical_line"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="#color/white"
/>
Given a view, that is a vertical line, how would I animate it in. drawing it from top to bottom, or vice versa? I haven't been able to find any examples like I'm looking for. Any help would be appreciated.

You can for example scale your line with an Animation, something like this :
View view = (View) getViewById(R.id.top_vertical_line);
view.animate()
.scaleY(...)
.setDuration(2000)
.setInterpolator(new AccelerateDecelerateInterpolator);
You have to fill in the value of scaleY(...) to where you want it to animate to, or check other methods in ViewPropertyAnimator.
And perhaps you should align your View at the bottom in your xml :
android:layout_alignParentBottom="true"

Related

How to position a view off-screen in Android layout

I'm using the Scene/Transition system introduced in 4.4 to simply move an image view from the left to the center of the screen. So the layout for my first scene requires the image to be off screen. I tried android:layout_marginRight but that no effect. What is the correct way to do this?
Use the property translationX or translationY with a negative value. This property sets the horizontal/vertical location of this view relative to its left/top position. You will not see the view off screen in the preview. Run your app and the view must be hidden.
Example:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_margin="16dp"
android:translationX="-72dp"/>
</FrameLayout>
And then in the activity or fragment simply invoke the animate() function.
FloatingActionButton button = (FloatingActionButton)findViewById(R.id.button);
button.animate().translationX(0);
Was thinking one could make the image be to the right of something that is already at the right side, that should keep it off screen. Also, potentially just make it "gone" and then on transtion make it appear.

How to apply animation on LayoutParams

I'm wondering if there is a way to apply animation on LayoutParams. Here is the story.
Say I have the following layout, a TextView on the left top corner of a RelativeLayout.
<RelativeLayout ...>
<TextView
android:alignParentStart="true"
android:alignParentTop="true"/>
...
<RelativeLayout />
Then I want to move the TextView to center of the RelativeLayout using animation. After the animation, the layout will become
<RelativeLayout ...>
<TextView
android:centerInParent="true"/>
...
<RelativeLayout />
Just wondering if there is a way to do it using Animator? Thanks.
One thing you can do is position the TexView always at the center of his parent using android:centerInParent="true", and using ValueAnimator or ObjectAnimator to animate the width and height of his parent.
Obviously it would be better if you can somehow calculate the width of the screen but for that i guess is enough to extend the layout parent class (RelativeLayout) and override his onMeasure or onLayout method.

Draw a line on top of existing layout programmatically

I have an existing layout that I am setting my current activity to. However, I want to draw a line (horizontal) and move it down in slow motion. Most articles talk about creating custom view and doing
setContentView(myView) .
How ever I dont want to set my activity view to only this view. I already did setContentView(R.layout.main). And I just want to draw the line on top of moving contents.
Something like drawLine(fromX, fromY, toX, toY) and then add a loop while increasing Y to show it in motion.
I hope I am clear. Please point me to the right direction.
Thank you
create a view and then animate it.
<View
android:id="+#id/ivHorizontalLine"
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#000000" />
change the height of the view to match how thick you want the line to be. and the background color for the color of the line.
TranslateAnimation horizontalLineAnimation = new TranslateAnimation(0, 0, YstartPoint, YendPoint);
horizontalLineAnimation.setDuration(duration);
ivHorizontalLine.startAnimation(horizontalLineAnimation);
change YstartPoint and YendPoint to match where you want the line to move from and to. and the duration to match how fast you want the line to move.
The best way to do this is create a View that takes up the entire container that you would like to paint on top of. No background is necessary, as it is only to be used to create a canvas on it. An example would be like this:
<FrameLayout 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"
>
<com.packagename.PaintView
android:id="#+id/paintView"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</FrameLayout>
And PaintView would be a public class PaintView extends View

RelativeLayout - align items center relatively to eachother

I want to align two items next to eachother using a RelativeLayout, where the vertical center of both items are equal.
For example, if I want this layout:
****
**** *******
****
************
I'd build something like:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/view1"
android:layout_width="100dp"
android:layout_height="100dp"/>
<View
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="20dp"
android:toRightOf="#id/view1"/>
<View
android:id="#+id/view3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/view1"/>
</RelativeLayout>
However, the only options I seem to have is alignBottom, alignTop and alignBaseline. Neither obviously give the desired effect.
Is it possible to get the vertical center of view2 to match the vertical center of view1 without using a nested layout?
Try using android:gravity="centerVertical" as an attribute in your RelativeLayout. This should center your child views in the vertical center of the RelativeLayout.
You can also try android:layout_centerVertical="true" as an attribute of the two Views that you want to align.
However, the best solution for this would probably be to create a custom ViewGroup. Then in onLayout of your custom ViewGroup, position your child Views exactly as meets your specifications.
I've done something similar, where the easiest "hack" was to create an invisible view, place it where ever I wanted, and then placed item A to the left of and item B to the right of this invisible view.
I originally got this idea from Stackoverflow, but don't have the link I used. This discusses the same idea.

Animating a view when an other View depends on the Animated one

One of the things in android I understand the less, are animations.
It's kinda simple to animate a View, if it's standalone, however, if this animation is for example aligned to the bottom, and an other view is above this view, if you animate the bottom aligned view (move it around the screen), the view which is set to be above never follows this View.
So, is there any way to make "related" views move following the animated view?
Thanks.
If you do need a sample code, I can provide, but I think there's no need to understand.
Sample:
<RelativeLayout ......>
<View
android:id="#+id/topView"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_above="#+id/viewToBeAnimated"/>
<View
android:id="#+id/viewToBeAnimated"
android:layout_width="100dp"
android:layout_height="80dp"
android:alignParentBottom="true"/>
</RelativeLayout>
Now we animate the "view to be animated" to move 25%, for instance to the top. You can see it moving but the topView stand still.

Categories

Resources