Simple Android Coding

Updated: 08 April 2013

Tested in:
HTC desire S (android 2.3.5), Samsung Galaxy Tab P3100 (android 4.0.4)

Base on:
Eclipse Indigo build in 20120216-1857, Java 1.6, Android 4.1.2

Download Source code:
DemoFlipAnimation20130408.rar

Description:
Show/hide 2 layouts with flip animation

Screen shot:

Tutorial:
1. Add 2 files to your project
     AnimationFactory.java
     FlipAnimation.java

2. Create xml file for UI using ViewFlipper

<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"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:background="#ff000000"

    tools:context=".DemoFlipAnimation" >



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:textColor="#ffffffff"

        android:text="@string/hello_world"

        android:layout_marginBottom="5dp"

        />

    <TextView

        android:id="@+id/textIntro"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:textColor="#ffffffff"

        android:text="Click to the image below"

        android:layout_marginBottom="5dp"

        />

   

    <ViewFlipper

        android:id="@+id/viewFlipper"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:layout_marginBottom="20dp"

        android:addStatesFromChildren="true"

        android:layout_below="@id/textIntro"

        android:layout_marginTop="10dp"

        >

        <RelativeLayout

            android:id="@+id/layout1"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            >

            <TextView

                android:id="@+id/text1"

                android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:text="Layout 1 - Firefox"

        android:textColor="#ffffffff"

                />

            <ImageView

                android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@drawable/firefox"

        android:background="@null"

        android:layout_centerHorizontal="true"

        android:layout_below="@id/text1"

        android:layout_marginTop="5dp"

                />

        </RelativeLayout>

        <RelativeLayout

            android:id="@+id/layout2"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            >

            <TextView

                android:id="@+id/text2"

                android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:text="Layout 2 - Internet Explorer"

        android:textColor="#ffffffff"

                />

            <ImageView

                android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@drawable/ie"

        android:background="@null"

        android:layout_centerHorizontal="true"

        android:layout_below="@id/text2"

        android:layout_marginTop="5dp"

                />

        </RelativeLayout>

    </ViewFlipper>

</RelativeLayout>

3. Call the transition with flip animation

AnimationFactory.flipTransition(viewAnimator, FlipDirection.LEFT_RIGHT);

References:
n/a