Home » Android » android – Animate visibility modes, GONE and VISIBLE

android – Animate visibility modes, GONE and VISIBLE

Posted by: admin March 11, 2020 Leave a comment

Questions:

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:

enter image description here

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);;
}
}
});
How to&Answers:

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 😉

Answer:

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.

Answer:

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); } } 

Answer:

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

Answer:

You probably want to use an ExpandableListView, a special ListView that allows you to open and close groups.

Answer:

If anyone else is strugelling with this in the present, here is a much easier version:

It is possible to set a property of the parent layout in the XML:

android:animateLayoutChanges="true" 

This will animate views when they are added/removed.
Keep a reference to the view and reinsert it at its proper index and you’re gold.

Answer:

There is no easy way to animate hiding/showing views. You can try method described in following answer: How do I animate View.setVisibility(GONE)

Answer:

You can use the expandable list view explained in API demos to show groups

http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/ExpandableList1.html.

To animate the list items motion, you will have to override the getView method and apply translate animation on each list item.
The values for animation depend on the position of each list item.
This was something which i tried on a simple list view long time back.

Answer:

Well there is a very easy way, but just setting android:animateLayoutChanges="true" will not work. You need to enableTransitionType in you activity. Check this link for more info: http://www.thecodecity.com/2018/03/android-animation-on-view-visibility.html