Simple slide up animation of view

Question

I've a view like this:

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/...">

    <ImageView
        android:id="@+id/.."
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/black"
        android:src="@drawable/.."
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

I want to create simple and clean animation to slide for my ImageView from the very bottom (container) with changing alpha (fade-in) to very top of container.

I found alot of solution in stackoverflow when you specify specific height of slide. Is there a simple solution as I need from bottom to top?

You can refer this link : [https://stackoverflow.com/questions/23925907/slidedown-and-slideup-layout-with-animation](https://stackoverflow.com/questions/23925907/slidedown-and-slideup-layout-with-animation) — Deepak Rajput, May 15 '19 at 10:05
@Deepak With your proposed solution, view only slide from it's height not containers (bottom). Any ideas on how to improve solution so it works as expected? — MaaAn13, May 15 '19 at 10:11

Sajith · Accepted Answer · 2019-05-15T10:58:22.663

We need to create an xml file that defines the type of animation to perform in a new folder anim under res directory (res/anim/slide_up.xml) with required properties. In case, anim folder not exists in res directory, create a new one.

To use Slide Up or Slide Down animations in our android applications, need to define a new xml file with <scale> tag like as shown below.

For Slide Up animation

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0"
    android:fromYDelta="1000"
    android:duration="500"/>
</set>

For Slide down animation,

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toYDelta="100%"
    android:duration="500"/>
 </set>

adjust android:fromXDelta ,android:fromYDelta, android:toYDelta,android:duration as you wish.

define your xml like below

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/parentView>

    <ImageView
    android:id="@+id/.."
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@android:color/black"
    android:src="@drawable/.."
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

    </LinearLayout>



LinearLayout parent= (LinearLayout)findViewById(R.id.parentView);
Animation aniSlide = 
AnimationUtils.loadAnimation(getApplicationContext(),R.anim.slide_up);
parent.startAnimation(aniSlide);

This slides from top to bottom and the distance of slide is the same as the images height. I want slide distance to be from containers bottom, to containers top. — MaaAn13, May 15 '19 at 10:50
edited my answer. use animation for the parent view, now it will top to bottom — Sajith, May 15 '19 at 11:00

score 0 · Answer 2 · answered May 15 '19 at 10:45

First Create Xml File in res/anim/

left to right animation:

<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false">
 <translate android:fromXDelta="-100%" android:toXDelta="0%"
            android:fromYDelta="0%" android:toYDelta="0%"
            android:duration="700"/>
</set>

Add this code in your activity :

this.overridePendingTransition(R.anim.where_start_animation,
               R.anim.where_leave_animation);

I would like to see from bottom to top, as question requires, thanks alot! — MaaAn13, May 15 '19 at 10:51

score 0 · Answer 3 · answered May 16 '19 at 08:21

You have to put four animation files two animations for bottom to top and two for top to bottom animation:

For Activity bottom to top:

override fun onCreate(savedInstanceState: Bundle?) {
    overridePendingTransition(R.anim.slide_in_up, R.anim.slide_out_up)
    super.onCreate(savedInstanceState)
}

For Activity top to bottom:

  override fun onBackPressed() {
    overridePendingTransition(R.anim.slide_in_down, R.anim.slide_out_down)
    super.onBackPressed()
}

For Fragment :

fun switchFragment1(fragment: Fragment, isAddBackStack: Boolean, tag: String) {
   val fragmentTransaction = supportFragmentManager.beginTransaction()
   fragmentTransaction.setCustomAnimations(R.anim.slide_in_up, R.anim.slide_out_up,
   R.anim.slide_in_down, R.anim.slide_out_down)

   if (isAddBackStack)
       fragmentTransaction.addToBackStack(null)
   fragmentTransaction.commitAllowingStateLoss()

}

slide_in_up

  <?xml version="1.0" encoding="utf-8"?>
  <translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_longAnimTime"
    android:fromYDelta="100%p"
    android:toYDelta="0%p" />

slide_out_up

 <?xml version="1.0" encoding="utf-8"?>
 <translate xmlns:android="http://schemas.android.com/apk/res/android"
   android:duration="@android:integer/config_longAnimTime"
   android:fromYDelta="0%p"
   android:toYDelta="-100%p" />

slide_in_down

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
  android:duration="@android:integer/config_longAnimTime"
  android:fromYDelta="-100%p"
  android:toYDelta="0%p" />

slide_out_down

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
   android:duration="@android:integer/config_longAnimTime"
   android:fromYDelta="0%p"
   android:toYDelta="100%p" />

Simple slide up animation of view

3 Answers3