Android grow LinearLayout using animation

Question

I am trying to use animation to make a layout appear on screen. The idea is that layout will start with height of 0 and grow to 100%.

I have real troubles with this and need some assistance. For some reason no animation is performed.

Here is my animation XML file

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="0.0"
        android:toXScale="1"
        android:fromYScale="1.0"
        android:toYScale="1.0"
        android:fillAfter="false"
         />

</set>

The layout file is very basic and is designed as following

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">

<LinearLayout
        android:id="@+id/dialog"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true"
        android:orientation="vertical"
        android:layout_centerVertical="true"
        android:background="@drawable/border">
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="Phone"
            android:id="@+id/textView"/>
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="Address"
            android:id="@+id/textView1"/>
    <Button android:id="@+id/btn1"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="Action 1"
            />
    <Button android:id="@+id/btn2"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="Action 2"
            />
</LinearLayout>
<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Animate"
        android:id="@+id/btnAnimate" android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
        android:onClick="animate"/>
</RelativeLayout>

My activity code is very basic as well

public class MyActivity extends Activity implements Animation.AnimationListener{

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
 }

public void animate(View view){
    LinearLayout dialog   = (LinearLayout)findViewById(R.id.dialog);
    dialog.setVisibility(LinearLayout.VISIBLE);
    Animation animation   =    AnimationUtils.loadAnimation(this, R.anim.anim);
    Log.i("animate","Begin Animation");
    animation.reset();
  //  animation.setFillAfter(true);
    animation.setAnimationListener(this);
    dialog.setAnimation(null);
    Log.i("animate","End Animation");
}

@Override
public void onAnimationStart(Animation animation) {
    //To change body of implemented methods use File | Settings | File Templates.
}

@Override
public void onAnimationEnd(Animation animation) {
    //To change body of implemented methods use File | Settings | File Templates.
}

@Override
public void onAnimationRepeat(Animation animation) {
    //To change body of implemented methods use File | Settings | File Templates.
}
}

Thank you

Solution 1

Ok, I figured it out.

Animation XML layout

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:fillEnabled="true"
 android:fillAfter="true">
 <scale

        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.0"
        android:fromYScale="0.0"
        android:toYScale="1.0"
        android:fillAfter="false"
         />

</set>

Layout XML file

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">

  <LinearLayout
        android:id="@+id/dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:orientation="vertical"
        android:layout_centerVertical="true"
        android:visibility="invisible"
        android:background="@drawable/border">
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="Phone"
            android:id="@+id/textView"/>
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="Address"
            android:id="@+id/textView1"/>
    <Button android:id="@+id/btn1"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="Action 1"
            />
    <Button android:id="@+id/btn2"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="Action 2"
            />
   </LinearLayout>
   <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Animate"
        android:id="@+id/btnAnimate" android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
        android:onClick="animate"/>
</RelativeLayout>

and my Activity class

public class MyActivity extends Activity{

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
 }

public void animate(View view){
    LinearLayout dialog   = (LinearLayout)findViewById(R.id.dialog);
    dialog.setVisibility(LinearLayout.VISIBLE);
    Animation animation   =    AnimationUtils.loadAnimation(this, R.anim.anim);
    animation.setDuration(500);
    dialog.setAnimation(animation);
    dialog.animate();
    animation.start();
 }

}

Solution 2

The easiest way for Android 3.0 and above is to set this property for the view you want to add childs:

android:animateLayoutChanges="true"

You can also create your own animations:

If you want to supply custom layout animations, create a LayoutTransition object and supply it to the layout with the setLayoutTransition() method.

For more info see: http://developer.android.com/training/animation/layout.html#activity

Solution 3

Designing a growing linearlayout in android:

For the ones who are using Mono android of Xamarin:

make a folder anim under resources.

then add animation.xml in anim folder(grow_anim1)

in the activity class use this way:

(in my case I am using Fragment)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Util;
using Android.Views;
using Android.Widget;
using Android.Views.Animations;
namespace BehnoudAndroidApp {
    public class StartPageFragment : Fragment{
        public override View OnCreateView(LayoutInflater p0, ViewGroup p1, Bundle p2){
            var rootView = p0.Inflate(Resource.Layout.StartPageLayout, p1, false);

            LinearLayout menu1 = rootView.FindViewById<LinearLayout>(Resource.Id.linearlayout1);

            Animation animation1 = AnimationUtils.LoadAnimation(this.Activity, Resource.Animation.grow_anim1);

            animation1.Duration = 5000;

            menu1.Click += delegate { menu1.StartAnimation(animation1); };

            return rootView;
        }
    }
}

Solution 4

It seems that the animation is never started. try adding:

animation.start()

View more solutions

Comments

[nedaRM]

What is the problem? What is your code doing now?

[svager]

My code does absolutely nothing. Executes just fine but no animation...

[svager]

Ok, I figured it out but I can't post complete answer here because my reputation is too low :(

[valerybodak]

What does mean method dialog.animate(); ?

[Admin]

Now is called how android.R.anim.*

[zfj3ub94rf576hc4eegm]

This is a non-answer. OP is asking for a custom animation, but you don't explain how to supply a custom animation at all.

[TWiStErRob]

Agree with Luke, you missed the most important part of the answer. Based on your answer view.setLayoutTransition(new LayoutTransition()) is the solution, but it does nothing.

[Arpit Patel]

for out animation what changes required in anim file??

[InfinitePrime]

The same in React Native anybody?