Lucky Wheel View

Table of Contents

1. About The Project
2. Jetpack Compose
3. Installation
4. Usage
5. Examples
6. Customization
7. Support
8. Contributing
9. License
10. Contact

About The Project

There are many great Lucky Wheel View available on GitHub; however, I didn't find one that really suited my needs so I created this enhanced one. I want to create a Lucky Wheel View so amazing that it'll be the last one you ever need -- I think this is it.

Here's why:

• Almost all views/elements can be customize
• Almost no need for work on logic, all logic is settle
• Gradient/Solid color views/elements
• Nice and smooth animations
• Almost all events can listenable
• Random or specific target can be set
• Clockwise and counterclockwise rotate direction support
• XML and Jetpack Compose support

Of course, your needs may be different. So I'll be adding more in the near future. You may also suggest changes by forking this repo and creating a pull request or opening an issue. Thanks to all the people have contributed to expanding this library!

Use the Lucky Wheel View to get started.

(back to top)

Jetpack Compose

Lucky Wheel View has Jetpack Compose support. Check Lucky Wheel View Compose to use.

(back to top)

Installation

1. Add it in your root build.gradle at the end of repositories:

  allprojects {
  	repositories {
  		maven { url 'https://jitpack.io' }
  	}
  }

or

dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url 'https://jitpack.io' }
		}
	}

2. Add the dependency

dependencies {
          implementation 'com.github.caneryilmaz52:LuckyWheelView:LATEST_VERSION'
  }

(back to top)

Usage

<com.caneryilmaz.apps.luckywheel.ui.LuckyWheelView
        android:id="@+id/luckyWheelView"
        android:layout_width="350dp"
        android:layout_height="350dp" />

Populate a list of WheelData

text is wheel item text

textColor is color of item text

• if textColor size = 1 then gradient text color disable and text color will be value of textColor[0]
• if textColor size > 1 then gradient text color enable
• if textColor is empty then wheel view is not drawn

backgroundColor is background color of item

• if backgroundColor size = 1 then gradient background color disable and background color will be value of backgroundColor[0]
• if backgroundColor size > 1 then gradient background color enable
• if backgroundColor is empty then wheel view is not drawn

textFontTypeface is custom font typeface of item text

icon is item icon Bitmap, if not null then icon will be drawn

val wheelData = ArrayList<WheelData>()
val item = WheelData(
    text = itemText,
    textColor = intArrayOf(textColor),
    backgroundColor = intArrayOf(backgroundColor),
    textFontTypeface = itemTextFontTypeface,  //optional
    icon = itemIconBitmap //optional
)
wheelData.add(item)

Set data to LuckyWheelView

luckyWheelView.setWheelData(wheelData = wheelData)

Set winner target (default is 0)

luckyWheelView.setTarget(target = 3)

Set RotationCompleteListener listener to LuckyWheelView

luckyWheelView.setRotationCompleteListener { wheelData ->
    // do something with winner wheel data
  }

Set RotationStatusListener listener to LuckyWheelView if you need

luckyWheelView.setRotationStatusListener { status ->
    when (status) {
        RotationStatus.ROTATING -> { // do something
        }

        RotationStatus.IDLE -> { // do something
        }

        RotationStatus.COMPLETED -> { // do something
        }

        RotationStatus.CANCELED -> { // do something
        }
    }
}

Rotate wheel to target

luckyWheelView.rotateWheel()

Examples

(back to top)

Customization

Get the perfect look with customization combinations.

Arrow Customization

• Functions

  
  

  Function	Default	Description
  setArrowPosition(arrowPosition: ArrowPosition)	ArrowPosition.TOP	wheel arrow position ArrowPosition.TOP or ArrowPosition.CENTER
  setArrowAnimationStatus(arrowAnimStatus: Boolean)	true	enable or disable arrow swing animation
  setArrowSwingDuration(arrowSwingDuration: Int)	50ms	single arrow swing animation duration
  setArrowSwingDistance(arrowSwingDistance: Float)	10F	arrow right and left swing distance
  setArrowSwingSlowdownMultiplier(arrowSwingSlowdownMultiplier: Float)	0.1F	arrow swing animation duration slowdown speed The smaller the value, the later it slows down The larger the value, the faster it slows down
  setWheelTopArrow(wheelArrowId: Int)	-	wheel top arrow drawable resource id
  setWheelTopArrow(wheelArrowDrawable: Drawable)	-	wheel top arrow drawable resource
  setWheelTopArrowSize(width: Float, height: Float)	48dp	width and height of wheel top arrow image
  setWheelTopArrowColor(wheelTopArrowColor: Int)	-	wheel top arrow tint color
  setWheelTopArrowMargin(margin: Float)	0dp	wheel top arrow margin from bottom if value is positive then arrow moving up if value is negative then arrow moving down
  setWheelCenterArrow(wheelArrowId: Int)	-	wheel center arrow drawable resource id
  setWheelCenterArrow(wheelArrowDrawable: Drawable)	-	wheel center arrow drawable resource
  setWheelCenterArrowSize(width: Float, height: Float)	30dp	width and height of wheel center arrow image
  setWheelCenterArrowColor(wheelCenterArrowColor: Int)	-	wheel center arrow tint color
  setWheelCenterArrowMargin(marginTop: Float, marginBottom: Float)	0dp	wheel center arrow margin from top and bottom if marginTop value is positive then arrow moving down if marginTop value is negative then arrow moving up if marginBottom value is positive then arrow moving up if marginBottom value is negative then arrow moving down

• Attributes

  
  

  Attribute	Type	Default	Description
  arrowPosition	enum	ArrowPosition.TOP	wheel arrow position ArrowPosition.TOP or ArrowPosition.CENTER
  arrowAnimationEnable	boolean	true	enable or disable arrow swing animation
  arrowSwingDuration	integer	50ms	single arrow swing animation duration
  arrowSwingDistance	float	10F	arrow right and left swing distance
  arrowSwingSlowdownMultiplier	float	0.1F	arrow swing animation duration slowdown speed The smaller the value, the later it slows down The larger the value, the faster it slows down
  wheelTopArrow	drawable	-	wheel top arrow drawable resource id
  wheelTopArrowWidth	dimension	48dp	width of wheel top arrow image
  wheelTopArrowHeight	dimension	48dp	height of wheel top arrow image
  wheelTopArrowColor	color	-	wheel top arrow tint color
  wheelTopArrowMargin	dimension	0dp	wheel top arrow margin from bottom if value is positive then arrow moving up if value is negative then arrow moving down
  wheelCenterArrow	drawable	-	wheel center arrow drawable resource id
  wheelCenterArrowWidth	dimension	30dp	width of wheel center arrow image
  wheelCenterArrowHeight	dimension	30dp	height of wheel center arrow image
  wheelCenterArrowColor	color	-	wheel center arrow tint color
  wheelCenterArrowMarginTop	dimension	0dp	wheel center arrow margin from top if value is positive then arrow moving down if value is negative then arrow moving up
  wheelCenterArrowMarginBottom	dimension	0dp	wheel center arrow margin from bottom if value is positive then arrow moving up if value is negative then arrow moving down

Wheel Center Text Customization

• Functions

  
  

  Function	Default	Description
  setWheelCenterText(wheelCenterText: String)	-	center text value
  setWheelCenterTextColor(wheelCenterTextColor: IntArray)	intArrayOf(Color.BLACK)	color of center text if wheelCenterTextColor size = 1 then gradient text color disable and text color will be value of wheelCenterTextColor[0] if wheelCenterTextColor size > 1 then gradient text color enable if wheelCenterTextColor is empty then gradient text color disable and text color will be Color.BLACK
  setWheelCenterTextSize(wheelCenterTextSize: Int)	16sp	size of center text
  setWheelCenterTextFont(fontResourceId: Int)	Sans Serif	custom font resource id of center text
  setWheelCenterTextFont(typeface: Typeface)	Sans Serif	custom font typeface of center text

• Attributes

  
  

  Attribute	Type	Default	Description
  wheelCenterText	string	-	center text value
  wheelCenterTextColor	color	#000000	color of center text
  wheelCenterTextSize	dimension	16sp	size of center text
  wheelCenterTextFont	reference	Sans Serif	custom font resource id of center text

Wheel Center Image Customization

• Functions

  
  

  Function	Default	Description
  setWheelCenterImage(wheelCenterImageId: Int)	-	wheel center image drawable resource id
  setWheelCenterImage(wheelCenterImageDrawable: Drawable)	-	wheel center image drawable resource
  setWheelCenterImageSize(width: Float, height: Float)	30dp	width and height of wheel center image

• Attributes

  
  

  Attribute	Type	Default	Description
  wheelCenterImage	drawable	-	wheel center image drawable resource id
  wheelCenterImageWidth	dimension	30dp	width of wheel center image
  wheelCenterImageHeight	dimension	30dp	height of wheel center image

Wheel Rotation Customization

• Functions

  
  

  Function	Default	Description
  setTarget(target: Int)	0	index of the item to win target must be between 0 and wheelData last index (exclusive) if target a negative number then target throw IllegalArgumentException if target bigger than given array list last index then throw IndexOutOfBoundsException
  setRotateRandomTarget(rotateRandomTarget: Boolean)	false	enable or disable rotate to random target
  setRandomTargets(randomTargets: IntArray)	intArrayOf()	array of win index if rotateRandomTarget is true and randomTargets is empty then win index will be randomly between 0 and wheelData.latsIndex if rotateRandomTarget is true and randomTargets is not empty then win index will be randomly one of members of randomTargets array
  setRotateDirection(rotationDirection: RotationDirection)	RotationDirection.CLOCKWISE	wheel rotate direction
  setRotationViaSwipe(rotationViaSwipe: Boolean)	false	enable or disable start wheel rotate via swipe down
  setSwipeDistance(swipeDistance: Int)	100	swipe distance to start rotate wheel
  stopCenterOfItem(stopCenterOfItem: Boolean)	false	if true the arrow points to the center of the slice if false the arrow points to a random point on the slice
  setRotateTime(rotateTime: Long)	5000L	wheel rotate duration
  setRotateSpeed(rotateSpeed: RotationSpeed)	RotationSpeed.NORMAL	wheel rotate speed RotationSpeed.FAST, RotationSpeed.NORMAL or RotationSpeed.SLOW
  setRotateSpeedMultiplier(rotateSpeedMultiplier: Float)	1F	wheel rotate speed multiplier

• Attributes

  
  

  Attribute	Type	Default	Description
  rotateDirection	enum	RotationDirection.CLOCKWISE	wheel rotate direction
  rotationViaSwipe	boolean	false	enable or disable start wheel rotate via swipe down
  swipeDistance	integer	100	swipe distance to start rotate wheel
  stopCenterOfItem	boolean	false	if true the arrow points to the center of the slice if false the arrow points to a random point on the slice
  rotateTime	long	5000L	wheel rotate duration
  rotateSpeed	enum	RotationSpeed.Normal	wheel rotate speed RotationSpeed.FAST, RotationSpeed.NORMAL or RotationSpeed.SLOW
  rotateSpeedMultiplier	float	1F	wheel rotate speed multiplier

Wheel Stroke Customization

• Functions

  
  

  Function	Default	Description
  drawWheelStroke(drawWheelStroke: Boolean)	false	enable or disable wheel corner stroke drawing
  setWheelStrokeColor(wheelStrokeColor: IntArray)	intArrayOf(Color.BLACK)	color of stroke line if wheelStrokeColor size = 1 then gradient stroke color disable and stroke color will be value of wheelStrokeColor[0] if wheelStrokeColor size > 1 then gradient stroke color enable if wheelStrokeColor is empty then gradient stroke color disable and stroke color will be Color.BLACK
  setWheelStrokeThickness(wheelStrokeThickness: Float)	4dp	thickness of item stroke circle

• Attributes

  
  

  Attribute	Type	Default	Description
  drawWheelStroke	boolean	false	enable or disable wheel corner stroke drawing
  wheelStrokeColor	color	#000000	color of stroke line
  wheelStrokeThickness	dimension	4dp	thickness of item stroke circle

Wheel Item Separator Customization

• Functions

  
  

  Function	Default	Description
  drawItemSeparator(drawItemSeparator: Boolean)	false	enable or disable wheel item separator drawing
  setWheelItemSeparatorColor(wheelItemSeparatorColor: IntArray)	intArrayOf(Color.BLACK)	color of item separator line if wheelItemSeparatorColor size = 1 then gradient separator color disable and separator color will be value of wheelItemSeparatorColor[0] if wheelItemSeparatorColor size > 1 then gradient separator color enable if wheelItemSeparatorColor is empty then gradient separator color disable and separator color will be Color.BLACK
  setItemSeparatorThickness	2dp	thickness of item separator line

• Attributes

  
  

  Attribute	Type	Default	Description
  drawItemSeparator	boolean	false	enable or disable wheel item separator drawing
  wheelItemSeparatorColor	color	#000000	color of item separator line
  itemSeparatorThickness	dimension	2dp	thickness of item separator line

Wheel Center Point Customization

• Functions

  
  

  Function	Default	Description
  drawCenterPoint(drawCenterPoint: Boolean)	false	enable or disable center point drawing
  setCenterPointColor(centerPointColor: Int)	Color.WHITE	color of center point
  setCenterPointRadius(centerPointRadius: Float)	20dp	radius of center point

• Attributes

  
  

  Attribute	Type	Default	Description
  drawCenterPoint	boolean	false	enable or disable center point drawing
  centerPointColor	color	#FFFFFF	color of center point
  centerPointRadius	dimension	20dp	radius of center point

Wheel Corner Points Customization

• Functions

  
  

  Function	Default	Description
  drawCornerPoints(drawCornerPoints: Boolean)	false	enable or disable corner points drawing
  setCornerPointsEachSlice(cornerPointsEachSlice: Int)	1	count of point in a slice
  setCornerPointsColor(cornerPointsColor: IntArray)	intArrayOf()	colors of corner points if cornerPointsColor is empty and setUseRandomCornerPointsColor is false then corner colors will be randomly if cornerPointsColor is not empty and setUseRandomCornerPointsColor is true then corner colors will be randomly
  setUseRandomCornerPointsColor(useRandomCornerPointsColor: Boolean)	true	enable or disable random corner points colors
  setUseCornerPointsGlowEffect(useCornerPointsGlowEffect: Boolean)	true	enable or disable corner points glow effect
  setCornerPointsColorChangeSpeedMs(cornerPointsColorChangeSpeedMs: Int)	500	corner points color change duration
  setCornerPointsRadius(cornerPointsRadius: Float)	4dp	radius of corner point

• Attributes

  
  

  Attribute	Type	Default	Description
  drawCornerPoints	boolean	false	enable or disable corner points drawing
  cornerPointsEachSlice	integer	1	count of point in a slice
  cornerPointsColor	color	-	color of corner points
  useRandomCornerPointsColor	boolean	true	enable or disable random corner points colors
  useCornerPointsGlowEffect	boolean	true	enable or disable corner points glow effect
  cornerPointsColorChangeSpeedMs	integer	500	corner points color change duration
  cornerPointsRadius	dimension	4dp	radius of corner point

Wheel Item Text Customization

• Functions

  
  

  Function	Default	Description
  setTextOrientation(textOrientation: TextOrientation)	TextOrientation.HORIZONTAL	text orientation of wheel items TextOrientation.HORIZONTAL or TextOrientation.VERTICAL
  setTextPadding(textPadding: Float)	4dp	text padding from wheel corner
  setTextSize(textSize: Int)	16sp	text size of wheel items
  setTextLetterSpacing(@FloatRange(from = 0.0, to = 1.0) letterSpacing: Float)	0.1F	letter spacing of wheel items text letterSpacing must be in range 0.0F - 1.0F letterSpacing is not in range then letter spacing be 0.1F
  setTextFont(fontResourceId: Int)	Sans Serif	custom font resource id of wheel items text
  setTextFont(typeface: Typeface)	Sans Serif	custom font typeface of wheel items text

• Attributes

  
  

  Attribute	Type	Default	Description
  textOrientation	enum	TextOrientation.HORIZONTAL	text orientation of wheel items TextOrientation.HORIZONTAL or TextOrientation.VERTICAL
  textPadding	dimension	4dp	text padding from wheel corner
  textSize	dimension	16sp	text size of wheel items
  letterSpacing	float	0.1F	letter spacing of wheel items text letterSpacing must be in range 0.0F - 1.0F letterSpacing is not in range then letter spacing be 0.1F
  textFont	reference	Sans Serif	custom font resource id of wheel items text

Wheel Item Icon Customization

• Functions

  
  

  Function	Default	Description
  setIconPosition(@FloatRange(from = 0.1, to = 0.9) iconPositionFraction: Float)	0.5F	icon vertical position fraction in wheel slice The smaller the value, the closer to the center The larger the value, the closer to the corners
  setIconSizeMultiplier(sizeMultiplier: Float)	1.0F	item icon size multiplier value, default icon size 36dp

• Attributes

  
  

  Attribute	Type	Default Value	Description
  iconPosition	float	0.5F	icon vertical position fraction in wheel slice The smaller the value, the closer to the center The larger the value, the closer to the corners
  iconSizeMultiplier	float	1.0F	item icon size multiplier value, default icon size 36dp

(back to top)

Support

Having amazing people like you behind me is a huge motivation to keep pushing forward and improving my work. 💪

If you like the work that I do, you can help and support me by buying a cup of coffee. ☕️

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the Apache 2.0 License. See LICENSE.txt for more information.

(back to top)

Contact

Made with ❤️ by Caner YILMAZ
[email protected]

(back to top)