CODEWITHSUNDEEP
android
sunlover3
sunlover3

Reputation: 2049

Show Layout from behind another layout with animation

I have a clickable TextView: 

width = match_parent, height = "wrap_content"

When I press it, I want to show a LinearLayout containing 3 views, orientation vertical, and I want to animate it to slide down from behind the TextView, below it. Like a drop-down, but not using Spinner.

Any ideas?

Upvotes: 0

Views: 648

Answers (3)

Ferdous Ahamed
Ferdous Ahamed

Reputation: 21736

1. Create an animation XML for slide down in /res/anim/ folder:

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

FYI, You can change animation duration and YDelta as per your needs.

2. Design your desired layout. Use RelativeLayout as root and set child LinearLayout visibility GONE.

activity_main.xml:

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

    <LinearLayout
        android:id="@+id/layout_dropdown"
        android:layout_width="fill_parent"
        android:layout_height="200dp"
        android:orientation="horizontal"
        android:background="@android:color/holo_red_dark"
        android:visibility="gone">

        <!-- Your 3 Views here -->

    </LinearLayout>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Click Here"
        android:textSize="30sp"/>

</RelativeLayout>

3. In your Activity, programmatically apply slide_down animation on LinearLayout(layout_dropdown) to show and sliding down when clicked on TextView(textView):

MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    TextView textView;
    LinearLayout linearLayout;

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

        textView = (TextView) findViewById(R.id.textView);
        linearLayout = (LinearLayout) findViewById(R.id.layout_dropdown);

        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

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

                linearLayout.setVisibility(View.VISIBLE);
                linearLayout.startAnimation(slideDown);

                // Required to keep layout stay at final position after animation
                slideDown.setFillAfter(true);
            }
        });
    }
}

OUTPUT:

enter image description here

Hope this will help~

Upvotes: 1

BladeCoder
BladeCoder

Reputation: 12929

If you want a dropdown-like effect, you should probably use a PopupWindow to show your LinearLayout. That's what Spinner uses internally. You can set the enter and exit animations for it. By default, a PopupWindow from a Spinner performs a scale and alpha animation at the same time.

There is also PopupMenu which is a specialized class to show menus with the standard animations.

Upvotes: 1

GiGi
GiGi

Reputation: 33

Make LinearLayout with scaleY=0 and then animate it to 1.0

Execute this in the onClicklistener:

ViewCompat.animate(yourView)
                .scaleY(1.0f)
                .start();

Upvotes: 0

Related Questions