Animate visibility modes GONE and VISIBLE

Question

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    lt  xml version  1 0  encoding  utf-8   gt   lt 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  gt   lt ScrollView      android id    id ScrollView01       android layout width  wrap content      android layout height  wrap content  gt       lt LinearLayout         android layout height  wrap content          android layout width  fill parent           android orientation  vertical  gt           lt  -- TITULO1 -- gt               lt LinearLayout                  android layout height  wrap content                  android layout width  fill parent                   android orientation  horizontal                   android background   848284                  android padding  4px  gt                     lt 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  gt                   lt  TextView gt                   lt 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  gt                           lt ToggleButton                              android layout height  wrap content                               android layout width  wrap content                               android textOff  Expandir                               android textOn  Minimizar                              android id    id mostrar                               android width  80px  gt                           lt  ToggleButton gt                   lt  LinearLayout gt                lt  LinearLayout gt               lt  --LINHA SEPARADORA-- gt               lt View                  android id    id View01                   android layout width  wrap content                   android background   B5B5B5                   android layout height  2px  gt               lt  View gt               lt  -- CONTENT INITIALLY HIDDEN  GONE  -- gt               lt LinearLayout                  android layout width  fill parent                   android layout height  wrap content                  android visibility  gone                    android id    id informgeral                  android orientation  vertical  gt                    lt 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  gt                       lt LinearLayout                         android layout width  fill parent                          android layout height  wrap content                          android orientation  horizontal  gt                           lt 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   gt                           lt 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   gt                       lt  LinearLayout gt                       lt LinearLayout                         android layout height  wrap content                           android layout width  fill parent  gt                           lt 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   gt                       lt  LinearLayout gt                   lt  LinearLayout gt                   lt View                      android id    id View01                       android layout width  wrap content                       android background   B5B5B5                       android layout height  1px  gt                   lt  View gt   lt 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  gt       lt LinearLayout         android layout width  fill parent          android layout height  wrap content          android orientation  horizontal  gt               lt 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   gt               lt 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   gt       lt  LinearLayout gt       lt LinearLayout         android layout height  wrap content           android layout width  fill parent  gt       lt 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   gt       lt  LinearLayout gt        lt  LinearLayout gt   lt View android id    id View01           android layout width  fill parent           android background   B5B5B5           android layout height  1px  gt   lt  View gt   lt 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  gt       lt LinearLayout         android layout width  fill parent          android layout height  wrap content          android orientation  horizontal  gt               lt 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   gt               lt 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   gt       lt  LinearLayout gt       lt LinearLayout         android layout height  wrap content           android layout width  wrap content  gt       lt 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   gt       lt  LinearLayout gt        lt  LinearLayout gt   lt View android id    id View01           android layout width  wrap content           android background   B5B5B5           android layout height  1px  gt   lt  View gt       lt 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  gt       lt LinearLayout         android layout width  fill parent          android layout height  wrap content          android orientation  horizontal  gt               lt 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   gt               lt 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   gt       lt  LinearLayout gt       lt LinearLayout         android layout height  wrap content           android layout width  wrap content  gt       lt 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   gt       lt  LinearLayout gt        lt  LinearLayout gt   lt View android id    id View01           android layout width  wrap content           android background   B5B5B5           android layout height  1px  gt   lt  View gt   lt 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  gt       lt LinearLayout         android layout width  fill parent          android layout height  wrap content          android orientation  horizontal  gt               lt 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   gt               lt 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   gt       lt  LinearLayout gt       lt LinearLayout         android layout height  wrap content           android layout width  wrap content  gt       lt 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   gt       lt  LinearLayout gt        lt  LinearLayout gt   lt View android id    id View01           android layout width  wrap content           android background   B5B5B5           android layout height  1px  gt   lt  View gt   lt 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  gt       lt LinearLayout         android layout width  fill parent          android layout height  wrap content          android orientation  horizontal  gt               lt 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   gt               lt 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   gt       lt  LinearLayout gt       lt LinearLayout         android layout height  wrap content           android layout width  wrap content  gt       lt 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   gt       lt  LinearLayout gt        lt  LinearLayout gt   lt  LinearLayout gt   lt  -- TITULO2 -- gt   lt LinearLayout      android layout height  wrap content      android layout width  fill parent       android orientation  horizontal       android background   848284  android padding  4px  gt        lt 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  gt       lt  TextView gt       lt 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  gt           lt ToggleButton              android layout height  wrap content               android layout width  wrap content               android textOff  Expandir               android textOn  Minimizar              android id    id mostrar2               android width  80px  gt           lt  ToggleButton gt       lt  LinearLayout gt   lt  LinearLayout gt   lt View      android id    id View01       android layout width  wrap content       android background   B5B5B5       android layout height  2px  gt   lt  View gt    lt  -- TITULO3 -- gt   lt LinearLayout      android layout height  wrap content      android layout width  fill parent       android orientation  horizontal       android background   848284      android padding  4px  gt         lt 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  gt       lt  TextView gt       lt 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  gt           lt ToggleButton               android layout height  wrap content               android layout width  wrap content               android textOff  Expandir               android textOn  Minimizar              android id    id mostrar               android width  80px  gt           lt  ToggleButton gt       lt  LinearLayout gt        lt  LinearLayout gt   lt  --LINHA SEPARADORA-- gt   lt View      android id    id View01       android layout width  wrap content       android background   B5B5B5       android layout height  2px  gt   lt  View gt   lt  -- TITULO4 -- gt   lt LinearLayout      android layout height  wrap content      android layout width  fill parent       android orientation  horizontal       android background   848284      android padding  4px  gt         lt 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  gt       lt  TextView gt       lt 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  gt           lt ToggleButton               android layout height  wrap content               android layout width  wrap content               android textOff  Expandir               android textOn  Minimizar              android id    id mostrar               android width  80px  gt           lt  ToggleButton gt       lt  LinearLayout gt        lt  LinearLayout gt   lt  --LINHA SEPARADORA-- gt   lt View      android id    id View01       android layout width  wrap content       android background   B5B5B5       android layout height  2px  gt   lt  View gt   lt  LinearLayout gt   lt  ScrollView gt      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

User · Accepted Answer

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

User · 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

User · Answer

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

User · 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

User · 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

User · 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

User · 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

User · 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

[android] Animate visibility modes, GONE and VISIBLE

Examples related to android

Examples related to animation

Examples related to visibility

Examples related to slide