Tuesday, May 25, 2010

Wheel UI contol

Have you ever seen the iPhone date time picker?

Next is the corresponding Android control

Poor design...

But, fortunately, there is an ability to create own UI controls. So I decided to implement this one.


Actually, this time picker is a sample activity that uses my control called NumericWheel.
XML Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_height
="wrap_content"
     android:layout_gravity="center_horizontal"
     android:layout_width="fill_parent"
     android:paddingLeft="12dp"
     android:paddingRight="12dp"
     android:paddingTop="4dp"
     android:background="@drawable/layout_bg">

     <test.android.ui.NumericWheel android:id="@+id/hour"
          android:layout_height="wrap_content"
          android:layout_width="fill_parent"
          android:layout_weight="1"/>
     <test.android.ui.NumericWheel android:id="@+id/mins"
          android:layout_height="wrap_content"
          android:layout_width="fill_parent"
          android:layout_weight="1"/>
</LinearLayout>

Activity code:
public class TimeActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.time_layout);

        NumericWheel hours = (NumericWheel) findViewById(R.id.hour);
        hours.setMaxValue(23);
        hours.setCaption("hour");

        NumericWheel mins = (NumericWheel) findViewById(R.id.mins);
        mins.setMaxValue(59);
        mins.setCaption("mins");

        Calendar c = Calendar.getInstance();
        mins.setValue(c.get(Calendar.MINUTE));
        hours.setValue(c.get(Calendar.HOUR_OF_DAY));
    }
}

It is possible also to use the wheel control, for example, to enter PIN code or something like that:
Here are used four wheel controls.

It is a very interesting theme, and in next topics I'll describe functionality of  the wheel control and how to implement and improve it

See also
    The Wheel control layouts
    The Wheel control backgrounds
    Scrolling the wheel control
    Ideas for the future

49 comments:

  1. Hello,

    It really looks cool.
    How does it perform ?

    regards
    Michael

    ReplyDelete
  2. Hi,

    It uses StaticLayout to render text (like TextView) and gradient backgrounds to look nice.

    In next topic I'll describe that in details.

    Thanks,
    Yuriy

    ReplyDelete
  3. Hi there,

    I'm quite interested in incorporating your wheel picker in to (amateur) my Android project. Just wondering how I would go about importing your APK in to the project?

    Regards,
    Kenneth

    ReplyDelete
  4. Hello guys...

    I owe to say you that you've done an amazing job..

    I'd like to use your project in my android application.
    I want to use the "cities" example, but the problem is this:

    I want to have two lists.
    At the left List(for example) i want to have the continents (Europe, America, Asia etc). According to the first selection, i would like some countries from these continents to be shown on the right list.(like an ajax example on the web).

    An example is:
    "If I choose America from the left list then United States, Canada, Mexico etc to be shown at the right list"

    Is it possible?
    I would appreciate if someone can help me on my issue...

    Any advice can be useful..
    Thanks in advance..

    ReplyDelete
  5. Hi Kenneth,

    Sorry for the late response, your message was detected as a spam, so I've seen it after review all tabs in the blog settings.

    About your question: the APK is just an example how to use the Wheel control.
    You can use wheel and demo sources from your app - now they are under Apache license.

    Regards,
    Yuriy

    ReplyDelete
  6. Hi protomastoras,

    At this moment there are not implemented wheel events for listening wheel current position changing.
    You can implement this functionality (it's easy) or wait until I do that.

    About other parts of your app: you can create activity with two wheels, like demo TimeActivity; fill the first wheel by continents, and keep the second one empty. It needs to subscribe to first wheel changing events (that is not implemented yet), and fill and repaint the second wheel in listener code.

    Hope it will help you. Let me know if you have any questions.

    Regards,
    Yuriy

    ReplyDelete
  7. Hi! I would like to say that this widget is cool. I would like to use it for my android project. But they are apache licensed. Is it not allowed?

    ReplyDelete
  8. Hi Mark!
    The Apache license allows you to use sources of this project for your needs, even for commercial projects.
    Next link may help you: http://stackoverflow.com/questions/1007338/can-i-use-apache-software-license-2-0-lib-in-commercial-application

    ReplyDelete
  9. wow.. That's great. But where will I include the copy of the Apache license? Sorry for being so ignorant. Thank's for this cool widget by the way.

    ReplyDelete
  10. Actually, I don't know where it should be. May be it is enough to just add it to resources.

    ReplyDelete
  11. Hi kankan,
    It's a great work for this Wheel project. But I have a question from the beginning. Why dont u use ListView to implement this Wheel UI?

    ReplyDelete
  12. Hi Anonymous,

    Because ListView has the different behavior. The main thing that can be used from ListView is a storage for Wheel items, but it is so suboptimally to use it only for this need.
    For example, it needs to disable item selection feature, disable scrolling to use our one; so, at finish there will be used a little part of ListView.

    The main more reason: it is difficult to adapt the ListView for our needs. Because it provides a lot of unnecessary things that should be disabled.

    The Wheel control is simpler and requires much less resources. Animation (scrolling) is in progress; it is planned also to add custom views for items.

    ReplyDelete
  13. Hi,
    First off: Great work! I wish this were a standard widget.

    2nd: noob question: I have a switch that updates the WheelView with a new ArrayWheelAdapter (with a new list) and a new label. The view doesn't re-calc the widths and I get text wrapping issues.

    ReplyDelete
  14. Hi Anonymous,

    It is a bug :) It will be fixed soon.
    As a workaround you can manually call methods to re-calc the wheel width, for example View.measure(int, int).

    ReplyDelete
  15. Hi kankan, sorry but i can't find how download source code of your ui control. Can you help me

    ReplyDelete
  16. Hikankan,

    First of all great work! Congratulations!

    I checked your example .apk and I would like to ask you about the permissions. Why does it need to have "modify/delete SD card contents" and "read phone state and identity". Especially the second one.

    ReplyDelete
  17. Great work and really cool design!
    Thanks a lot, really really like it :)
    Performs very well on HTC Desire.

    Hm... can you propose it to be a standard widget in Androids bugs section? If you want to do it, ofc.

    ReplyDelete
  18. Hi axel,

    Actually I dont know why it requires these permissions - there are used only default ones :)

    ReplyDelete
  19. Hi MerlinBG,

    Thank you :)
    Great idea. I'll do that as soon as the wheel will be finished.

    ReplyDelete
  20. Hi kanan,

    Have you tried integrating the wheels into ScrollView, and if you did, do you have an example of it. I tried to do it and the whells won't turn :(

    Thank you
    Evgeny

    ReplyDelete
  21. Hi Yevgeny,

    Please take a look at http://android-devblog.blogspot.com/2011/01/scrolling-inside-scrollview.html

    ReplyDelete
  22. Hi kankan,

    Thank you very much for the quick reply, it works now!

    Best,
    Evgeny

    ReplyDelete
  23. 1. How can the alignment of the Text be changed from Center to Left?

    2. If a string is too long, it currently 'wraps'. Is there a way to 'truncate' the text through the Control? Or, should the text be truncated before the ArrayWheelAdapter is set?

    ReplyDelete
  24. Anonymous,

    Please wait for custom item views feature that will be done soon. You will be able to customize wheel items, so it will be possible to set the text alignment and the ellipsize property for truncating.

    ReplyDelete
  25. If you don't mind, I'll be using it as well for my application. Promise to keep the license intact :-).

    This is a spectacular replacement for the time picker.

    ReplyDelete
  26. How do I go about using it in my own project in eclipse

    ReplyDelete
  27. Info regarding eclipse (see above): Description Resource Path Location Type
    R cannot be resolved to a variable WheelView.java /Autostatus/wheel_src/kankan/wheel/widget line 427 Java Problem

    I get this when referecing wheel/src from my project

    ReplyDelete
  28. Manage to get it running in eclips creating a jar file but now the background for the control is random textures

    ReplyDelete
  29. Now it is a library. Please look at this topic how to use it:
    http://developer.android.com/intl/zh-CN/guide/developing/eclipse-adt.html#libraryReference

    ReplyDelete
  30. Excellent help. Thanks alot!

    ReplyDelete
  31. Hi Kankan,

    Firstly, like many others, I want to thank you for your work and congratulate you on an excellent widget and demo! It works very well on the HTC Desire and so has inspired me on to include it in the development of my own first (and very simple) app.

    I do have a question about the wheel background. I couldn't deduce from previous posts how the gradient shading works. It seems there are two drawn gradients (WheelView.java) but I am struggling to understand how they affect the display. Specifically: Why are there three colour ints in the SHADOW_COLORS array? How do they apply to the background? And where are the two gradients drawn?

    I've been playing around for a few days but still haven't been able to figure it out. Where I'm coming from is that I want to have the same visual effect similar as the gorgeous HTC Sense UI date/time pickers, rather than the iPhone one. Let me know if you would like a screenshot, or you can google image search and there are a good example. Assuming I crack it, I shall let you have the colour values if you would like.

    BTW, I'm a C/C++ guy and this is my first dip into Android/Java, so if you could be gentle that would be appreciated. :-)

    With best regards.

    Rob.

    ReplyDelete
  32. Hi Rob,

    There are used 3 "layers":
    1. Wheel background - dark/light/dark gradient
    2. Wheel items
    3. Wheel up/down shadows - transparent_light/dark gradient for "shading" top/bottom items since those are drawn over first layer. In this case it keeps wheel visual effect for looking darkened on top and bottom.

    There are used 3 colors for shadows for make those some smoothly. I've added the middle color to use it for setting up the shadows. In general it can be removed.

    I've seen the HTC pickers and I'd like to use also this theme. It's planned to be added skins/themes for wheel for customizing backgrounds, colors etc.
    Yes, could you please provide color values for HTC wheels?

    Thanks,
    Yuriy

    ReplyDelete
  33. Hi Yuriy,

    Many thanks for your reply - that helps. I don't have the HTC colours but will keep plugging away at fine-tuning the code for my app to try to simulate them. If I get something close, I'll be sure to share with you my findings and code. In the meantime, thanks again and please keep up the good work!

    Many thanks.

    Rob.

    P.S.
    I hear HTC have released their kernel code. Perhaps one day they will release the Sense UI code too.

    ReplyDelete
  34. This comment has been removed by the author.

    ReplyDelete
  35. guyz u can take this code from here...........

    http://code.google.com/p/android-wheel/

    ReplyDelete
  36. very nice example code.carry on boss.

    *** Get Your FREE FACEBOOK T-Shirt, Register Now http://goo.gl/w3by4 ***

    ReplyDelete
  37. Hi kankan How can i increase the size of month value.Suppose You set month view 15 dip.I want increase 25 dip.Can you please help me

    ReplyDelete
  38. Hi NumericWheel class is present in which package i am getting error to create NumericWheel class

    ReplyDelete
  39. I want to use your wheels application like a casino quarter roller with a start and stop button. Instead of numbers I would want to load names. Is this possible to do?

    ReplyDelete
  40. Hi... it's an excellent app but when I download it's code and try to run it, it gives errors. As in the app doesn't run. First it had issues with SDK version. I changed that. Now it says" App stopped" and doesnot give any errors... please help

    ReplyDelete
  41. this is an amazing app. i want to use this code for my project. how can i get this code? please guide as i am a new android developer.

    ReplyDelete
  42. Hi, kankan i am trying to develope my own wheel with support of your code, but i can't find a way how you used your NumericWheel class. Can u tell me what your NumericWheel class is and how it is coded??

    ReplyDelete
  43. I would like to pack the wheel library as a jar file and add it to the project. How should I pack it?

    If I simply pack the compiled classes into jar I get the exception: java.lang.NoClassDefFoundError: kankan.wheel.R$drawable

    although The kankan.wheel.R$drawable is actually in the jar file.

    ReplyDelete
  44. Hi...
    wheel is working fine.But I want to ask what will happen if the text can not be fit in single line. Because in second line it will treat it as a new Item which we don't want. So what we should do if this happen??

    ReplyDelete
  45. Hello Sir,
    May i know how you set text or caption hour and min in code on which class,
    i am unable to find any setCaption method in NumericWheel class
    thank you

    regard
    nitin
    nitin.gupta0805@gmail.com

    ReplyDelete
  46. HELLO SIR, I WANT iPhone date time picker SAME IN ANDROID PICKER CODE
    IPHONE DATE TIME PICKER SAME AS IN ANDROID
    PLEASE SEND ME CODE mayank.langalia@live.com

    ReplyDelete
  47. Nice article. I think it is useful and unique article. I love this kind of article and this kind of blog. I have enjoyed it very much. Thanks for your website.
    TLR Carbon wheels

    ReplyDelete
  48. Craig Willows-Keetley shares the story of his journey to compete in the half Ironman length Challenge event in Phuket. Craig shares his training program, details of the race and lessons he learnt from the event. Hear his story about the Challenge event that’s a Challenge and a half!.
    Carbon bike wheels

    ReplyDelete