layout visibility animation

Question

How do I show the layout with transition duration 2.5 by displaying top of the layout first followed by the bottom not all at the same time .I really appreciate any help.Thanks in Advance.

summary: layout visibility animation with transition duration 2.5 and displays top to bottom not the entire layout at once like javascript-css transition

public class MainActivity extends Activity {

    Button b;
    Button b2;

    LinearLayout l1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        l1=(LinearLayout)findViewById(R.id.linearLayout1);


        b=(Button)findViewById(R.id.button1);

        b.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {

                l1.setVisibility(View.VISIBLE);
            }
        });


        b2=(Button)findViewById(R.id.button3);
        b2.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {

            l1.setVisibility(View.GONE);



            }
        });



    }
}

xml

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/button1"
    android:layout_below="@+id/button1"
    android:layout_marginTop="72dp"
    android:orientation="vertical"
    android:visibility="gone" >

    <Button
        android:id="@+id/Button04"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <TextView
        android:id="@+id/TextView04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/TextView06"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <Button
        android:id="@+id/Button06"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <TextView
        android:id="@+id/TextView05"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <Button
        android:id="@+id/Button07"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <TextView
        android:id="@+id/TextView07"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <Button
        android:id="@+id/Button05"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/Button03"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <TextView
        android:id="@+id/TextView03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <Button
        android:id="@+id/Button02"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <TextView
        android:id="@+id/TextView02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <Button
        android:id="@+id/Button01"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <TextView
        android:id="@+id/TextView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <Button
        android:id="@+id/button2"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="49dp"
    android:layout_marginTop="22dp"
    android:text="Button" />

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/button1"
    android:layout_alignParentRight="true"
    android:layout_marginRight="35dp"
    android:text="Button" />

score 3 · Accepted Answer · answered May 09 '14 at 17:37

3

Just add this to the root view in your layout:

android:animateLayoutChanges="true"

This will automatically animate anything you change in the layout! So if you change the visibility of views it will automatically play a fade in/out animation, if you change the position of the view a translation animation will be played etc.

answered May 09 '14 at 17:37

Xaver Kapeller

49,491
11
98
86

how can i control the duration to 2.5 secs also fade in from top to bottom ? – jason May 09 '14 at 17:51
Fade from top to bottom would be very difficult to implement. Of the top of my head I don't know of a simple way to achieve this, even with a completely custom animation. To control the duration of the animation you are going to have to animate everything manually. [This answer](http://stackoverflow.com/questions/19765938/show-and-hide-linearlayout-with-a-slide-up-down-animation/19766034#19766034) and [this answer](http://stackoverflow.com/questions/22614156/android-library-to-create-easily-cool-animations/22614257#22614257) both explain how you can create, tweak and play animations. – Xaver Kapeller May 09 '14 at 18:33
can you change to code above to make it work.It would be of great help.Thanks.What do I need to add to the code above? – jason May 09 '14 at 18:44
To make what work? If you want to know how to animate manually than see the links I posted above. – Xaver Kapeller May 09 '14 at 18:47
I used ` ` how do I use two anim both accelerate and fade-in ? – jason May 09 '14 at 19:56

layout visibility animation

1 Answers1