Animate visibility modes, GONE and VISIBLE
Solution 1
Like tomash said before: There's no easy way.
You might want to take a look at my answer here.
It explains how to realize a sliding (dimension changing) view.
In this case it was a left and right view: Left expanding, right disappearing.
It's might not do exactly what you need but with inventive spirit you can make it work ;)
Solution 2
To animate layout changes, you can add the following attribute to your LinearLayout
android:animateLayoutChanges="true"
and it will animate changes automatically for you.
For information, if android:animateLayoutChanges="true"
is used, then custom animation via anim xml will not work.
Solution 3
Visibility change itself can be easy animated by overriding setVisibility method. Look at complete code:
public class SimpleViewAnimator extends FrameLayout
{
private Animation inAnimation;
private Animation outAnimation;
public SimpleViewAnimator(Context context)
{
super(context);
}
public void setInAnimation(Animation inAnimation)
{
this.inAnimation = inAnimation;
}
public void setOutAnimation(Animation outAnimation)
{
this.outAnimation = outAnimation;
}
@Override
public void setVisibility(int visibility)
{
if (getVisibility() != visibility)
{
if (visibility == VISIBLE)
{
if (inAnimation != null) startAnimation(inAnimation);
}
else if ((visibility == INVISIBLE) || (visibility == GONE))
{
if (outAnimation != null) startAnimation(outAnimation);
}
}
super.setVisibility(visibility);
}
}
Solution 4
This is a quite old question, still comments show, that still people have problems, so here is my solution with following additional features:
- adjust the animation (speed, type, ...)
- does not need to extend any class
- in my case, animateLayoutChanges has problems in the new
CoordinatorLayout
Function - Example (I have this function in an utility class)
public static void animateViewVisibility(final View view, final int visibility)
{
// cancel runnning animations and remove and listeners
view.animate().cancel();
view.animate().setListener(null);
// animate making view visible
if (visibility == View.VISIBLE)
{
view.animate().alpha(1f).start();
view.setVisibility(View.VISIBLE);
}
// animate making view hidden (HIDDEN or INVISIBLE)
else
{
view.animate().setListener(new AnimatorListenerAdapter()
{
@Override
public void onAnimationEnd(Animator animation)
{
view.setVisibility(visibility);
}
}).alpha(0f).start();
}
}
Adjust animation
After calling view.animate()
you can adjust the animation to whatever you want (set duration, set interpolator and more...). You may as well hide a view by scaling it instead of adjusting it's alpha value, just replace the alpha(...)
with scaleX(...)
or scaleY(...)
in the utility method if you want that
Solution 5
You probably want to use an ExpandableListView, a special ListView that allows you to open and close groups.
Maxrunner
Updated on March 24, 2020Comments
-
Maxrunner about 4 years
So im trying to animate when i set the visibility of a linearlayout with other widgets, from GONE to VISIBLE and the opposite.Im using togglebuttons to show and hide. Here's an image to show what i want to do:
I can show and hide, but im not following how can i animate the sliding correctly....:(
Heres my xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/LinearLayout01" android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="vertical"> <ScrollView android:id="@+id/ScrollView01" android:layout_width="wrap_content" android:layout_height="wrap_content"> <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="vertical"> <!-- TITULO1 --> <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="horizontal" android:background="#848284" android:padding="4px"> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/TextView01" android:text="Informação Geral" android:textColor="#FFFFFF" android:gravity="left" android:textStyle="bold" android:singleLine="true" android:ellipsize="end" android:layout_gravity="center_vertical" android:textSize="18px" android:paddingLeft="4px"> </TextView> <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_gravity="right|center_vertical" android:gravity="right|center_vertical" android:paddingTop="2px"> <ToggleButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:textOff="Expandir" android:textOn="Minimizar" android:id="@+id/mostrar" android:width="80px"> </ToggleButton> </LinearLayout> </LinearLayout> <!--LINHA SEPARADORA--> <View android:id="@+id/View01" android:layout_width="wrap_content" android:background="#B5B5B5" android:layout_height="2px"> </View> <!-- CONTENT INITIALLY HIDDEN (GONE) --> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:visibility="gone" android:id="@+id/informgeral" android:orientation="vertical"> <LinearLayout android:id="@+id/LinearLayout01" android:layout_height="wrap_content" android:layout_width="fill_parent" android:paddingBottom="5px" android:paddingTop="5px" android:paddingLeft="8px" android:orientation="vertical"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/consult_nrprocesso" android:textStyle="bold" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="left" android:ellipsize="end" android:layout_width="wrap_content" android:singleLine="true" android:text="@string/srch_number_proc"/> <TextView android:id="@+id/consult_nrprocessovalue" android:layout_width="0px" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="right" android:singleLine="true" android:ellipsize="end"/> </LinearLayout> <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent"> <TextView android:id="@+id/consult_tipoprocinfo" android:text="Numero Atribuido ao Processo" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="left" android:singleLine="true" android:ellipsize="end" android:layout_width="wrap_content" android:textSize="12px"/> </LinearLayout> </LinearLayout> <View android:id="@+id/View01" android:layout_width="wrap_content" android:background="#B5B5B5" android:layout_height="1px"> </View> <LinearLayout android:id="@+id/LinearLayout02" android:layout_height="wrap_content" android:orientation="vertical" android:paddingTop="5px" android:paddingBottom="5px" android:layout_width="fill_parent" android:paddingLeft="8px"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/consult_tipoproc" android:textStyle="bold" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="left" android:ellipsize="end" android:layout_width="wrap_content" android:singleLine="true" android:text="@string/proc_type"/> <TextView android:id="@+id/consult_tipoprocvalue" android:layout_width="0px" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="right" android:singleLine="true" android:ellipsize="end"/> </LinearLayout> <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent"> <TextView android:id="@+id/consult_tipoprocinfo" android:text="Variante do Processo em causa" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="left" android:singleLine="true" android:ellipsize="end" android:layout_width="wrap_content" android:textSize="12px"/> </LinearLayout> </LinearLayout> <View android:id="@+id/View01" android:layout_width="fill_parent" android:background="#B5B5B5" android:layout_height="1px"> </View> <LinearLayout android:id="@+id/LinearLayout03" android:layout_height="wrap_content" android:orientation="vertical" android:paddingTop="5px" android:paddingBottom="5px" android:layout_width="fill_parent" android:paddingLeft="8px"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/consult_etapa" android:textStyle="bold" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="left" android:ellipsize="end" android:layout_width="wrap_content" android:singleLine="true" android:text="@string/srch_task"/> <TextView android:id="@+id/consult_etapavalue" android:layout_width="0px" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="right" android:singleLine="true" android:ellipsize="end"/> </LinearLayout> <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"> <TextView android:id="@+id/consult_etapainfo" android:text="Etapa onde se encontra o processo" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="left" android:singleLine="true" android:ellipsize="end" android:layout_width="wrap_content" android:textSize="12px"/> </LinearLayout> </LinearLayout> <View android:id="@+id/View01" android:layout_width="wrap_content" android:background="#B5B5B5" android:layout_height="1px"> </View> <LinearLayout android:id="@+id/LinearLayout04" android:layout_height="wrap_content" android:orientation="vertical" android:paddingTop="5px" android:paddingBottom="5px" android:layout_width="fill_parent" android:paddingLeft="8px"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/consult_criadopor" android:textStyle="bold" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="left" android:ellipsize="end" android:layout_width="wrap_content" android:singleLine="true" android:text="@string/criado_por"/> <TextView android:id="@+id/consult_criadoporvalue" android:layout_width="0px" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="right" android:singleLine="true" android:ellipsize="end"/> </LinearLayout> <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"> <TextView android:id="@+id/consult_criadoporinfo" android:text="Entidade responsável pela criação do Processo." android:layout_height="wrap_content" android:layout_weight="1" android:gravity="left" android:singleLine="true" android:ellipsize="end" android:layout_width="wrap_content" android:textSize="12px"/> </LinearLayout> </LinearLayout> <View android:id="@+id/View01" android:layout_width="wrap_content" android:background="#B5B5B5" android:layout_height="1px"> </View> <LinearLayout android:id="@+id/LinearLayout05" android:layout_height="wrap_content" android:orientation="vertical" android:paddingTop="5px" android:paddingBottom="5px" android:layout_width="fill_parent" android:paddingLeft="8px"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/consult_assunto" android:textStyle="bold" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="left" android:ellipsize="end" android:layout_width="wrap_content" android:singleLine="true" android:text="@string/proc_subject"/> <TextView android:id="@+id/consult_assuntovalue" android:layout_width="0px" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="right" android:singleLine="true" android:ellipsize="end"/> </LinearLayout> <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"> <TextView android:id="@+id/consult_assuntoinfo" android:text="Assunto do Processo" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="left" android:singleLine="true" android:ellipsize="end" android:layout_width="wrap_content" android:textSize="12px"/> </LinearLayout> </LinearLayout> <View android:id="@+id/View01" android:layout_width="wrap_content" android:background="#B5B5B5" android:layout_height="1px"> </View> <LinearLayout android:id="@+id/LinearLayout05" android:layout_height="wrap_content" android:orientation="vertical" android:paddingTop="5px" android:paddingBottom="5px" android:layout_width="fill_parent" android:paddingLeft="8px"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/consult_datainicio" android:textStyle="bold" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="left" android:ellipsize="end" android:layout_width="wrap_content" android:singleLine="true" android:text="@string/srch_datebeg"/> <TextView android:id="@+id/consult_datainiciovalue" android:layout_width="0px" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="right" android:singleLine="true" android:ellipsize="end"/> </LinearLayout> <LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"> <TextView android:id="@+id/consult_dataincioinfo" android:text="Data da criação do Processo" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="left" android:singleLine="true" android:ellipsize="end" android:layout_width="wrap_content" android:textSize="12px"/> </LinearLayout> </LinearLayout> </LinearLayout> <!-- TITULO2 --> <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="horizontal" android:background="#848284" android:padding="4px"> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/TextView01" android:text="Informação Complementar" android:textColor="#FFFFFF" android:gravity="left" android:textStyle="bold" android:singleLine="true" android:ellipsize="end" android:layout_gravity="center_vertical" android:paddingLeft="4px" android:textSize="16px"> </TextView> <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_gravity="right|center_vertical" android:gravity="right|center_vertical" android:paddingTop="2px"> <ToggleButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:textOff="Expandir" android:textOn="Minimizar" android:id="@+id/mostrar2" android:width="80px"> </ToggleButton> </LinearLayout> </LinearLayout> <View android:id="@+id/View01" android:layout_width="wrap_content" android:background="#B5B5B5" android:layout_height="2px"> </View> <!-- TITULO3 --> <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="horizontal" android:background="#848284" android:padding="4px"> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/TextView01" android:text="Documentos Anexados" android:textColor="#FFFFFF" android:gravity="left" android:textStyle="bold" android:singleLine="true" android:ellipsize="end" android:layout_gravity="center_vertical" android:textSize="18px" android:paddingLeft="4px"> </TextView> <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_gravity="right|center_vertical" android:gravity="right|center_vertical" android:paddingTop="2px"> <ToggleButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:textOff="Expandir" android:textOn="Minimizar" android:id="@+id/mostrar" android:width="80px"> </ToggleButton> </LinearLayout> </LinearLayout> <!--LINHA SEPARADORA--> <View android:id="@+id/View01" android:layout_width="wrap_content" android:background="#B5B5B5" android:layout_height="2px"> </View> <!-- TITULO4 --> <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="horizontal" android:background="#848284" android:padding="4px"> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/TextView01" android:text="Etapas" android:textColor="#FFFFFF" android:gravity="left" android:textStyle="bold" android:singleLine="true" android:ellipsize="end" android:layout_gravity="center_vertical" android:textSize="18px" android:paddingLeft="4px"> </TextView> <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_gravity="right|center_vertical" android:gravity="right|center_vertical" android:paddingTop="2px"> <ToggleButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:textOff="Expandir" android:textOn="Minimizar" android:id="@+id/mostrar" android:width="80px"> </ToggleButton> </LinearLayout> </LinearLayout> <!--LINHA SEPARADORA--> <View android:id="@+id/View01" android:layout_width="wrap_content" android:background="#B5B5B5" android:layout_height="2px"> </View> </LinearLayout> </ScrollView>
And here's the java code that calls the button event:
final ToggleButton bt=(ToggleButton) findViewById(R.id.mostrar); bt.setOnClickListener(new OnClickListener() { public void onClick(View v) { if (bt.isChecked()) { /*TranslateAnimation slide = new TranslateAnimation(0, 0, 0, -findViewById(R.id.informgeral).getHeight()*2); slide.setDuration(500); slide.setFillAfter(true); findViewById(R.id.informgeral).startAnimation(slide);*/ findViewById(R.id.informgeral).setVisibility(View.VISIBLE);; } else { /* TranslateAnimation slide = new TranslateAnimation(0, 0, 0, findViewById(R.id.informgeral).getHeight()); slide.setDuration(500); slide.setFillAfter(true); findViewById(R.id.informgeral).startAnimation(slide);*/ //findViewById(R.id.listBut).startAnimation(slide); findViewById(R.id.informgeral).setVisibility(View.GONE);; } } });
-
Maxrunner over 13 yearsDoes this assure that when you show something that is GONE it will expand and pushes everything bellow too?
-
Oliv over 10 yearsBut only from API 11 (Android 3.0)
-
Eric Cochran almost 10 yearsDon't forget to add public SimpleViewAnimator(Context context, AttributeSet attrs) { super(context, attrs); } Otherwise, this will not inflate from the layout xml!
-
totten over 9 yearsYou just saved the little world =)
-
Sadeshkumar Periyasamy over 9 yearsSimple but saved a lot of effort. Thanks.
-
itzhar over 8 yearsim using it inside recycler view and when it open (VISABLE) its work greate, and when its GONE the item below jump up before animation end. any idea?
-
Narayan Acharya over 8 yearsLate on this one but use INVISIBLE instead of GONE. That might help probably. @itzhar
-
Jack.Ramsden over 8 yearsAny way to change the speed at which this animation occurs?
-
Escobar5 almost 8 years@itzhar I'm having the same problem, did you solve it?
-
Chris over 2 years@itzhar I'm late to the party, but I think I'm having the exact same problem that you describe here. I've create a new question for that but didn't get any answer. Did you somehow solve this?