I'm working on getting a animation to work. I'm moving a search bar from the middle of the screen to the top of the screen. The animation works fine, but once it's moved I can't interact with anything. I've updated the position but can't interact with it regardless. Here's what I've got so far:
private void moveSearchToTop()
{
FrameLayout root = (FrameLayout) findViewById( R.id.rootLayout );
DisplayMetrics dm = new DisplayMetrics();
this.getWindowManager().getDefaultDisplay().getMetrics( dm );
statusBarOffset = dm.heightPixels - root.getMeasuredHeight();
int originalPos[] = new int[2];
mSearchBar.getLocationOnScreen( originalPos );
search_top = statusBarOffset - originalPos[1];
TranslateAnimation anim = new TranslateAnimation( 0, 0, 0, search_top);
anim.setDuration(500);
anim.setFillAfter(true);
anim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
mSearchBar.layout(0, search_top, 0, mSearchBar.getHeight() + search_top);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
mSearchBar.startAnimation(anim);
}
and here's what the view looks like in xml:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:id="#+id/search_bar"
android:background="#android:drawable/dialog_holo_light_frame">
<ImageView
android:id="#+id/search_icon"
android:layout_width="wrap_content"
android:onClick="onSearchClick"
android:layout_height="25dp"
android:layout_gravity="center_vertical"
android:src="#drawable/search"/>
<EditText
android:id="#+id/search_field"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:singleLine="true"
android:hint="Search"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_gravity="center_vertical"
android:src="#drawable/camera"/>
</LinearLayout>
Do I need to update the position of all of the child elements too? Thanks for a push in the right position.
No, you won't need to modify the child views. They will go where the search bar goes.
It looks to me like you are using your search_top variable both as a delta (for the TranslateAnimation constructor) and as a position within its parent (in the call to layout). It's really a delta, so the call to layout is incorrect.
Is the parent of your searchBar the "root" FrameLayout? If so, then you just want to use 0 as the new y coordinate in the call to layout. Also, you are using 0 as the right coordinate, which means that it has no width after the animation. This call would position your search bar at the upper-left edge of its parent, and maintain its current width and height:
mSearchBar.layout(0, 0, mSearchBar.getWidth(), mSearchBar.getHeight());
I also would recommend that you do not use screen position. It's safer to just set the position of views within parent views. For example, if the search bar's parent really is root, then you could get the delta with:
search_top = - mSearchBar.getTop();
Related
I need to do some like ripple effect of Listview item background changing. I try to use ObjectAnimator like this:
AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(activity,
R.animator.animator_bkg);
set.setTarget(childLinear);
set.setInterpolator(new AccelerateInterpolator());
set.start();
R.animator.animator_bkg:
<objectAnimator
android:propertyName="backgroundColor"
android:duration="3000"
android:valueFrom="#color/white"
android:valueTo="#color/redTrans"
android:repeatCount="-1"
android:repeatMode="reverse"/>
It fluently changes a background (complete filling), but I need gradual filling of ListView item like ripple effect after touch the button.
I think, maybe I can use Canvas with overriding onDraw, but it's to hard for application and it can be some lags.
You can do it with a custom view and implement the circular transition in onDraw(), but it's complicated.
You can work around the complexity by using ViewAnimationUtils.createCircularReveal() on sub view. But the draw back is that it's only for API 21+.
In few words, your root layout of the cell has to be a FrameLayout or a RelativeLayout.
When the transition starts, you dynamically add 2 views under your cell with the start and the end color, then transition with the circular reveal between the 2. At the end of the transition, you just remove the 2 sub views to keep the view hierarchy a bit cleaner.
Here is the result :
In code :
Cell layout:
<FrameLayout
android:id="#+id/cell_root"
android:layout_width="match_parent"
android:layout_height="72dp">
<LinearLayout
android:id="#+id/cell_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp"
android:background="#FF00FF">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:textSize="18sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is content"
android:textSize="14sp" />
</LinearLayout>
</FrameLayout>
Code that trigger the background transition :
private void changeBackgroundColor() {
final FrameLayout startingColorFrame = new FrameLayout(mCellRoot.getContext());
final FrameLayout endingColorFrame = new FrameLayout(mCellRoot.getContext());
startingColorFrame.setBackground(mCellContent.getBackground());
endingColorFrame.setBackground(mPendingColor);
mCellContent.setBackground(null);
endingColorFrame.setVisibility(View.GONE);
mCellRoot.addView(endingColorFrame, 0, new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
mCellRoot.addView(startingColorFrame, 0, new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
int finalRadius = (int) Math.sqrt(mCellRoot.getWidth()*mCellRoot.getWidth() + mCellRoot.getHeight()*mCellRoot.getHeight());
final int sourceX = mCellRoot.getWidth() / 3;
final int sourceY = mCellRoot.getHeight() / 2;
// this is API 21 minimum. Add proper checks
final Animator circularReveal = ViewAnimationUtils.createCircularReveal(endingColorFrame, sourceX, sourceY, 0, finalRadius);
endingColorFrame.setVisibility(View.VISIBLE);
circularReveal.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(final Animator animation) {
super.onAnimationEnd(animation);
mStartButton.setEnabled(true);
mCellContent.setBackground(mPendingColor);
mPendingColor = startingColorFrame.getBackground();
mCellRoot.removeView(startingColorFrame);
mCellRoot.removeView(endingColorFrame);
}
});
// customize the animation here
circularReveal.setDuration(800);
circularReveal.setInterpolator(new AccelerateInterpolator());
circularReveal.start();
}
I have four linear layouts in my screen.
The first layout contain a textview.
I'm trying to move my textView to the the fourth layout of the right with a translate animation.
But when i do that the text view move behind the other layout and if i move my layout from the fourth layout of the right to the first at the left it's ok.
Im my xml i have put : in all layouts
android:clipChildren="false"
image
Can you help me ?
Thank you
Use setZAdjustment to put your View in front of the other Views.
http://developer.android.com/reference/android/view/animation/Animation.html#setZAdjustment%28int%29
Pre-Kitkat :
yourLayout.bringToFront();
((View)yourLayout.getParent()).requestLayout();
((View)yourLayout.getParent()).invalidate();
KitKat :
yourLayout.bringToFront();
Android linear layout construction starts from first element from the beginning. So any element defined first will be created and then rest, so no matter what you do, you cannot achieve with linear layout. Try with relative layout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/testAnimTranslate"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:gravity="center_vertical"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="30dp"
android:layout_height="70dp"
android:background="#0000dd"
android:orientation="vertical" />
<LinearLayout
android:layout_width="30dp"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:background="#0dd0dd"
android:orientation="vertical" />
<LinearLayout
android:layout_width="30dp"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:background="#ddd0dd"
android:orientation="vertical" />
<LinearLayout
android:layout_width="30dp"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:background="#44d0dd"
android:orientation="vertical" />
</LinearLayout>
<TextView
android:id="#+id/textAnimate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/testAnimTranslate"
android:layout_alignTop="#id/testAnimTranslate"
android:layout_toLeftOf="#id/testAnimTranslate"
android:gravity="center"
android:background="#00000000"
android:text="qweqwew" />
</RelativeLayout>
Define your translate anim in anim folder or programatically. make sure to add
LinearInterpolator
setFillAfter to true
and start the anim
I think you create the view in the code, so you should add setClipChildren(false)
in your constructor too.
Look at the docs:
ZORDER_TOP: Requests that the content being animated be forced on top of all other content for the duration of the animation.
Please check that setFillAfter(true) does not match this usage.
Does it help?
The main problem with what you are trying to do, is that you want to draw a View outside of its parent. It goes behind the other LinearLayouts because they are drawn after the LinearLayout parent of the View. Even if it is brought to the front, it seems that only relates to children within a single parent?
If you look at how Fragment animations work, you need to recreate the Fragment to translate a from one Frame into another. You also need two separate animations.
BlackBeard's solution will work because it makes the TextView a child of the outermost parent and declares it last. This means the TextView is drawn after everything else and therefore will be drawn on top of everything else.
This doesn't achieve what I think you are trying to do. If you want the TextView to belong to its destination LinearLayout after the animation you'll need to recreate the TextView and add it to the LinearLayout in the correct position in the hierarchy. You'll also need a second animation to move the new TextView into its position.
If done properly the animations should overlay each other perfectly and if in a LinearLayout one or the other of the animated Views will pass on top of everything else.
activity_main.xml
<LinearLayout
android:id="#+id/frame"
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"
android:clipChildren="false"
android:orientation="horizontal"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/layout1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FFAABBCC"
android:orientation="vertical">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:text="I'm some text"/>
</LinearLayout>
<LinearLayout
android:id="#+id/layout2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FFBBCCAA"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/layout3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FFCCAABB"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/layout4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FFBBAACC"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
MainActivity.java
private LinearLayout mLayout1;
private LinearLayout mLayout2;
private LinearLayout mLayout3;
private LinearLayout mLayout4;
private TextView mTextView;
private View.OnTouchListener mOnTouchListener;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mLayout1 = (LinearLayout) findViewById(R.id.layout1);
mLayout2 = (LinearLayout) findViewById(R.id.layout2);
mLayout3 = (LinearLayout) findViewById(R.id.layout3);
mLayout4 = (LinearLayout) findViewById(R.id.layout4);
mTextView = (TextView) findViewById(R.id.textView);
mOnTouchListener = new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
// simple trigger to start the animation.
startAnimation();
mTextView.setOnTouchListener(null);
return true;
}
};
mTextView.setOnTouchListener(mOnTouchListener);
}
private void startAnimation() {
final LinearLayout origin = (LinearLayout) mTextView.getParent();
LinearLayout destination = null;
// I'm not sure what kind of behaviour you want. This just randomises the destination.
do {
switch (new Random().nextInt(4)) {
case 0:
destination = mLayout1;
break;
case 1:
destination = mLayout2;
break;
case 2:
destination = mLayout3;
break;
case 3:
destination = mLayout4;
break;
default:
}
// if destination == origin or is null, try again.
} while (destination == origin || destination == null);
// Create another TextView and initialise it to match mTextView
final TextView textViewNew = new TextView(this);
textViewNew.setText(mTextView.getText());
textViewNew.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTextView.getTextSize());
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
textViewNew.setLayoutParams(params);
textViewNew.setOnTouchListener(mOnTouchListener);
// Add the new TextView to the destination LinearLayout
destination.addView(textViewNew);
// Create animations based on origin and destination LinearLayouts
ObjectAnimator outAnimator = getOutAnimator(origin, destination);
// The in animator also requires a reference to the new TextView
ObjectAnimator inAnimator = getInAnimator(textViewNew, origin, destination);
// All animators must be created before any are started because they are calculated
// using values that are modified by the animation itself.
outAnimator.start();
inAnimator.start();
// Add a listener to update mTextView reference to the new TextView when complete.
inAnimator.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
origin.removeView(mTextView);
mTextView = textViewNew;
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
}
/**
* This method creates an ObjectAnimator to move the existing TextView out of its parent
* towards its destination
*/
private ObjectAnimator getOutAnimator(View origin, View destination) {
// Calculate the difference between x of destination and of origin
float layoutDifferenceX = destination.getX() - origin.getX();
// initialX is simply mTextView.getX()
// the distance moved == layoutDifferenceX
float finalX = mTextView.getX() + layoutDifferenceX;
ObjectAnimator animator = ObjectAnimator.ofFloat(mTextView, "x",
mTextView.getX(), finalX);
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.setDuration(500);
return animator;
}
/**
* This method creates an ObjectAnimator to move the new TextView from the initial position
* of mTextView, relative to the new TextView's parent, to its destination.
*/
private ObjectAnimator getInAnimator(View newView, View origin, View destination) {
// Calculate the difference between x of destination and of origin
float layoutDifferenceX = destination.getX() - origin.getX();
// initialX relative to destination
float initialX = mTextView.getX() - layoutDifferenceX;
// finalX relative to destination == initialX relative to origin
float finalX = mTextView.getX();
ObjectAnimator animator = ObjectAnimator.ofFloat(newView, "x",
initialX, finalX);
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.setDuration(500);
return animator;
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
EDIT: You could also declare the TextView in xml and inflate it to get rid of all the code initialising it.
I am new in Android animation and my requirement is to translate a view from one layout to layout in a single xml file on click of that view.
Scenario:
Suppose I click a button, present on the top of the header in a xml file,and it should move/translate downwards (it should give an impact that it lies on the other layout downwards to header), and also I want that when the user clicks on the same again, it should now move to its original position.
Here I am explaining with my xml file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/app_bg"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/top"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/header"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<Button
android:id="#+id/btnSearchHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerInParent="true"
android:background="#drawable/search_icon" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/bottom"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/app_transparent"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_marginTop="10dp"
android:visibility="visible" >
<Button
android:id="#+id/btnMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:text="ABC" />
<Button
android:id="#+id/btnSearchSelected"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/btnMenu"
android:text="CDE" />
</RelativeLayout>
</LinearLayout>
MORE PRECISE REQUIREMENT SPECIFICATION (Kindly read carefully:)
Here I have two sub inner layouts:-
Top Layout - id-> top
Bottom Layout- id -> bottom
Now a view (Button -> btnSearchHeader) is lying in my top layout and I want to animate the same to the bottom layout (it should give an impact that it is translated with a translate animation to the bottom layout) on click of that button and when the user clicks on that button, it should again translate back to its original position with a translate animation .. i.e it should show back in the top layout
I have no idea how to give these impacts using translate animations, however i just have a basic translate animation knowledge which is insufficient for me to work upon my requirement.
Any type of related help is appreciable.
Thanks
Have you tried something simple like the following?
final int topHeight = findViewById(R.id.top).getHeight();
final int bottomHeight = findViewById(R.id.bottom).getHeight();
final View button = findViewById(R.id.btnSearchHeader);
final ObjectAnimator moveDownAnim = ObjectAnimator.ofFloat(button, "translationY", 0.F, topHeight + bottomHeight / 2 - button.getHeight() / 2);
final ObjectAnimator moveUpAnim = ObjectAnimator.ofFloat(button, "translationY", topHeight + bottomHeight / 2 - button.getHeight() / 2, 0.F);
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (0.F == v.getTranslationY())
moveDownAnim.start();
else
moveUpAnim.start();
}
});
If you actually need the button view to change parents, you can use AnimatorListener to achieve this at the end of each animation. Something like:
moveDownAnim.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationEnd(Animator animation) {
((ViewGroup)findViewById(R.id.top)).removeView(button);
((ViewGroup)findViewById(R.id.bottom)).addView(button);
((RelativeLayout)button.getLayoutParams()).addRule(RelativeLayout.CENTER_IN_PARENT);
button.setTranslationY(0.F); // Since it is now positioned in the new layout, no need for translation.
}
#Override
public void onAnimationCancel(Animator animation) { /* NOP */ }
#Override
public void onAnimationRepeat(Animator animation) { /* NOP */ }
#Override
public void onAnimationStart(Animator animation) { /* NOP */ }
});
(And analogous listener for the moveUpAnim.)
However, I doubt you need to actually do this to achieve the visual effect you want. But if you do this part, you will probably also need to set a fixed height for your top view as opposed to wrap_content. (Otherwise, if a layout pass happens while the button has been moved to the bottom view, the top layout's height might go to 0 if there's nothing else in it.) Easiest would be to just do this directly in the xml layout file. However, if you want to "do it on the fly", you can change the layout's height in the onAnimationEnd() method using something like:
#Override
public void onAnimationEnd(Animator animation) {
final ViewGroup topLayout = findViewById(R.id.top);
topLayout.getLayoutParams().height = topLayout.getHeight(); // Keep it the same height...
topLayout.removeView(button);
((ViewGroup)findViewById(R.id.bottom)).addView(button);
((RelativeLayout)button.getLayoutParams()).addRule(RelativeLayout.CENTER_IN_PARENT);
button.setTranslationY(0.F); // Since it is now positioned in the new layout, no need for translation.
}
I have researched the questions thoroughly, but could not yet find the answer. Also, my excuses for my poor english since I am not a native speaker.
The problem: in my android layout we have a status_text with a listview below the status_text. When the status_text is touched, we animate a 'move down' on the status_text and listview so that only the first of the listview row is still on screen. The listview is now still usable.
When the status_text is touched again, we move the status_text and listview up so that the listview uses half of the screen.
The problem we are facing is that during the 'move up' only the first row is animated. After the 'move up' the other rows suddenly appear.
What we would like to have is a 'move up' where the previously hidden rows slide onto the screen.
The layout:
We are using this layout (slightly simplified to focus on the problem at hand):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_declareren_choose_verzekerden"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- Dummy anchor to put top of listview in the middle of the screen -->
<RelativeLayout
android:id="#+id/anchor"
style="#style/anchor_status_container"
android:layout_centerVertical="true" >
</RelativeLayout>
<!-- Example image -->
<ImageView
android:id="#+id/my_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/footer"
android:adjustViewBounds="true"
android:contentDescription="#string/image_description"
android:scaleType="centerCrop"
android:src="#drawable/empty" />
<!-- Clickable text which moves up and down on click -->
<RelativeLayout
android:id="#+id/status_container"
style="#style/status_container"
android:layout_alignTop="#id/anchor"
android:background="#color/white" >
<TextView
android:id="#+id/status_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="#dimen/spacing_sml"
android:layout_alignTop="#id/status_container" />
</RelativeLayout>
<!-- Listview which moves up and down with the status_container -->
<RelativeLayout
android:id="#+id/listView_container"
style="#style/padding_content_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/status_container"
android:background="#color/white" >
<ListView
android:id="#+id/mylistView"
style="#style/myListviewStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:divider="#null"
android:dividerHeight="0dp" />
</RelativeLayout>
<!-- Footer with buttons -->
<RelativeLayout
android:id="#+id/footer_button_container"
style="#style/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button_again"
style="#style/btn_secondary"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:text="#string/opnieuw"
android:visibility="gone" />
<Button
android:id="#+id/button_next"
style="#style/btn_primary"
android:layout_width="wrap_content" />
</RelativeLayout>
</RelativeLayout>
And the code (again a bit simplified to show only the problem at hand. Some fade-in/out and rotations are removed):
// The code
#Override
public void onClick(View view)
{
int viewId = view.getId();
if (viewId == R.id.status_container)
{
// Someone clicked the text, move the statusbar (and so the listview) up or down
if (this.viewIsInUpperPosition)
{
startStatusAnimation();
}
}
}
private void startStatusAnimation()
{
if (animationIsRunning)
{
return;
}
setAnimationIsRunning(animValues.START);
// 0. Initialisation
final View statusContainer = (View) getView().findViewById(R.id.status_container);
final View listContainer = (View) getView().findViewById(R.id.listView_container);
final ListView listView = (ListView) getView().findViewById(R.id.myListView);
final View footerButtonContainer = (View) getView().findViewById(R.id.footer_button_container);
// 1. Calculate distance for animation
if (toggleViewDistance == 0)
{
int listViewContainerHeight = listContainer.getHeight();
int footerHeight = footerButtonContainer.getHeight();
int spaceForListView = listViewContainerHeight - footerHeight;
toggleViewDistance = spaceForListView;
}
// 2. Decide if the movement is up or down
float translationDistance = (viewIsInUpperPosition) ? toggleViewDistance : 0 - toggleViewDistance;
// 3. Create the animation
TranslateAnimation yMove = new TranslateAnimation(0, 0, 0, translationDistance);
yMove.setDuration(animValues.ANIMATION_Y_DURATION);
yMove.setInterpolator(new AccelerateDecelerateInterpolator());
// Do here something with scaling and rotating of other objects, not relevant for the question on StackOverflow
// 4. Actions after animation
yMove.setAnimationListener(new AnimationListener()
{
#Override
public void onAnimationEnd(Animation arg0)
{
// Fade de listView in als je van onderen naar boven animeert
if (!viewIsInUpperPosition)
{
// Do some fading, outside scope of question
}
// Create layout after the animation
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) statusContainer.getLayoutParams();
if (viewIsInUpperPosition)
{
// View was previously in upper position, now put the statusbar aligned with the footer
params = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.ABOVE, footerButtonContainer.getId());
}
else
{
// View was previously in bottom position, so put it under the anchor
params = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.ALIGN_TOP, R.id.anchor);
}
}
statusContainer.setLayoutParams(params); // Set the new layout params
viewIsInUpperPosition = !viewIsInUpperPosition;
setAnimationIsRunning(animValues.END);
}
#Override
public void onAnimationRepeat(Animation arg0)
{
// Empty
}
#Override
public void onAnimationStart(Animation arg0)
{
// empty
}
});
// 5. Start the animation
statusContainer.startAnimation(yMove);
listContainer.startAnimation(yMove);
}
Any advice on how to have the rows of the listview 'slide in' on the screen? Much appreciated!
I figured it out. So I am answering my own question in case someone stumbles upon this question.
What needs to be done is that the listview is drawn off-screen. This can be forced by calling the measure- and layout-methods with the off-screen coordinates of the listview.
This fixed it for my code:
// 5a. Draw the listview off-screen
if (translationDistance < 0)
{
// Do this only when the listview is sliding up, e.g. sliding the window in.
int listViewContainerVerticalPos = listContainer.getTop(); // De positie van de listview
// The required height of the listview
int listContainerHeight = (int) Math.abs(translationDistance) + statusContainer.getHeight();
int measureWidth = View.MeasureSpec.makeMeasureSpec(listContainer.getWidth(), View.MeasureSpec.EXACTLY);
int measureHight = View.MeasureSpec.makeMeasureSpec(listContainerHeight, View.MeasureSpec.EXACTLY);
listContainer.measure(measureWidth, measureHight);
listContainer.layout(0, listContainerVerticalPos, listContainer.getMeasuredWidth(), listContainerVerticalPos
+ listContainerHeight);
}
I have a view layout like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#color/light_gray"
android:padding="5dip">
<View android:id="#+id/fixedSpace" android:layout_width="fill_parent"
android:layout_height="50dip" android:background="#color/aqua"
android:layout_alignParentBottom="true" android:clickable="true"
android:onClick="onClickStartAnimation" />
<View android:id="#+id/dynamicSpace" android:layout_width="fill_parent"
android:layout_height="200dip" android:background="#color/lime"
android:layout_above="#id/fixedSpace" />
<View android:id="#+id/remainingSpace" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#color/pink"
android:layout_alignParentTop="true" android:layout_above="#id/dynamicSpace" />
</RelativeLayout>
What I want to achieve is basically a grow/shrink behavior of dynamicSpace over the time t. With animations I can produce the following:
t=1:
t=2:
t=3:
However, that doesn't really resize my views, in particular dynamicSpace and remainingSpace. It just animates the view dynamicSpace moving in. But the view "container" already has the space occupied right from the beginning.
Correct would be that the lime colored dynamicSpace starts with 0px and the pink colored remainingSpace takes over, so there is no gray space in between.
Scale the View
Since you say you are doing it over time t, it sounds like a LinearInterpolator is best.
EDIT:
I tried replacing the below with an AsyncTask thread and it is far smoother. I think the key is I keep the thread running in the background and just use it when I want to resize something, thus reducing overhead
Create a custom AnimationListener and put the code for resizing the view in the onAnimationRepeat method.
Then do a dummy animation and set repeat on the animation to infinite. Once the view has reached the final size, set repeat count on the animation to zero (again in onAnimationRepeat):
class ResizeAnimationListener implements AnimationListener{
int finalHeight; // max Height
int resizeAmount; // amount to resize each time
View view; // view to resize
public ResizeAnimationListener(int finalHeight; View view, int resizeAmount) {
super();
finalHeight; = finalHeight;
this.resizeAmount = resizeAmount;
this.view = view;
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
int newHeight;
int currentHeight;
current = view.getMeasuredHeight();
newHeight= currentHeight+ resizeAmount;
if(newHeight> finalHeight){
// check if reached final height
// set new height to the final height
newHeight = finalHeight;
// set repeat count to zero so we don't have any more repeats
anim.setRepeatCount(0);
}
// set new height
LayoutParams params = view.getLayoutParams();
params.height = newHeight;
v.setLayoutParams(params);
}
#Override
public void onAnimationStart(Animation animation) {
}
};
class DummyAnimation extends Animation{}
float frameRate = 1000/30;
DummyAnimation anim = new DummyAnimation();
anim.setDuration((long)frameRate);
anim.setRepeatCount(Animation.INFINITE);
ResizeAnimationListener animListener = new ResizeAnimationListener(((View)view.getParent()).getHeight(), view, 25);
anim.setAnimationListener(animListener);
view.startAnimation(anim);
I made this work on my own app . However, views anchored to the view I'm resizing (and thus moving on screen when I resize my view) seem to glitch out. Probably related to repeated resizing rather than anything else, but just a warning. Maybe someone else knows why?