Search This Blog

Monday, April 8, 2013

How to animate a layout?

How to animate a LinearLayout to look like a header sliding from right to left?
1. First design a layout file that contains the LinearLayout to which you want to set slide animation.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <fragment
        android:id="@+id/map"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        class="com.google.android.gms.maps.SupportMapFragment" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentTop="true"
        android:background="@drawable/transparent"
        android:gravity="center_vertical"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:layout_alignParentTop="true"
            android:background="@drawable/shape4"
            android:gravity="center_vertical|left"
            android:orientation="horizontal"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="10dp" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/map_small" />

            <TextView
                android:id="@+id/app_header"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/app_name"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#ffffff"
                android:textStyle="bold" />

            <View
                android:layout_width="0dp"
                android:layout_height="1dp"
                android:layout_weight="1" >
            </View>

            <ProgressBar
                android:id="@+id/progressbar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/btn_showlayout"
                android:layout_width="40dp"
                android:layout_height="60dp"
                android:background="@drawable/touch" />

            <Button
                android:id="@+id/btn_hidelayout"
                android:layout_width="40dp"
                android:layout_height="60dp"
                android:background="@drawable/touch" />
        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/lay_holder"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="@drawable/header"
        android:gravity="center_vertical|left"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="10dp" >

        <EditText
            android:id="@+id/txtPlace"
            android:layout_width="150dp"
            android:layout_height="40dp"
            android:background="@drawable/shape1" />

        <Button
            android:id="@+id/btn_find"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@id/txtPlace"
            android:background="@drawable/selector"
            android:paddingBottom="7dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="7dp"
            android:text="@string/str_btn_find"
            android:textColor="#ffffff" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="30dp"
            android:background="@drawable/transparent"
            android:gravity="center_vertical"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/txtDistLbl"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Distance"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:textColor="#ffffff" />

            <TextView
                android:id="@+id/txtDistance"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="__"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:textColor="#ffffff" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/transparent"
        android:gravity="bottom"
        android:orientation="vertical" >

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1" >
        </View>

        <com.google.ads.AdView
            xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
            android:id="@+id/adView"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            ads:adSize="BANNER"
            ads:adUnitId="a15158707aecde1"
            android:gravity="bottom|center_horizontal" />
    </LinearLayout>

    <LinearLayout>
    </LinearLayout>

</RelativeLayout>
Note: Set the visibility of the LinearLayout you want to set animation to 'View.INVISIBLE'.
2. Add the following two methods to your activity class file:
public void animateLayout(){
    AnimationSet set = new AnimationSet(true);
    Animation animation = new AlphaAnimation(0.0f, 1.0f);
    animation.setDuration(250);
    set.addAnimation(animation);
    animation = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 1.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f );
    animation.setDuration(900);
    set.addAnimation(animation);
    LayoutAnimationController controller = new LayoutAnimationController(set, 0.25f);
    holder.setLayoutAnimation(controller);
    holder.startAnimation(animation);
    holder.setVisibility(View.VISIBLE);
}

public void animateLayoutBack(){
    AnimationSet set = new AnimationSet(true);
    Animation animation = new AlphaAnimation(1.0f, 0.0f);
    animation.setDuration(900);
    set.addAnimation(animation);
    animation = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 1.0f, Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f );
     animation.setDuration(1150);
    set.addAnimation(animation);
    LayoutAnimationController controller = new LayoutAnimationController(set, 0.25f);  
    holder.setLayoutAnimation(controller);
    holder.startAnimation(animation);
    holder.setVisibility(View.INVISIBLE); }

3. There will be two buttons set in same positions using relative layouts. When show button is clicked, it is set invisible, the LinearLayout scrolls from right to left and the hide hide button is set visible. Again when the Hide button is clicked, it is set invisible, the LinearLayout scrolls from left to right and is set invisible and the show button is set visible.

The method for performing the click of the two buttons are given below:

@Override public void onClick(View v) {
    if(v == btnShowLayout){
        btnShowLayout.setVisibility(View.INVISIBLE);
        btnHideLayout.setVisibility(View.VISIBLE);
        animateLayout();
    } if(v == btnHideLayout){
            btnShowLayout.setVisibility(View.VISIBLE);
            btnHideLayout.setVisibility(View.INVISIBLE);
            holder.setVisibility(View.INVISIBLE);
            animateLayoutBack(); }
}

Enjoy coding ! :)