expand and collapse example with animation in android

smooth expand/collapse animation in android 

Screenshot

When you click on plus(+) button it will Expand and Collapse Layout





Step1: Create animation folder under res folder 
              then Create Expand.xml and Collapse.xml file in animation folder


Expand.xml

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

    <scale        android:duration="500"        android:fromXScale="1.0"        android:fromYScale="0.0"        android:interpolator="@android:anim/linear_interpolator"        android:toXScale="1.0"        android:toYScale="1.0" />

</set>




Collapse.xml


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

    <scale        android:duration="500"        android:fromXScale="1.0"        android:fromYScale="1.0"        android:interpolator="@android:anim/linear_interpolator"        android:toXScale="1.0"        android:toYScale="0.0" />

</set>




Step2: And Create XML file in Layout Folder

Main.xml


<?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"    android:background="@color/colorPrimaryDark"    android:orientation="vertical">

    <LinearLayout        android:id="@+id/t1"        android:layout_width="match_parent"        android:layout_height="?actionBarSize"        android:layout_gravity="center"        android:layout_marginTop="10dp"        android:background="@color/colorPrimaryLight"        android:gravity="center"        android:orientation="vertical">

        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="?actionBarSize"            android:layout_gravity="center"            android:gravity="center">

            <ImageView                android:id="@+id/imageView1"                android:layout_width="wrap_content"                android:layout_height="match_parent"                android:src="@drawable/side"                android:tint="@color/colorPrimaryDark" />

            <TextView                android:id="@+id/title_text2"                android:layout_width="wrap_content"                android:layout_height="match_parent"                android:layout_alignParentBottom="true"

                android:layout_toEndOf="@+id/imageView1"                android:layout_toRightOf="@+id/imageView1"                android:gravity="center"                android:text="ADD STUDENT"                android:textColor="@color/colorPrimaryDark"                android:textSize="22dp" />

            <ImageView                android:id="@+id/imageButton"                android:layout_width="wrap_content"                android:layout_height="match_parent"                android:layout_alignParentTop="true"                android:layout_marginRight="5dp"                android:layout_toLeftOf="@+id/imageButton1"                android:layout_toStartOf="@+id/imageButton1"                android:src="@drawable/ic_reset1"
                android:tint="@color/colorPrimaryDark" />

            <ImageView                android:id="@+id/imageButton1"                android:layout_width="wrap_content"                android:layout_height="match_parent"                android:layout_alignParentEnd="true"                android:layout_alignParentRight="true"                android:layout_alignParentTop="true"                android:layout_marginRight="3dp"                android:src="@drawable/save"                android:tint="@color/colorPrimaryDark" />


        </RelativeLayout>

    </LinearLayout>


    <ScrollView        android:id="@+id/login_form"        android:layout_width="match_parent"        android:layout_height="wrap_content">

        <LinearLayout            android:layout_width="match_parent"            android:layout_height="match_parent"
            android:orientation="vertical">


            <LinearLayout
                android:layout_width="match_parent"                android:layout_height="match_parent"
                android:orientation="vertical">

                <LinearLayout                    android:id="@+id/linearLayout2"                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:layout_below="@+id/aaa"                    android:orientation="horizontal"                    android:weightSum="1">


                    <ImageView                        android:id="@+id/slide"                        android:layout_width="wrap_content"                        android:layout_height="match_parent"                        android:layout_marginTop="5dp"                        android:clickable="true"                        android:onClick="toggle_contents"                        android:src="@drawable/ic_add"                        android:tint="@color/colorWhite" />
                    <!--Student Details-->
                    <LinearLayout                        android:layout_width="match_parent"                        android:layout_height="match_parent"                        android:layout_gravity="center"                        android:layout_weight="1"                        android:orientation="horizontal">

                        <TextView                            style="@style/title"                            android:layout_width="match_parent"                            android:layout_height="wrap_content"                            android:layout_gravity="center"                            android:layout_marginTop="5dp"
                            android:text="Student Details"                            android:textSize="22dp" />
                    </LinearLayout>

                </LinearLayout>

                <LinearLayout                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:orientation="horizontal">

                    <View                        android:layout_width="match_parent"                        android:layout_height="2dp"                        android:layout_marginTop="5dp"                        android:background="@color/colorWhite" />


                </LinearLayout>

                <LinearLayout                    android:id="@+id/Linear_ex"                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:focusable="true"                    android:focusableInTouchMode="true"                    android:orientation="vertical">

                    <LinearLayout                        android:layout_width="match_parent"                        android:layout_height="match_parent"                        android:layout_gravity="center"                        android:layout_marginLeft="10dp"                        android:layout_marginTop="10dp"                        android:gravity="center|start"                        android:orientation="horizontal"                        android:weightSum="3">

                        <LinearLayout                            android:layout_width="match_parent"                            android:layout_height="match_parent"                            android:layout_marginLeft="15dp"                            android:layout_weight="0.9"                            android:orientation="horizontal">


                            <TextView                                android:layout_width="wrap_content"                                android:layout_height="wrap_content"                                android:layout_gravity="center"
                                android:text="Student Image :"                                android:textColor="@color/colorWhite"                                android:textSize="20dp" />
                        </LinearLayout>

                        <LinearLayout                            android:layout_width="match_parent"                            android:layout_height="match_parent"                            android:layout_weight="1.2">


                            <ImageView                                android:layout_width="86dp"                                android:layout_height="86dp"
                                android:src="@drawable/person" />

                        </LinearLayout>

                        <LinearLayout                            android:layout_width="match_parent"                            android:layout_height="match_parent"                            android:layout_weight="1.2"                            android:gravity="center">


                            <ImageView                                android:layout_width="wrap_content"                                android:layout_height="wrap_content"                                android:layout_marginLeft="30dp"                                android:src="@drawable/camera"                                android:tint="@color/colorWhite" />


                        </LinearLayout>

                    </LinearLayout>


                    <LinearLayout                        android:id="@+id/linearLayout33"                        android:layout_width="match_parent"                        android:layout_height="match_parent"                        android:layout_marginRight="10dp"                        android:orientation="horizontal"                        android:weightSum="2">

                        <!--Student Name-->                        <LinearLayout                            android:layout_width="match_parent"                            android:layout_height="match_parent"                            android:layout_marginLeft="20dp"                            android:layout_weight="1.2"                            android:orientation="horizontal">

                            <TextView                                style="@style/title"                                android:layout_width="match_parent"                                android:layout_height="43dp"                                android:layout_marginTop="5dp"                                android:gravity="center"                                android:text="Student Name:"                                android:textSize="20dp" />
                        </LinearLayout>

                        <LinearLayout                            android:layout_width="match_parent"                            android:layout_height="match_parent"                            android:layout_weight="0.8"                            android:orientation="horizontal">

                            <EditText                                style="@style/edittext"                                android:layout_width="match_parent"                                android:layout_height="43dp"                                android:layout_marginTop="5dp"                                android:inputType="text"                                android:textSize="20dp" />
                        </LinearLayout>

                    </LinearLayout>

                    <LinearLayout                        android:id="@+id/linearLayout5"                        android:layout_width="match_parent"                        android:layout_height="match_parent"                        android:layout_below="@+id/aaa"                        android:layout_marginRight="10dp"                        android:orientation="horizontal"                        android:weightSum="2">

                        <!--Student Name-->                        <LinearLayout                            android:layout_width="match_parent"                            android:layout_height="match_parent"                            android:layout_weight="1.2"                            android:orientation="horizontal">

                            <TextView                                style="@style/title"                                android:layout_width="match_parent"                                android:layout_height="43dp"                                android:layout_marginTop="5dp"                                android:gravity="center"                                android:text="Date of Birth:"                                android:textSize="20dp" />
                        </LinearLayout>

                        <LinearLayout                            android:layout_width="match_parent"                            android:layout_height="match_parent"                            android:layout_weight="0.8"                            android:orientation="horizontal">

                            <EditText                                android:id="@+id/et_date"                                style="@style/edittext"                                android:layout_width="match_parent"                                android:layout_height="43dp"                                android:layout_marginTop="5dp"                                android:clickable="true"                                android:focusable="false"                                android:inputType="text"                                android:textSize="20dp" />
                        </LinearLayout>

                    </LinearLayout>

                    <LinearLayout                        android:id="@+id/linearLayout7"                        android:layout_width="match_parent"                        android:layout_height="match_parent"                        android:layout_marginLeft="10dp"                        android:layout_marginRight="10dp"                        android:orientation="horizontal"                        android:weightSum="5">

                        <LinearLayout                            android:layout_width="match_parent"                            android:layout_height="match_parent"                            android:layout_weight="0.8"                            android:orientation="horizontal">

                            <TextView                                style="@style/title"                                android:layout_width="match_parent"                                android:layout_height="43dp"                                android:layout_marginRight="30dp"                                android:layout_marginTop="5dp"                                android:gravity="center"                                android:text="Gender   :"                                android:textSize="20dp" />
                        </LinearLayout>

                        <LinearLayout                            android:layout_width="match_parent"                            android:layout_height="match_parent"                            android:layout_marginTop="5dp"                            android:layout_weight="1.1"
                            android:orientation="horizontal">

                            <ImageView                                android:layout_width="wrap_content"                                android:layout_height="wrap_content"                                android:src="@drawable/male"                                android:tint="@color/colorAccent" />
                        </LinearLayout>

                        <LinearLayout                            android:layout_width="match_parent"                            android:layout_height="match_parent"                            android:layout_marginTop="5dp"
                            android:layout_weight="1.1"                            android:orientation="horizontal">

                            <ImageView                                android:layout_width="wrap_content"                                android:layout_height="wrap_content"                                android:src="@drawable/female"                                android:tint="@color/colorAccent" />
                        </LinearLayout>

                        <LinearLayout                            android:layout_width="match_parent"                            android:layout_height="match_parent"                            android:layout_marginLeft="30dp"                            android:layout_marginTop="5dp"                            android:layout_weight="0.9"                            android:orientation="horizontal">

                            <TextView                                android:layout_width="wrap_content"                                android:layout_height="match_parent"                                android:layout_gravity="center"                                android:gravity="center"                                android:text="Roll NO:"                                android:textColor="@color/colorWhite"                                android:textSize="18dp" />
                        </LinearLayout>

                        <LinearLayout                            android:layout_width="match_parent"                            android:layout_height="match_parent"                            android:layout_marginTop="5dp"                            android:layout_weight="1"                            android:orientation="horizontal">

                            <EditText                                style="@style/edittext"                                android:layout_width="match_parent"                                android:layout_height="43dp"                                android:inputType="number" />
                        </LinearLayout>
                    </LinearLayout>





                </LinearLayout>
            </LinearLayout>




        </LinearLayout>
    </ScrollView>
</LinearLayout>




Step3: And Create Java file

Main.Java


package com.markteq.smarttutionapp;

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.ImageView;
import android.widget.LinearLayout;

public class expend extends AppCompatActivity {


    LinearLayout Expend;
    ImageView slide;
    Animation animationUp;
    Animation animationDown;

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


        Expend = (LinearLayout) findViewById(R.id.Linear_ex);
        slide = (ImageView) findViewById(R.id.slide);
        Expend.setVisibility(View.VISIBLE);

        animationUp = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.collapse);
        animationDown = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.Expand);


        slide.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
                if (Expend.isShown()) {
                    Expend.setVisibility(View.GONE);
                    Expend.startAnimation(animationUp);
                } else {
                    Expend.setVisibility(View.VISIBLE);
                    Expend.startAnimation(animationDown);
                }
            }
        });

    }
}




0 comments: