Board index » Android Tutorials with Source Code » Novice Tutorials

Skip to content

[Custom Widget] - HandyFlipper: makes everything flip

Basic Tutorials concerning: GUI, Views, Activites, XML, Layouts, Intents, ...
Topic locked

[Custom Widget] - HandyFlipper: makes everything flip

Postby mmin18 » Fri Apr 18, 2008 9:13 am

HandyFlipper is a custom widget inherited from ViewAnimator. Is is first designed to use in my project handyCalc.
Here is a demo to show how it works. (sorry about the color, it's a gif)
Image
Or you can watch the handyCalc video demo in my_submission_is_a_calculator-t1704.html

There is some other widget in android.widget that you can flip, like Spinner, Gallery. In Spinner, you cannot flip if it's child is focusable, like a button in a Spinner.

Now i'll just show you how to use it. you can view the code below or download a package and import in your eclipse to run it yourself: files/handycalc_library_155.zip

It's just a layout file to make it work:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <org.mmin.handycalc.HandyFlipper xmlns:android="http://schemas.android.com/apk/res/android"
  3.         xmlns:handy="http://schemas.android.com/apk/res/org.mmin.handycalc"
  4.         handy:flipHorizontal="true"
  5.         handy:flipVertical="true"
  6.         handy:circle="true"
  7.         handy:motionSpeed="60"
  8.         handy:motionInterval="500"
  9.         handy:motionDistance="60"
  10.         android:layout_width="fill_parent"
  11.         android:layout_height="wrap_content"
  12.         >
  13. <!--
  14.         motionSpeed is the minimum distance(in pixel) between the last ACTION_MOVE and ACTION_UP event
  15.         motionInterval is the maximum milliseconds between ACTION_DOWN and ACTION_UP event
  16.         motionDistance is the minimum distance(in pixel) between ACTION_DOWN and ACTION_UP event
  17. -->
  18.        
  19.         <TextView
  20.                 android:text="1 / 3nflip left|right, up|down"
  21.                 android:textSize="36sp"
  22.                 android:textAlign="center"
  23.                 android:background="#6FFF"
  24.                 android:layout_width="fill_parent"
  25.                 android:layout_height="300px"
  26.                 />
  27.        
  28.         <EditText
  29.                 android:text="2 / 3nthis is a EditText which you cannot flip in Spinner"
  30.                 android:textSize="36sp"
  31.                 android:textAlign="center"
  32.                 android:layout_width="fill_parent"
  33.                 android:layout_height="300px"
  34.                 />
  35.        
  36.         <Button
  37.                 android:text="3 / 3nthis is a Button"
  38.                 android:textSize="36sp"
  39.                 android:textAlign="center"
  40.                 android:layout_width="fill_parent"
  41.                 android:layout_height="300px"
  42.                 />
  43.        
  44. </org.mmin.handycalc.HandyFlipper>
Parsed in 0.004 seconds, using GeSHi 1.0.8.4


Next section I'll show you how to make this custom widget.
Attachments
handyCalc Library.zip
handyCalc library with samples
(21.82 KiB) Downloaded 765 times
HandyFlip.gif
flip demo
(121.43 KiB) Downloaded 703 times
mmin18
Junior Developer
Junior Developer
 
Posts: 20
Joined: Sun Feb 03, 2008 2:33 pm
Location: China
Top
Top

Postby mmin18 » Fri Apr 18, 2008 9:30 am

This is the java class for HandyFlipper. I hide most of the code just leave the most essential methods to make ViewAnimator flipable.

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. package org.mmin.handycalc;
  2.  
  3.  
  4.  
  5. import ...;
  6.  
  7.  
  8.  
  9. public class HandyFlipper extends ViewAnimator {
  10.  
  11.  
  12.  
  13. // To view the full code, download the archive file http://www.anddev.org/files/handycalc_library_155.zip and import it in eclipse.
  14.  
  15.  
  16.  
  17.         MotionEvent motionDown, motionPrev;
  18.  
  19.         boolean motionCanceled;
  20.  
  21.  
  22.  
  23.         @Override
  24.  
  25.         public boolean onInterceptTouchEvent(MotionEvent event) {
  26.  
  27.                 if (event.getAction() == MotionEvent.ACTION_DOWN) {
  28.  
  29.                         motionDown = event;
  30.  
  31.                         motionPrev = event;
  32.  
  33.                         motionCanceled = false;
  34.  
  35.                         // just record the ACTION_DOWN event and return false. the event will dispatch as a normal way.
  36.  
  37.                         return false;
  38.  
  39.                 }
  40.  
  41.                 if (motionCanceled)
  42.  
  43.                         return true; // canceled, then the child no need to process it.
  44.  
  45.                 if (event.getAction() == MotionEvent.ACTION_MOVE) {
  46.  
  47.                         motionPrev = event;
  48.  
  49.                         // just record the ACTION_MOVE event and return false. the event will dispatch as a normal way.
  50.  
  51.                         return false;
  52.  
  53.                 }
  54.  
  55.                 if (event.getAction() == MotionEvent.ACTION_UP) {
  56.  
  57.                         if (motionDown == null || motionPrev == null)
  58.  
  59.                                 return false;
  60.  
  61.                         long time = event.getEventTime() - motionDown.getEventTime();
  62.  
  63.                         if (time > motionInterval)
  64.  
  65.                                 return false;
  66.  
  67.                         // the event's getX will be modify when deliver to child. so use getRawX instead
  68.  
  69.                         float dx = event.getRawX() - motionDown.getRawX();
  70.  
  71.                         float absDx = Math.abs(dx);
  72.  
  73.                         float dy = event.getRawY() - motionDown.getRawY();
  74.  
  75.                         float absDy = Math.abs(dy);
  76.  
  77.                         float abs = Math.max(absDx, absDy);
  78.  
  79.                         if (abs < motionDistance)
  80.  
  81.                                 return false;
  82.  
  83.                         float v = Math.abs(abs) * 1000 / time;
  84.  
  85.                         if (v < motionSpeed) {
  86.  
  87.                                 motionPrev = event;
  88.  
  89.                                 return false;
  90.  
  91.                         } else {
  92.  
  93.                                 // start to flip. if it return true, the child will receive a event with MotionEvent.ACTION_CANCEL instead of MotionEvent.ACTION_UP
  94.  
  95.                                 // so make sure your custom widget will handle MotionEvent.ACTION_CANCEL
  96.  
  97.                                 motionDown = null;
  98.  
  99.                                 motionPrev = null;
  100.  
  101.                                 motionCanceled = true;
  102.  
  103.                                 if (abs == absDx) {
  104.  
  105.                                         if (!flipHorizontal)
  106.  
  107.                                                 return false;
  108.  
  109.                                         if (dx < 0)
  110.  
  111.                                                 return moveRight();
  112.  
  113.                                         else
  114.  
  115.                                                 return moveLeft();
  116.  
  117.                                 } else {
  118.  
  119.                                         if (!flipVertical)
  120.  
  121.                                                 return false;
  122.  
  123.                                         if (dy < 0)
  124.  
  125.                                                 return moveDown();
  126.  
  127.                                         else
  128.  
  129.                                                 return moveUp();
  130.  
  131.                                 }
  132.  
  133.                         }
  134.  
  135.                 } else if (event.getAction() == MotionEvent.ACTION_CANCEL) {
  136.  
  137.                         motionDown = null;
  138.  
  139.                         motionPrev = null;
  140.  
  141.                         return false;
  142.  
  143.                 }
  144.  
  145.                 return false;
  146.  
  147.         }
  148.  
  149.  
  150.  
  151.         @Override
  152.  
  153.         public boolean dispatchTouchEvent(MotionEvent ev) {
  154.  
  155.                 super.dispatchTouchEvent(ev);
  156.  
  157.                 // always return true to tell the parent the event is processed
  158.  
  159.                 return true;
  160.  
  161.         }
  162.  
  163.  
  164.  
  165.         @Override
  166.  
  167.         public boolean onTouchEvent(MotionEvent event) {
  168.  
  169.                 this.onInterceptTouchEvent(event);
  170.  
  171.                 // always return true to tell the parent the event is processed
  172.  
  173.                 return true;
  174.  
  175.         }
  176.  
  177. }
  178.  
  179.  
Parsed in 0.039 seconds, using GeSHi 1.0.8.4


Other codes and resources like attrs and anims can be found in the archive file
mmin18
Junior Developer
Junior Developer
 
Posts: 20
Joined: Sun Feb 03, 2008 2:33 pm
Location: China
Top

Postby andreleitao » Thu Mar 26, 2009 9:45 pm

Nice job mmin18 :D It looks very nice!
I'll test it!

:D
andreleitao
Experienced Developer
Experienced Developer
 
Posts: 70
Joined: Tue Mar 10, 2009 9:56 pm
Location: Recife - Brazil
Top

Postby pcudb0189 » Wed Jun 10, 2009 11:41 am

Hi I download you code

but I have a mistake about the view.ViewInflate
SDK can't be found the view.ViewInflate

Is it the wrong with the different edtion?
pcudb0189
Freshman
Freshman
 
Posts: 4
Joined: Tue Jun 09, 2009 5:12 pm
Top

view.ViewInflate not resolved

Postby genxsol » Tue Aug 11, 2009 2:56 pm

i downloaded the code but there is error view.ViewInflate not resolved
genxsol
Junior Developer
Junior Developer
 
Posts: 11
Joined: Tue Feb 17, 2009 11:24 am
Top

please update the code

Postby genxsol » Tue Aug 11, 2009 3:06 pm

can you please upload your latest code for 1.5
genxsol
Junior Developer
Junior Developer
 
Posts: 11
Joined: Tue Feb 17, 2009 11:24 am
Top
Top

This is garbage ... a waste of time. Does not compile

Postby bennyb » Sat Sep 26, 2009 11:38 pm

Don't waste your time
bennyb
Junior Developer
Junior Developer
 
Posts: 13
Joined: Wed Sep 23, 2009 4:45 pm
Top

HandyCalc

Postby okless » Fri Dec 18, 2009 7:13 pm

Can you pleeeeese resubmit code that will work with latest of 1.5?

Ohad
okless
Freshman
Freshman
 
Posts: 3
Joined: Wed Dec 16, 2009 5:12 pm
Location: USA
Top

Re: [Custom Widget] - HandyFlipper: makes everything flip

Postby phuqm » Mon Jun 28, 2010 5:19 am

I'd like to test too, but I
can't download the zip. custom_widget_-_handyflipper_makes_everything_flip-t1790.html

says:

Forbidden

You don't have permission to access /files/handycalc_library_155.zip on this server.
phuqm
Once Poster
Once Poster
 
Posts: 1
Joined: Mon Jun 28, 2010 5:14 am
Top

Re: [Custom Widget] - HandyFlipper: makes everything flip

Postby Glenghis » Fri Jul 23, 2010 11:59 am

As with the poster above, I am also unable to download the library file with the same problem. Am I correct in assuming that I have to post a certain number of times before I am able to download or is it just a permissions problem on the files folder? Sorry to re-necro this thread but I'm quite sure that TPTB would like to be told if something on the site isn't working.
Glenghis
Freshman
Freshman
 
Posts: 3
Joined: Fri Jul 23, 2010 11:31 am
Top

Re: [Custom Widget] - HandyFlipper: makes everything flip

Postby plusminus » Fri Jul 23, 2010 2:19 pm

Sorry, guys, you had to have 3 posts to download files. Let me know if it is working now.

Best Regards,
Nicolas
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany
Top

Re: [Custom Widget] - HandyFlipper: makes everything flip

Postby Glenghis » Fri Jul 23, 2010 2:44 pm

As this is my 3rd post, I will now try it :P

** Edit **
Nope still not working. I will try and find some topics to reply to (without being a post whore) to increase my post count.
Glenghis
Freshman
Freshman
 
Posts: 3
Joined: Fri Jul 23, 2010 11:31 am
Top
Top
Topic locked

Return to Novice Tutorials

Who is online

Users browsing this forum: No registered users and 7 guests

Board index The team • Delete all board cookies • All times are UTC + 1 hour