Drop-down animation

Question

I am trying to create a drop-down animation. When the user taps on a specified button @+id/btnToHideView, I would like a view @+id/relativeLayoutControls to drop down/slide up (VISIBLE / GONE).

Here is how the layout file looks:

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

    <Button
        android:id="@+id/btnToHideView"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_marginLeft="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginTop="5dp"
        android:background="@drawable/hide_btn"
        />

    <RelativeLayout
        android:id="@+id/relativeLayoutControls"
        android:layout_width="60dp"
        android:layout_height="fill_parent"
        android:layout_marginRight="6dp"
        android:layout_marginEnd="6dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true">

        //I have buttons in this layoout

    </RelativeLayout>

</LinearLayout>

and this is what I have tried:

I created 2 animation files in res/anim

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="100%" />
</set>

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="100%"
        android:toYDelta="0" />
</set>

Then I tried handling this by doing:

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

    controlsHide = (RelativeLayout) findViewById(R.id.relativeLayoutControls);

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

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

    btnToHideView = (Button) findViewById(R.id.btnToHideView);

    btnToHideView.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View view) {

            //I just did slide_up to test if its working
            controlsHide.startAnimation(slide_up);

        }
    });

I followed this post, but when I tap on the button nothing happens. In logcat, it only prints ACTION_DOWN.

S.R · Accepted Answer · 2018-12-25T10:00:02.343

3

Please try this:

SlideUp:

Animation slideUp = AnimationUtils.loadAnimation(activity, R.anim.slide_up);
view.startAnimation(slideUp);

slide_up.xml

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

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

or

view.animate().translationY(0);

Dropdown:

view.animate().translationY(view.getHeight());

edited Dec 25 '18 at 10:00

answered Jul 21 '17 at 08:02

S.R

2,819
2
22
49

Replace `view` with your relative layout or button or any view that you want to animate. And replace `activity` with your context. – S.R Jul 21 '17 at 08:09
Turns out my logic was wrong, but you help me notice that, thank you. – ClassA Jul 21 '17 at 08:18
glad to hear that – S.R Jul 21 '17 at 08:53

score 0 · Answer 2 · answered Apr 22 '21 at 10:53

Here is my source code implementation (refer here), You can use them

// Initially hide/show the content view.
redLayout = mView.findViewById(R.id.history_operation);
//Load animation
slide_down = AnimationUtils.loadAnimation(getActivity(), R.anim.slide_down);
slide_up = AnimationUtils.loadAnimation(getActivity(), R.anim.slide_up);

Create an animation xml for slide down and up. You can feel free to set the duration for the animation if you like. Here I set 500 milli:

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

and

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

Implementing the animation in the source code:

  slide_up.setAnimationListener(new Animation.AnimationListener() {
      @Override
      public void onAnimationStart(Animation animation) {

      }

      @Override
      public void onAnimationEnd(Animation animation) {
          //When the animation was finished, set gone to the view
          redLayout.setVisibility(View.GONE);
      }

      @Override
      public void onAnimationRepeat(Animation animation) {

      }
  });
  slide_down.setAnimationListener(new Animation.AnimationListener() {
      @Override
      public void onAnimationStart(Animation animation) {
          //When the animation start, set visible to the view
          redLayout.setVisibility(View.VISIBLE);
      }

      @Override
      public void onAnimationEnd(Animation animation) {
      }

      @Override
      public void onAnimationRepeat(Animation animation) {

      }
  });

Finally, calling the toggle function to start the defined animations

private void toggle1() {
    // Start animation
    if(isFadeOut){
        redLayout.startAnimation(slide_down);
    }else {
        redLayout.startAnimation(slide_up);
    }
    isFadeOut = !isFadeOut;
}

score 0 · Answer 3 · answered Jan 10 '23 at 10:53

Usually I don't like to use dependencies to keep app light as much as possible. But Animation library has fun various animations:

Java:

Import render animations
import render.animations.*;
Start animation
// Declare yourlayout
yourlayout AppleText = findViewById(R.id.yourlayout);

// Create Render Class
Render render = new Render(MainActivity.this);

// Set Animation
render.setAnimation(Attention.Wobble(AppleText));
render.start();

Kotlin:

Import render animations
import render.animations.*
Start animation
// Declare yourlayout
val yourlayout: View = findViewById(R.id.layout_tag)

// Create Render Class
 val render = Render(this)

// Set Animation
render.setAnimation(Bounce().InDown(yourlayout))
render.start()

Bonuse().InUp(yourview) and try Bonuse().InDown(yourview)

Slide().InUp(yourview) and try Slide().InDown(yourlayout)

Drop-down animation

3 Answers3

Linked