Animate visibility modes, GONE and VISIBLE
AndroidAnimationVisibilitySlideAndroid Problem Overview
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);;
}
}
});
Android Solutions
Solution 1 - Android
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 2 - Android
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 3 - Android
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 4 - Android
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 5 - Android
You probably want to use an ExpandableListView, a special ListView that allows you to open and close groups.
Solution 6 - Android
There is no easy way to animate hiding/showing views. You can try method described in following answer: https://stackoverflow.com/questions/2634073/how-do-i-animate-view-setvisibilitygone/3952933#3952933
Solution 7 - Android
You can use the expandable list view explained in API demos to show groups
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.
Solution 8 - Android
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