Android – Sliding UP and DOWN Animation for the Layout

androidandroid-layout

I have 2 LinearLayouts which splits the screen into two, Top and Bottom (Refer the screenshot). when the user press the the FloatingActionButton ,the first LinearLayout should slides upwards and the second LinearLayout should slide downwards, here is my try, but its not working , see my concept

this is my xml file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_main"
tools:context="com.example.jaisonjoseph.sample.MainActivity"
android:orientation="vertical">


<LinearLayout
    android:id="@+id/first"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:layout_gravity="top"
    android:layout_weight=".1"
    android:background="@android:color/holo_blue_dark"
    android:orientation="horizontal">


</LinearLayout>

<LinearLayout
    android:id="@+id/second"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:layout_gravity="bottom"
    android:layout_weight=".1"
    android:background="@android:color/holo_green_light"
    android:orientation="horizontal" />


</LinearLayout>

these are the 2 xml files for animation

first one

  <?xml version="1.0" encoding="utf-8"?>
 <set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
    android:duration="1000"
    android:fromYDelta="0"
    android:toYDelta="100%" />

second

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate
    android:duration="1000"
    android:fromYDelta="100%"
    android:toYDelta="0" />

here is the code for main activity

   final LinearLayout first =(LinearLayout)findViewById(R.id.first) ;
    final LinearLayout second =(LinearLayout)findViewById(R.id.second) ;

    final Animation slide_down = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_down);
    final Animation slide_up = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up);

   FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {





           first.setAnimation(slide_up);
           second.setAnimation(slide_down);

        }
    });
}

after adding the answer

Best Answer

Use startAnimation() instead of setAnimation().

Try this:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {

       first.startAnimation(slide_up);
       second.startAnimation(slide_down);
    }
});

slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate
    android:duration="1000"
    android:fromYDelta="0%"
    android:toYDelta="-200%" />
</set>

slide_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate
    android:duration="1000"
    android:fromYDelta="0%"
    android:toYDelta="200%" />
</set>

Here is a good tutorial about different types of animation.

Hope this will help~

Related Topic