Android Simple FlashCard with ViewFlipper

Posted: 31/03/2013 in Android
Thẻ:,

http://blog.kerul.net/2011/07/viewflipper-examplea-simple-flashcard.html

 

UPDATE: Improved with Fling gesture (Sept 2012)

UPDATE: ViewFlipper with Flip-In and Flip-Out Animation (August 2012)

This tutorial is to demonstrate the ViewFlipper layout that is almost similar to CardLayout (in Java). The app will produce a simple Flash card that provide several screens with different picture for each card. Flip-in and Flip-out animation provided.

Added in Sept 2012 – an improvement to support Fling gesture – enjoy… The amendment is only on the coding part.

Some how the layout design (main.xml) is quite long. Later I’ll produce separated screen by including several XML layout from outside files.

Screenshots;

ViewFlipper of Simple FlashCard apps with Flip AnimationViewFlipper of Simple FlashCard apps with Flip AnimationViewFlipper of Simple FlashCard apps with Flip Animation

/layout/main.xml;

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout android:id="@+id/LinearLayout01"
android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_height="fill_parent"
android:background="@drawable/smalldroid">
<!-- admob here -->
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<com.google.ads.AdView
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:id="@+id/ad"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
ads:adSize="SMART_BANNER"
ads:adUnitId="738a44d913034b9f"
/>
</TableRow>

<!-- header -->
<LinearLayout android:id="@+id/LinearLayout03"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:id="@+id/tvwelcome" android:layout_height="wrap_content"
android:text="Kad Tunjuk" android:layout_gravity="center"
android:layout_width="match_parent"></TextView>
</LinearLayout>

<!-- content -->
<LinearLayout android:id="@+id/LinearLayout02"
android:baselineAligned="false" android:orientation="horizontal"
android:layout_width="match_parent" android:layout_height="wrap_content">

<ViewFlipper android:id="@+id/ViewFlipper01"
android:layout_height="wrap_content" android:layout_width="wrap_content" >
<!-- adding views to ViewFlipper -->

<!-- View 1- Home/ketetapan - card1 -->
<TableLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow>
<TextView android:text="HOME"
android:textColor="#ffffff"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</TableRow>
<TableRow android:layout_width="match_parent">
<ImageView android:layout_width="wrap_content"
android:id="@+id/imageView1" android:layout_height="wrap_content"
android:src="@drawable/icon"></ImageView>
</TableRow>
<TableRow>
<TextView android:text="FLASHCARD ringkas"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>

<!-- View 2 - A - card2-->
<TableLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow>
<TextView android:text="HURUF A"
android:textColor="#ffffff"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</TableRow>
<TableRow>
<ImageView android:layout_width="wrap_content"
android:id="@+id/imageView1" android:layout_height="wrap_content"
android:src="@drawable/arnab"></ImageView>
</TableRow>
<TableRow>
<TextView android:text="ARNAB"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>

<!-- View 3 - K - card3-->
<TableLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow>
<TextView android:text="HURUF K"
android:textColor="#ffffff"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</TableRow>
<TableRow>
<ImageView android:layout_width="wrap_content"
android:id="@+id/imageView1" android:layout_height="wrap_content"
android:src="@drawable/kereta"></ImageView>
</TableRow>
<TableRow>
<TextView android:text="KERETA LUMBA"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>

</ViewFlipper>

</LinearLayout>

<!-- footer -->
<LinearLayout android:id="@+id/LinearLayout03"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="horizontal" android:layout_gravity="center">
<Button android:id="@+id/Button02" android:layout_height="wrap_content"
android:text="&lt;Previous" android:layout_width="wrap_content"
android:layout_gravity="center"></Button>
<Button android:id="@+id/ButtonHome" android:text=" Home "
android:layout_height="match_parent" android:layout_width="wrap_content"
android:layout_gravity="center"></Button>
<Button android:id="@+id/Button01" android:text=" Next&gt;"
android:layout_height="match_parent" android:layout_width="wrap_content"
android:layout_gravity="center"></Button>
</LinearLayout>

</LinearLayout>

Notice that each card is represented as a TableLayout in the ViewFlipper (ID=ViewFlipper01). inside the TableLayout there are one ImageView and two TextViews. The three buttons (Previous, Home and Next) are situated in another LinearLayout marked as footer.

There are additionals XML file you need to create. These files are needed as the animation setting. Start by creating a new folder in res, named anim – /res/anim

/res/anim/flipinnext.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<translate
android:fromXDelta="-100%"
android:toXDelta="0%"
android:duration="500" />
</set>

/res/anim/flipoutnext.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<translate
android:fromXDelta="0%"
android:toXDelta="100%"
android:duration="500" />
</set>

/res/anim/flipinprevious.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<translate
android:fromXDelta="100%"
android:toXDelta="0%"
android:duration="500" />
</set>

/res/anim/flipoutprevious.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<translate
android:fromXDelta="0%"
android:toXDelta="-100%"
android:duration="500" />
</set>

 

Java Sourcecode; the project name is Flashcard2…

 


package net.kerul.Flashcard2;
 
//No animation on card transition
import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector.OnGestureListener;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.Toast;
import android.widget.ViewFlipper;
 
import com.google.ads.AdRequest;
import com.google.ads.AdView;
 
public class Flashcard2Activity extends Activity implements OnClickListener, OnGestureListener {
    protected GestureDetector gestureScanner;
    private static final int SWIPE_MIN_DISTANCE = 120;
    private static final int SWIPE_MAX_OFF_PATH = 250;
    private static final int SWIPE_THRESHOLD_VELOCITY = 200;
 
    private Button next,previous;
    private AdView adView;
    //private ViewFlipper vf;
    //declaration for animation items
//    private ViewFlipper vf=(ViewFlipper)findViewById(R.id.ViewFlipper01);
//    private Animation animFlipInNext = AnimationUtils.loadAnimation(this, R.anim.flipinnext);
//    private Animation animFlipOutNext = AnimationUtils.loadAnimation(this, R.anim.flipoutnext);
//    private Animation animFlipInPrevious = AnimationUtils.loadAnimation(this, R.anim.flipinprevious);
//    private Animation animFlipOutPrevious = AnimationUtils.loadAnimation(this, R.anim.flipoutprevious);
 
    private ViewFlipper vf;
    private Animation animFlipInNext,animFlipOutNext, animFlipInPrevious, animFlipOutPrevious;
 
 
    /** Called when the activity is first created. */
    @SuppressWarnings("deprecation")
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        gestureScanner = new GestureDetector(this);
 
        //vf for viewflipper
        vf=(ViewFlipper)findViewById(R.id.ViewFlipper01);
        animFlipInNext = AnimationUtils.loadAnimation(this, R.anim.flipinnext);
        animFlipOutNext = AnimationUtils.loadAnimation(this, R.anim.flipoutnext);
        animFlipInPrevious = AnimationUtils.loadAnimation(this, R.anim.flipinprevious);
        animFlipOutPrevious = AnimationUtils.loadAnimation(this, R.anim.flipoutprevious);
 
        //admob widget - private AdView adView;
        adView = (AdView)findViewById(R.id.ad);
        adView.loadAd(new AdRequest());
 
        next = (Button) findViewById(R.id.Button01);
        previous = (Button) findViewById(R.id.Button02);
        next.setOnClickListener(this);
        previous.setOnClickListener(this);
    }
 
    //@Override
    public void onClick(View v) {
        if (v == next) {
            vf.setInAnimation(animFlipInNext);
            vf.setOutAnimation(animFlipOutNext);
            vf.showNext();
        }
        if (v == previous) {
            vf.setInAnimation(animFlipInPrevious);
            vf.setOutAnimation(animFlipOutPrevious);
            vf.showPrevious();
        }
    }
    //this is the part to handle Gesture Listener
    @Override
    public boolean onTouchEvent(MotionEvent me){
        return gestureScanner.onTouchEvent(me);
    }
    public boolean onDown(MotionEvent e){
        return true;
    }
    //FLING gesture listener
    public boolean onFling(MotionEvent e1,MotionEvent e2,float velocityX,float velocityY){
        try {
            if(e1.getX() > e2.getX() && Math.abs(e1.getX() - e2.getX()) > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                Toast.makeText(this.getApplicationContext(), "Left", Toast.LENGTH_SHORT).show();
                vf.setInAnimation(animFlipInPrevious);
                vf.setOutAnimation(animFlipOutPrevious);
                vf.showPrevious();
            }else if (e1.getX() < e2.getX() && e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                Toast.makeText(this.getApplicationContext(), "Right", Toast.LENGTH_SHORT).show();
                vf.setInAnimation(animFlipInNext);
                vf.setOutAnimation(animFlipOutNext);
                vf.showNext();
            }
        } catch (Exception e) {
            // nothing
        }
        return true;
 
    }
 
    public boolean onScroll(MotionEvent e1,MotionEvent e2,float distanceX,float distanceY){
        return true;
    }
    public void onLongPress(MotionEvent e){}
    public void onShowPress(MotionEvent e){}
    public boolean onSingleTapUp(MotionEvent e){ return true;}
}

Images;

All images are situated in the /res/drawable-mdpi

ViewFlipper Example–a simple FlashCard - images

Complete project download;

You will find all source codes and images in the file, not to forget the Flashcard2.apk .Available for download here… (MS Skydrive – http://sdrv.ms/Q4LsXP) or (Google Drive – https://docs.google.com/open?id=0B34ZxOOoeSDdMVFiejVDY3ZxdWs)

 

Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s