Skip to main content

ViewFlipper Example–a simple FlashCard

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)


All d best for your experiment…

Comments

  1. thanks for the sample UI layout tip

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. No problem, bro... Glad to help. One of my active project...

    ReplyDelete
  4. Superb sample.. good wrk bro :)

    ReplyDelete
  5. Hello D Rahman,

    My daughter is doing a tech fair and would like to use your example / tutorial for the basis of her programing project. Could we have your permission.

    ReplyDelete
  6. fine thanks but how to work with list with onitemselection

    ReplyDelete
  7. Its very helpful to me.
    But How to work with list items election for restaurent app

    ReplyDelete
  8. its gud, but here //admob widget - private AdView adView is not def ined properly. so it showing error. pleaqse check and some one help me.

    ReplyDelete
    Replies
    1. Not sure where's the error, pls check the code here... http://sdrv.ms/QvZeXn

      Delete
    2. Wondering what's the error, maybe u could share it with us...

      Delete
    3. yeah... i'll try this example( http://sdrv.ms/QvZeXn).
      soon i'll tell whether i can work properly with that or not !

      Delete
  9. thx brother , it's very simple . easy to understand .

    ReplyDelete
  10. Great example ! It was very useful for me.
    But, are animations in the right direction?

    ReplyDelete
  11. thank you,it is a nice example

    ReplyDelete
  12. This is a great tutorial thanks Mr Rahman. One question though; If I want to add an Audio to each image (screen) like an ABC Flashcards is this possible and if so, can you give us an exmaple please? Thanks

    Ali

    ReplyDelete
  13. That's a very good example brother and I have already downloaded but there is one problem and I need a little help with if you don't mind...I want each Audio to start 'Auto' without needing to press the play button and when hit next-button I want the current Audio (0) to stop and start the next audio (1) without the need to press the play button again to stop it. Please help am new Android and Java. Thanks. Ali

    ReplyDelete
  14. That's a very good example brother and I have already downloaded but there is one problem and I need a little help with if you don't mind...I want each Audio to start 'Auto' without needing to press the play button (if possible) and when press next-button I want the current Audio (0) to stop and start the next audio (1) without the need to press the play button again to stop it. Please help am new Android and Java. Thanks. Ali

    ReplyDelete
    Replies
    1. Whisking u all the best in learning android...

      Delete
  15. hello mr kerul
    ım from turkey
    your product is very nice.
    but there is error message
    Flashcard2' is missing required library: 'C:\android-juno\workspace\Flashcard2\libs\GoogleAdMobAdsSdk-6.1.0.jar' Flashcard2 Build path Build Path Problem

    thanks a lot

    ReplyDelete
    Replies
    1. I have prepared a simple tutorial for u to install the AdMob library. Pls go to this articel -> http://blog.kerul.net/2013/03/installing-admob-6-library-into-android.html

      Delete

Post a Comment

Popular posts from this blog

Several English proverbs and the Malay pair

Or you could download here for the Malay proverbs app – https://play.google.com/store/apps/details?id=net.kerul.peribahasa English proverbs and the Malay pair Corpus Reference: Amir Muslim, 2009. Peribahasa dan ungkapan Inggeris-Melayu. DBP, Kuala Lumpur http://books.google.com.my/books/about/Peribahasa_dan_ungkapan_Inggeris_Melayu.html?id=bgwwQwAACAAJ CTRL+F to search Proverbs in English Definition in English Similar Malay Proverbs Definition in Malay 1 Where there is a country, there are people. A country must have people. Ada air adalah ikan. Ada negeri adalah rakyatnya. 2 Dry bread at home is better than roast meat home's the best hujan emas di negeri orang,hujan batu di negeri sendiri Betapa baik pun tempat orang, baik lagi tempat sendiri. 3 There's no accounting for tastes We can't assume that every people have a same feel Kepala sama hitam hati lain-lain. Dalam kehidupan ini, setiap insan berbeza cara, kesukaan, perangai, tabia...

Pemasangan Joomla! 1.7 pada pelayan web komputer anda

Latihan ini akan memasang sistem pengurusan kandungan laman web ke dalam pelayan web yang anda telah pasang sebelum ini . LANGKAH 1: Aktifkan Pelayan Web dan Pangkalan Data Aktifkan XAMPP Control Panel, melalui “ Start->All Programs->ApacheFriends->XAMPP Control Panel ”. Rajah 2.1 Pastikan pelayan web Apache dan pelayan pangkalan data MySQL diaktifkan dengan klik butang START. -> Rajah 2.2

Installing Google AdMob into Android Apps

Previously I wrote on why ads are needed to help maintaining an app. Read the article here http://blog.kerul.net/2011/05/generating-revenue-from-free-mobile.html . ---This is quite an old article. You may find the latest supporting AdMob 6.x in here http://blog.kerul.net/2012/08/example-how-to-install-google-admob-6x.html --- This is quite a long tutorial, there are 3 major steps involved. The experiment is done using Windows 7, Eclipse Helios and AdMob SDK 4.1.0 (which currently is the latest-during time of writing). STEP 1: Get the ads from AdMob.com To display the AdMob ads in your Android mobile apps, you need to register first at the admob.com . After completing the registration, login and Add Site/App. Refer to Figure 1. Figure 1 Choose the desired platform and fill in the details (as in Figure 2). Just put http:// in the Android Package URL if your app is not published in the market yet. And click Continue. Figure 2 Download the AdMob Android SDK, and save the zip fil...

Turn laptop into Wifi hotspot

This article is given such a title so that it could fight for the keyword “Turn laptop into Wifi hotspot”. There are two experiment for this post; I’m trying to use Google AdWords External Tool to look for the right keyword for this article. (This is kind of SEO practice) I’d like to turn my laptop (a DELL Studio 14, Windows 7 Premium, Intel i5 64bit) into a wireless (wifi) hotspot. I’m currently using Maxis Broadband and my wireless router is broken. To buy a new wireless router will cause a such big hole in my wallet. Why don’t I use my laptop to be a wifi router? Theoretically, it’s possible. I searched and found this free software called Virtual Router (it is a additional software to turn your Windows 7/ 2008 into a wireless router). Virtual Router -  is a free, open source software based router for PCs running Windows 7 or Windows Server 2008 R2. Using Virtual Router, users can wirelessly share any internet connection (Wifi, LAN, Cable Modem, Dial-up, Cellular, etc.) with ...