Home » Android » Android Custom wheel or slot machine implementation

Android Custom wheel or slot machine implementation

Posted by: admin May 14, 2020 Leave a comment


I need to implement a wheel like control (a slot machine) like in the picture.

enter image description here

But the edges (the position between the items) of each item need to be smoothened so that it will look like a globe like the earth. This is a screen shot of iPhone app achieved from a library for iPhone. I want it in android. I checked the kankan wheel (Android wheel) but it does not serves my needs. However it’s cyclic behavior is needed for me. And I checked the following link also.


I played with canvas and matrix with some values for methods pretranslate post translate scale etc. But I haven’t any idea about how it works, what the impact it will do with a specific value for skew etc.
When I discussed with UI designers they told me that to achive this screen design use “skew” or “perspective” property. But I haven’t an idea how to skew or apply perspective to an image in android. I tried to apply some values to skew in the on drawChild() method of the custom list view (used the list view implementation of this link http://developer.sonymobile.com/2010/06/23/android-tutorial-making-your-own-3d-list-part-3/) . But the view became invisible.

I can’t use the scale behaviour of matrix because it will insert gaps between each child views.

I need to know how will implement the following behaviours as well. The needs are

  1. Once the user tries to scroll it will check the threshold and do scroll only if the threshold is higher than a configured threshold.

  2. The items scroll cyclic, in a sense that, after the lastitem the wheel show the first item and so on. If there is only one item, then the wheel should fill with the single item.

  3. Once the view is scrolled all the touch are disabled till the wheel ends.

  4. The wheel should scroll for a specific provided time (to calculate the gift from back end and determine which item should be at the centre of the view.

  5. When we set an item to be selected with setSelected() or setSelection() methods like in kankan wheel demo (Android wheel), the wheel should gradually decelerates to the specified position rather than immediatley stops the wheel to the that position.

How to&Answers:

For the perspective, look at http://developer.android.com/reference/android/graphics/Camera.html

You set the location of the camera, and then get the matrix, and use it to draw the image.It will set the skew, and scale for you.


I dont know how close you are to achieving your goal but you may want to skip using android classes and use a 3d engine like cocos 3d for android. Importing a model and making it clickable in the right spots and all that kind of stuff would be abstracted for you so you dont spend time messing around with other things.


enter image description here

Just try this, keep 6 views 5 as shown in image and one in reserve.
When the view 1 goes out of scope the reserve view came in with the next image & the view 1 became the reserve view similarly you should render the cycle as many times you want.

The width grows while it moves from bottom to center and shrinks when it rolls towards top


Have you seen this? You may be able to adjust it but it’s a starting point at least https://code.google.com/p/android-wheel/

the project has moved to github