How to expand view smoothly in Android?

Question

I met an issue when I expanded a 320*50 view to full-screen.

If I expand it directly, it works but the action is very abrupt and I think is not a good user experience. So I hide the view first, then expand it, and after two second, show the view again.

TextView.setVisibility(VIEW.INVISIBLE);
ViewGroup.LayoutParams lp = TextView.getLayoutParams();
lp.width = ViewGroup.LayoutParams.FILL_PARENT;
lp.height = ViewGroup.LayoutParams.FILL_PARENT;

//after two seconds
handler.postDelay(new Show(),2000);

class Show implements Runnable{
   @Override
public void run(){
       TextView.setVisibility(VIEW.VISIBLE);
   }
}

So l left two seconds for the application to expand the view. Then after two seconds the view will show again. I am expected that the view is expanded to full-screen when it shows. But actually, it doesn't. The view do the expand action after it shows instead of during the two seconds it is hiding.

Yes, this is a excellent workaround.But Is there any resolution more directly? — wayne_bai, Nov 06 '12 at 13:25
@wayne_bai : I don't think there is a better way than using an Animation. They are not complex to implement. — Sébastien, Nov 06 '12 at 13:36
post the 2 second-waiting part, i suspect you don't release the hand on the main thread — njzk2, Nov 06 '12 at 13:41
@njzk2:I just use handler.postDelay(runnable,time). I have updated the code. — wayne_bai, Nov 06 '12 at 14:59

score 4 · Answer 1 · answered Jan 09 '20 at 19:54

Add android:animateLayoutChanges="true" to your ViewGroup.
Use setVisibility() to control the visibility of your target View.

If there is other View below you target View, add android:animateLayoutChanges="true" to your outer ViewGroup and following code before setVisibility():

LayoutTransition layoutTransition = rootLinearLayout.getLayoutTransition();
layoutTransition.enableTransitionType(LayoutTransition.CHANGING);

score 0 · Answer 2 · answered Mar 07 '19 at 15:59

I know it's really late for answering this, but I'll just tell the way I chose to animate layout changes for someone in need.

Android has a special Animation class named ScaleAnimation where we can smoothly expand or collapse views.

Show view by expanding diagonally:

ScaleAnimation expand = new ScaleAnimation(
   0, 1.0f,
   0, 1.0f,
Animation.RELATIVE_TO_PARENT, 0,
Animation.RELATIVE_TO_PARENT, 0);
expand.setDuration(250);

view.startAnimation(expand)

where the constructor used is:

ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

So you can change values accordingly.

For example, the below example would animate view horizontally:

ScaleAnimation expand = new ScaleAnimation(
   0, 1.1f,
   1f, 1f,
   Animation.RELATIVE_TO_PARENT, 0,
   Animation.RELATIVE_TO_PARENT, 0);
expand.setDuration(250);

You can change fromX,toX, fromY & toY according to the need.

For example if view is shown and you have to just expand it, put fromX and fromY to 1.0f, and toX, toY according to the need.

Now, using the same class you can create a more cool effect for showing view by expanding view a little bit extra and then shrinking it to original size. For this purpose, AnimationSet will be used. So it would create a kind of bubble effect.

Below example is for creating bubble effect for showing the view:

AnimationSet expandAndShrink = new AnimationSet(true);
ScaleAnimation expand = new ScaleAnimation(
   0, 1.1f,
   0, 1.1f,
Animation.RELATIVE_TO_PARENT, 0,
Animation.RELATIVE_TO_PARENT, 0);
expand.setDuration(250);

ScaleAnimation shrink = new ScaleAnimation(
   1.1f, 1f,
   1.1f, 1f,
Animation.RELATIVE_TO_PARENT, 0,
Animation.RELATIVE_TO_PARENT, 0);
shrink.setStartOffset(250);
shrink.setDuration(120);

expandAndShrink.addAnimation(expand);
expandAndShrink.addAnimation(shrink);
expandAndShrink.setFillAfter(true);
expandAndShrink.setInterpolator(new AccelerateInterpolator(1.0f));

view.startAnimation(expandAndShrink);

How to expand view smoothly in Android?

2 Answers2