We are pleased to offer you our new free lightweight plugin named CircularPicker.
CircularPicker is helpful for creating a controller aimed to manage any calculated parameter. For example, it can be used as a countdown timer or for keeping the score in the game interface.
CircularPicker can be customized to meet your individual requirements. The developer can set the number of the controllers and their design by selecting a color, gradient and other similar parameters. In addition, it’s possible to specify the transition type for showing controllers on the screen.
Check out our iOS CircularPicker also!
To run the example project, clone the repo and run sample.
Just add CircularPickerPagerContainer which contains CircularPickerViewPager to your layout file.
<com.agilie.circularpicker.ui.view.CircularPickerPagerContainer
android:id="@+id/timePickerPagerContainer"
android:layout_width="match_parent"
android:layout_height="350dp">
<com.agilie.circularpicker.ui.view.CircularPickerViewPager
android:id="@+id/view_pager"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal">
</com.agilie.circularpicker.ui.view.CircularPickerViewPager>
</com.agilie.circularpicker.ui.view.CircularPickerPagerContainer>Also you can use only CircularPickerView
<com.agilie.circularpicker.ui.view.CircularPickerView
android:layout_width="match_parent"
android:layout_height="match_parent" />The library contains three key elements:
- CircularPickerPagerContainer - a custom container to show more than one page at a time.
- CircularPickerViewPager - a custom ViewPager in which we define the region in the view element for swipe action.
- CircularPickerView - a controller aimed to manage any calculated parameter.
CircularPickerView has the following settings:
var colors : intArrayOf
var gradientAngle : Int
var maxLapCount : Int // number of laps (required)
var maxValue : Int // total values (required)
var currentValue : Int
var centeredTextSize : Float
var centeredText : String
var centeredTextColor: Int
var centeredTypeFace : TypeFace
var valueChangedListener : object
var colorChangedListener : object<declare-styleable name="CircularPickerView">
<attr name="circularPickerSpace" format="float" />
<attr name="pullUp" format="float" />
</declare-styleable>Let's see how we can use it in practice. In our layout.xml we added CircularPickerPagerContainer which contains CircularPickerViewPager, then created CircularPickerView in the Activity and set up parameters:
СircularPickerView(context).apply {
colors = (intArrayOf(
Color.parseColor("#00EDE9"),
Color.parseColor("#0087D9"),
Color.parseColor("#8A1CC3")))
gradientAngle = 220
maxLapCount = 2
currentValue = 13
maxValue = 24
centeredTextSize = 60f
centeredText = "Hours"Here are also two callback interfaces provided with CircularPickerView. Use them to handle changes made during the interaction with the component:
interface ValueChangedListener {
fun onValueChanged(value: Int)
}
interface ColorChangedListener {
fun onColorChanged(r: Int, g: Int, b: Int)
}Add dependency in your build.gradle file:
compile 'com.agilie:circular-picker:1.0'Add rependency in your .pom file:
<dependency>
<groupId>com.agilie</groupId>
<artifactId>circular-picker</artifactId>
<version>1.0</version>
<type>pom</type>
</dependency>CircularPicker works on Android API 16+
Problems? Check the Issues block to find the solution or create an new issue that we will fix asap.
This library is open-sourced by Agilie Team info@agilie.com
If you have any questions, suggestions or just need a help with web or mobile development, please email us at
android@agilie.com
You can ask us anything from basic to complex questions.
We will continue publishing new open-source projects. Stay with us, more updates will follow!
The MIT License (MIT) Copyright © 2017 Agilie Team