Simple way to Animating Layout Changes in Android.

By | November 6, 2014

A layout animation is a pre-loaded animation that the system runs each time you make a change to the layout configuration. All you need to do is set an attribute in the layout to tell the Android system to animate these layout changes, and system-default animations are carried out for you.

    Create the Layout

In your activity’s layout XML file, set the android:animateLayoutChanges attribute to true for the layout that you want to enable animations for. For instance:

<LinearLayout android:id="@+id/container"
    android:animateLayoutChanges="true"
    ...
/>
    Add, Update, or Remove Items from the Layout

Now, all you need to do is add, remove, or update items in the layout and the items are animated automatically:

private ViewGroup mContainerView;
...
private void addItem() {
    View newView;
    ...
    mContainerView.addView(newView, 0);
}

Here is the complete sample layout file.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:id="@+id/container"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:animateLayoutChanges="true">
 
    <Button
        android:id="@+id/buttonAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Add Views" />
 
     <Button
        android:id="@+id/buttonRemove"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Remove Views" />
      
</LinearLayout>

The MainActivity file.

package com.coderzheaven.demo1;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.LinearLayout;
 
public class MainActivity extends Activity {
 
    LinearLayout mContainerView;
    int id = 0;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        mContainerView = (LinearLayout) findViewById(R.id.container);
        Button click = (Button) findViewById(R.id.buttonAdd);
        click.setOnClickListener(new OnClickListener() {
 
            @Override
            public void onClick(View arg0) {
                addView();
            }
        });
        Button remove = (Button) findViewById(R.id.buttonRemove);
        remove.setOnClickListener(new OnClickListener() {
 
            @Override
            public void onClick(View arg0) {
                removeView();
            }
        });
    }
 
    void addView() {
        Button b = new Button(this);
        b.setId(id++);
        b.setText("Button " + id);
        mContainerView.addView(b, 0);
    }
 
    void removeView() {
 
        View v = (View) findViewById(id - 1);
        if (v != null) {
            id--;
            v.setVisibility(View.GONE);
        }
    }
}

Just try with a sample layout and see the magic.

Leave a Reply

Your email address will not be published. Required fields are marked *