SyntaxFix

[android] Animate visibility modes, GONE and VISIBLE

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


            }
        }
});

This question is related to android animation visibility slide

The answer is

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

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.

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

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.

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

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)

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

Source: Stackoverflow.com

Examples related to android

• Under what circumstances can I call findViewById with an Options Menu / Action Bar item? • How to implement a simple scenario the OO way • My eclipse won't open, i download the bundle pack it keeps saying error log • getting " (1) no such column: _id10 " error • java doesn't run if structure inside of onclick listener • Cannot retrieve string(s) from preferences (settings) • strange error in my Animation Drawable • how to put image in a bundle and pass it to another activity • FragmentActivity to Fragment • A failure occurred while executing com.android.build.gradle.internal.tasks

Examples related to animation

• Simple CSS Animation Loop – Fading In & Out "Loading" Text • Slidedown and slideup layout with animation • How to have css3 animation to loop forever • jQuery animated number counter from zero to value • CSS Auto hide elements after 5 seconds • Fragment transaction animation: slide in and slide out • Android Animation Alpha • Show and hide a View with a slide up/down animation • Controlling fps with requestAnimationFrame? • powerpoint loop a series of animation

Examples related to visibility

• document.getElementById("remember").visibility = "hidden"; not working on a checkbox • Calling the base class constructor from the derived class constructor • Equivalent of jQuery .hide() to set visibility: hidden • Making a button invisible by clicking another button in HTML • Why is visible="false" not working for a plain html table? • Make one div visible and another invisible • Animate visibility modes, GONE and VISIBLE • How to change visibility of layout programmatically • How can I make visible an invisible control with jquery? (hide and show not work) • How to check visibility of software keyboard in Android?

Examples related to slide

• How to scroll up or down the page to an anchor using jQuery? • Animate visibility modes, GONE and VISIBLE

Tags

Disp Preferenceactivity Bbc-glow Suhosin Posixct Nano Profiles Imperative-programming Selectedtext Failed-to-load-viewstate Jquery-session Pygsl Project-server Perl5.10 Phpexcel Sigint Qtextdocument Xlib Typed Lastaccesstime Curlpp Nsbutton Robotics Iformatprovider Copy-local Jlist Eaglcontext Controlling Model-driven-development Privilege Socialauth Videodisplay Firefox-sidebar Launch4j Cascade-filtering Pclxl Css-friendly Sbcl Durable-duplex Subfigure Non-clustered-index Xmlschemaset Xceed Wasabi Codecave Custom-pages Back-button-control Audio-comparison Delta-pack Boost-signals Httpurlconnection Colorbox Ksh Ramdisk General-network-error Super-columns Inexact-arithmetic Soundmanager2 Xml-entities Medial-axis Treewidget Uint32 Tkinter Sharepoint-discussion-board Saltedhash Live-cd Unresolved-external Jprobe Interaction-design Matrix-inverse El Wscf Iunknown 2-way-object-databinding Efv4 Vmware-player Ghc-api Jsr311 Bindingsource Multiple-dispatch Ms-solver-foundation 3d-rendering Speech-to-text Wpm Autofield Machine-code Dbtable Asp.net-1.1 Sequences Code128 Dcom Framework-design Rst2html.py Safety-critical System-calls Double Int128 Panoramas Main Loadlibrary