ImageView and EditText becomes dead after animation - android

I have been trying to implement an animation on a relativeLayout. The animation works fine but after the animation is complete the edittext and the imageview inside the relative layout stops responding to any kind of user activity.
<LinearLayout 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:orientation="vertical" >
<RelativeLayout
android:id="#+id/rl_maincontroller_mainLayout"
android:layout_width="match_parent"
android:layout_height="380dp"
android:background="#color/button_color" >
<ImageView
android:id="#+id/iv_maincontroller_backImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_centerVertical="true"
android:src="#drawable/back" />
<EditText
android:id="#+id/tv_searchBox"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="#+id/iv_maincontroller_backImage"
android:background="#android:color/white"
android:drawableLeft="#drawable/search"
android:drawablePadding="10dp"
android:gravity="center_vertical"
android:layout_centerVertical="true"
android:hint="#string/search"
android:paddingLeft="10dp"
android:textColor="#android:color/black"
android:textColorHint="#color/grey"
android:textSize="17sp" />
</RelativeLayout>
</LinearLayout>
Before the animation the controls on the widgets work fine, the animation changes the parent relative layout from height 380 to 120 and after that the widgets become dead to any kind of user activity. I cannot control them. Can anyone please suggest an answer. Need it very urgently, have been stuck in it for hours.
The code for animating the layout is put below. I got it from a link and it worked as I wanted the animation to work but the widgets inside the layout became dead.
public class ResizeAnimation extends Animation {
private int startHeight;
private int deltaHeight; // distance between start and end height
private View view;
/**
* constructor, do not forget to use the setParams(int, int) method before
* starting the animation
* #param v
*/
public ResizeAnimation (View v) {
this.view = v;
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
view.getLayoutParams().height = (int) (startHeight + deltaHeight * interpolatedTime);
view.requestLayout();
}
/**
* set the starting and ending height for the resize animation
* starting height is usually the views current height, the end height is the height
* we want to reach after the animation is completed
* #param start height in pixels
* #param end height in pixels
*/
public void setParams(int start, int end) {
this.startHeight = start;
deltaHeight = end - startHeight;
}
/**
* set the duration for the hideshowanimation
*/
#Override
public void setDuration(long durationMillis) {
super.setDuration(durationMillis);
}
#Override
public boolean willChangeBounds() {
return true;
}
Then I call this class as follows:
ResizeAnimation a = new ResizeAnimation(layout);
a.setDuration(500);
a.setParams(oldHeight, newHeight);
layout.startAnimation(a);

Related

How to make buttons text get different directions animation in android studio

I want to bring the text of the buttons from different directions.
I looked at the ObjectAnimatore but couldn't.
ObjectAnimator colorAnim = ObjectAnimator.ofInt(altbutonlar.get(i), "textColor", Color.BLACK, Color.TRANSPARENT);
colorAnim.setDuration(100);
colorAnim.setEvaluator(new ArgbEvaluator());
colorAnim.setRepeatCount(ValueAnimator.INFINITE);
colorAnim.setRepeatMode(ValueAnimator.REVERSE);
colorAnim.start();
Why not creating a TextView inside a FrameLayout and set the style so that the FrameLayout looks like a Button and you can animate the TextView like you want.
Here is an example of what i'm talking about
in the Layout use FrameLayout like this :
<FrameLayout
android:id="#+id/buttonContainer"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/toolBar">
<TextView
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:paddingStart="8dp"
android:paddingTop="5dp"
android:paddingEnd="8dp"
android:paddingBottom="5dp"
android:text="Test"
android:textColor="#android:color/white"
android:textSize="17sp" />
</FrameLayout>
And this is how I animate the TextView in the Activity:
public class MainActivity extends AppCompatActivity {
private TextView textView;
private FrameLayout buttonContainer;
private static final int DIRECTION_L = -1;
private static final int DIRECTION_R = 1;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = findViewById(R.id.button);
buttonContainer = findViewById(R.id.buttonContainer);
buttonContainer.setOnClickListener(v -> animate(DIRECTION_L, DIRECTION_R, "Hello world"));
}
/**
* #param directionOut direction out -1 from left or 1 from right
* #param directionIn direction in -1 from left or 1 from right
* #param newText the new text you want to added in textView
*/
private void animate(int directionOut, int directionIn, String newText) {
int lastPosition = buttonContainer.getWidth() / 2 + textView.getWidth() / 2;// get the position x to TextView inside frameLayout
ObjectAnimator animator = ObjectAnimator.ofFloat(textView, "TranslationX", 0, directionOut * lastPosition);
animator.setInterpolator(new AnticipateOvershootInterpolator(1.5f));
animator.setDuration(600);
animator.start();
animator.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
addNewText(directionIn, newText);
animation.removeAllListeners();
}
});
}
/**
* if you want to add new new text that slide In
*
* #param directionIn -1 from left or 1 from right
* #param newText the new text you want to added in textView
*/
private void addNewText(int directionIn, String newText) {
textView.setText(newText);
int lastPosition = buttonContainer.getWidth() / 2 + textView.getWidth() / 2;// get the position x to TextView inside frameLayout
ObjectAnimator animator = ObjectAnimator.ofFloat(textView, "TranslationX", directionIn * lastPosition, 0);
animator.setInterpolator(new AnticipateOvershootInterpolator(1.5f));
animator.setDuration(600);
animator.start();
}
}
And this is how the result looks:

How do you collapse and expand a complex view in android?

I am implementing the search functionality which consists of a search box, and a list of categories. For design purposes I have used EditText , GridView etc.
But when the activity starts I don't want all the search box to be displayed. I just want the EditText, and then when the EditText is clicked I need the view to expand, and when some other part of the screen is clicked, for example touching the ListView or pressing the button I need the view to collapse in its default state consisting the EditText.
I can use View.GONE or VIEW.VISIBLE but I want to reach a smooth animation for expanding and collapsing.
My activity_layout.xml:
<RelativeLayout
android:id="#+id/search_box"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:background="#android:color/transparent"
>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/njoftime_item_background"
card_view:cardCornerRadius="1dp"
card_view:cardElevation="2dp">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:id="#+id/sr"
android:animateLayoutChanges="true"
android:padding="20dp">
<RelativeLayout
android:layout_width="fill_parent"
android:id="#+id/search_area"
android:layout_height="wrap_content"
android:focusableInTouchMode="true"
android:background="#drawable/njoftime_item_background"
>
<ImageButton
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_marginLeft="1dp"
android:id="#+id/btn_search"
android:layout_alignParentRight="true"
android:background="#color/njoftime_main_color"
android:src="#drawable/ic_search_white"
android:onClick="searchPressed"
android:scaleType="fitCenter"
/>
<EditText
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_toLeftOf="#+id/btn_search"
android:id="#+id/search_text"
android:layout_alignParentLeft="true"
android:background="#null"
android:ems="20"
android:textSize="18sp"
android:paddingLeft="10dp"
android:imeOptions="actionSearch"
android:inputType="text"
android:maxLines="1"
android:textColor="#color/njoftime_desc"
android:textCursorDrawable="#null"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/search_categories_area"
android:layout_below="#+id/search_area"
android:paddingTop="20dp"
android:paddingBottom="10dp"
>
<GridView
android:id="#+id/search_grid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:drawSelectorOnTop="false"
android:horizontalSpacing="2dp"
android:numColumns="5"
android:padding="4dp"
android:verticalSpacing="4dp" >
</GridView>
</RelativeLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
For this I have used android:animateLayoutChanges="true" and the following code
my_relative_layout = (RelativeLayout) findViewById(R.id.search_categories_area);
with:
public void searchPressed(View v) {
if (!searchbox_expanded) {
my_relative_layout.setVisibility(View.VISIBLE);
searchbox_expanded = true;
} else {
my_relative_layout.setVisibility(View.GONE);
searchbox_expanded = false;
}
}
Well the expanding is really smooth animation, but the collapsing is not animated.
I have used other solutions online but I have not reached the desire effect due to the complex layout I think. Any solutions will be appreciated.
This is quite simple :
To collapse the view you only need to add an onClickListener on the parent view (search_box) which triggers a function to collapse the view with an animation.
To expand the view you need to trigger another animation to expend the view when clicking on the search EditText
Here is an example of animation to collapse and to expend a view:
` import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
/**
* Created by wajdichamakhi on 26/01/15.
*/
public class ResizeAnimation extends Animation {
private int endHeight; // distance between start and end height
private int endWidth; // distance between start and end width
private View view;
/**
* constructor, do not forget to use the setParams(int, int) method before
* starting the animation
*
* #param v
*/
public ResizeAnimation(View v) {
this.view = v;
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
view.getLayoutParams().height = (int) (view.getHeight() + (endHeight - view.getHeight()) * interpolatedTime);
view.getLayoutParams().width = (int) (view.getWidth() + (endWidth - view.getWidth()) * interpolatedTime);
view.requestLayout();
}
/**
* set the starting and ending height for the resize animation
* starting height is usually the views current height, the end height is the height
* we want to reach after the animation is completed
*
* #param endWidths width in pixels
* #param endHeight height in pixels
*/
public void setParams(int endWidths, int endHeight) {
this.endWidth = endWidths;
this.endHeight = endHeight;
}
/**
* set the duration for the hideshowanimation
*/
#Override
public void setDuration(long durationMillis) {
super.setDuration(durationMillis);
}
#Override
public boolean willChangeBounds() {
return true;
}
/**
* Verify if this animation needs to be fired or not.
*/
public boolean isValidAnimation() {
if (this.endWidth == view.getWidth() && this.endHeight == view.getHeight())
return false;
else
return true;
}
}`
Now you put the function that returns a set of animation which contains this animation. I work with animation set so I can add several animation at once to the view and create a cool animation.
public AnimationSet getExpend_CollapseAnimationSet(final View v, int height, int width) {
AnimationSet animationSet = new AnimationSet(true);
ResizeAnimation resizeAnimation = new ResizeAnimation(v);
resizeAnimation.setParams(
width,
height);
if (resizeAnimation.isValidAnimation()) {
resizeAnimation.setDuration(ANIMATION_DURATION);
animationSet.addAnimation(resizeAnimation);
}
return animationSet;
}
Now use this function in your listeners with the right width and height
AnimationSet initialStateAnimation = getExpend_CollapseAnimationSet(myViewToExpend_Collapse,deiredHeight, desiredWidth);
myViewToExpend_Collapse.startAnimation(initialStateAnimation);

Drawing a view through animation is very slow because of list view inside it

I am animating a view which has list view inside it through drawing. i.e setting the height from 0 to particular height.when list-view is empty my view draws smoothly.but when list-view is populated my view animates very slowly.
here is my animation code
public static void expand(final View v) {
v.measure(MeasureSpec.makeMeasureSpec(android.view.ViewGroup.LayoutParams.MATCH_PARENT,
MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(500, MeasureSpec.EXACTLY));
final int targtetHeight = v.getMeasuredHeight();
v.getLayoutParams().height = 0;
v.setVisibility(View.VISIBLE);
Animation a = new Animation()
{
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
v.getLayoutParams().height = interpolatedTime == 1
? 500
: (int)(targtetHeight * interpolatedTime);
v.requestLayout();
}
#Override
public boolean willChangeBounds() {
return true;
}
};
// 1dp/ms
a.setDuration(500);
v.startAnimation(a);
}
here is my xml.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/recent_view"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:visibility="gone"
android:background="#FF0000"
android:layout_marginTop="130px"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
>
<ListView
android:id="#+id/callslist_history"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/top"
android:layout_alignLeft="#+id/top"
android:layout_alignRight="#+id/top"
/>
</RelativeLayout>
initial height of my view is 0dp then on expand i animate its height to 500dp.but this animation works smoothly only when list-view is not populated.
I know this is old question but for possible future reference:
I had this same issue and just solved it by wrapping the view (which is being animated) inside framelayout and setting the child's height/width to the target values of the animation and instead of resizing the view in animation I changed the position (x/y) of the view.

How add TextView in middle of SeekBar thumb? [duplicate]

This question already has an answer here:
Combine image and text to drawable
(1 answer)
Closed 9 years ago.
I am working in Android. I want to make a SeekBar. In thumb of SeekBar i want to show progress (probably on a TextView aligned over thumb which moves along with thumb).
This is my XML for SeekBar and TextView.
<SeekBar
android:id="#+id/ProgressBar01"
android:layout_width="fill_parent"
android:paddingLeft="10px"
android:paddingRight ="10px"
android:layout_height="70dp"
android:layout_below="#+id/incentives_textViewBottemLeft"
android:max="10"
android:progressDrawable="#drawable/incentive_progress"
android:secondaryProgress="0"
android:thumb="#drawable/incentives_progress_pin"
android:focusable="false" />
<TextView
android:id="#+id/incentives_textViewAbove_process_pin"
android:layout_width="fill_parent"
android:layout_height="20dp"
android:layout_below="#+id/incentives_textViewBottemLeft"
android:layout_marginTop="11dp"
android:text=""
android:textStyle="bold"
android:textColor="#FFe4e1"
android:textSize="15sp" />
and this my code to make align for text
int xPos = ((mSkbSample.getRight() - mSkbSample.getLeft()) / mSkbSample.getMax()) * mSkbSample.getProgress();
v1.setPadding(xPos+m,0,0,0);
v1.setText(String.valueOf(progress).toCharArray(), 0, String.valueOf(progress).length());
But text is not displaying into center of that thumb. Please suggest me what should i do for this.
If I understand your question right, you want to place text inside of the thumb on a seekbar like so:
The Android Seekbar doesn't expose any public or protected methods that allows you to set a text in the thumb. So you can't implement a solution with the Android SeekBar as is.
As a solution, you can write your own CustomSeekBar.
The Android SeekBar extends AbsSeekBar. It's in AbsSeekBar that the thumb's position is set, like so:
private void setThumbPos(int w, Drawable thumb, float scale, int gap) {
int available = w - mPaddingLeft - mPaddingRight;
int thumbWidth = thumb.getIntrinsicWidth();
int thumbHeight = thumb.getIntrinsicHeight();
available -= thumbWidth;
// The extra space for the thumb to move on the track
available += mThumbOffset * 2;
//Determine horizontal position
int thumbPos = (int) (scale * available);
//Determine vertical position
int topBound, bottomBound;
if (gap == Integer.MIN_VALUE) {
Rect oldBounds = thumb.getBounds();
topBound = oldBounds.top;
bottomBound = oldBounds.bottom;
} else {
topBound = gap;
bottomBound = gap + thumbHeight;
}
//Set the thumbs position
thumb.setBounds(thumbPos, topBound, thumbPos + thumbWidth, bottomBound);
}
and in AbsSeekBar's onDraw() method, the thumb is drawn:
mThumb.draw(canvas);
To implement your own SeekBar, you first create a CustomSeekBar class that extends AbsSeekBar. You then override AbsSeekBar's setThumPos() method in your CustomSeekBar class, and there set the position of your own custom thumb.
Your custom thumb would be a View or ViewGroup,e.g. LinearLayout, with a background drawable and a TextView for the percentage progress text.
You then have to decide how to write the percentage progress to the custom thumb. You could write the percentage progress text on the thumb in a new writeTextOnThumb method() called inside setThumbPos(), or you could expose it as a public method in your CustomSeekBar's API.
Before getting into the details of a solution, I will just mention something that you have probably already considered: The user, when moving the SeekBar, typically has her finger positioned over the thumb, and therefore would likely cover up any text you might put there, at least while the Seekbar is being moved. Now, perhaps you are moving the SeekBar programmatically, or perhaps you are happy enough for the user to view the SeekBar once she has finished moving it and has removed her finger, or perhaps you can count on your user to slide her finger below the SeekBar after she starts to slide it, so as to reveal the thumb. But if that is not the case, then you might want to position the text somewhere that the user's finger is likely not to be.
The approach described below should allow you to position text anywhere in the SeekBar that you like, including over the thumb. To allow this, it overrides the SeekBar's basic onDraw() method, rather than overriding a method that deals specifically with drawing the thumb.
Here is a rough version of a class that draws text onto a SeekBar using the above approach:
public class SeekBarWithText extends SeekBar {
private static final int textMargin = 6;
private static final int leftPlusRightTextMargins = textMargin + textMargin;
private static final int maxFontSize = 18;
private static final int minFontSize = 10;
protected String overlayText;
protected Paint textPaint;
public SeekBarWithText(Context context) {
super(context);
Resources resources = getResources();
//Set up drawn text attributes here
textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
textPaint.setTypeface(Typeface.DEFAULT_BOLD);
textPaint.setTextAlign(Align.LEFT);
}
//This attempts to ensure that the text fits inside your SeekBar on a resize
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
setFontSmallEnoughToFit(w - leftPlusRightTextMargins)));
}
//Finds the largest text size that will fit
protected void setFontSmallEnoughToFit(int width) {
int textSize = maxTextSize;
textPaint.setTextSize(textSize);
while((textPaint.measureText(sampleText) > width) && (textSize > minTextSize)) {
textSize--;
textPaint.setTextSize(textSize);
}
}
//Clients use this to change the displayed text
public void setOverlayText(String text) {
this.overlayText = text;
invalidate();
}
//Draws the text onto the SeekBar
#Override
protected synchronized void onDraw(Canvas canvas) {
//Draw everything else (i.e., the usual SeekBar) first
super.onDraw(canvas);
//No text, no problem
if(overlayText.length() == 0) {
return;
}
canvas.save();
//Here are a few parameters that could be useful in calculating where to put the text
int width = this.getWidth() - leftPlusRightTextMargins;
int height = this.getHeight();
//A somewhat fat finger takes up about seven digits of space
// on each side of the thumb; YFMV
int fatFingerThumbHangover = (int) textPaint.measureText("1234567");
float textWidth = textPaint.measureText(overlayText);
int progress = this.getProgress();
int maxProgress = this.getMax();
double percentProgress = (double) progress / (double) maxProgress;
int textHeight = (int) (Math.abs(textPaint.ascent()) + textPaint.descent() + 1);
int thumbOffset = this.getThumbOffset();
//These are measured from the point textMargin in from the left of the SeekBarWithText view.
int middleOfThumbControl = (int) ((double) width * percentProgress);
int spaceToLeftOfFatFinger = middleOfThumbControl - fatFingerThumbHangover;
int spaceToRightOfFatFinger = (width - middleOfThumbControl) - fatFingerThumbHangover;
int spaceToLeftOfThumbControl = middleOfThumbControl - thumbOffset;
int spaceToRightOfThumbControl = (width - middleOfThumbControl) - thumbOffset;
int bottomPadding = this.getPaddingBottom();
int topPadding = this.getPaddingTop();
//Here you will use the above and possibly other information to decide where you would
// like to draw the text. One policy might be to draw it on the extreme right when the thumb
// is left of center, and on the extreme left when the thumb is right of center. These
// methods will receive any parameters from the above calculations that you need to
// implement your own policy.
x = myMethodToSetXPosition();
y = myMethodToSetYPosition();
//Finally, just draw the text on top of the SeekBar
canvas.drawText(overlayText, x, y, textPaint);
canvas.restore();
}
}
check this put trees of relative layout to put text on top of seekbar
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/relativeLayout0" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_alignParentRight="true"
android:text="Button" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button1"
android:layout_marginBottom="0dp"
android:layout_toRightOf="#+id/button1" >
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/seekBar1"
android:layout_alignParentRight="true"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
</RelativeLayout>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/relativeLayout1"
android:layout_centerHorizontal="true"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
enter code here
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"`enter code here`
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="24dp"
android:text="Button" />
</RelativeLayout>

Android: grow/shrink View over time

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?

Categories

Resources