Circular Slider UI Control for Android

Related tags

ProgressBar android java slider circle border round seek thumb
Overview

Circular Slider

Android Weekly Android Arsenal

What is this?

Circular Slider is a custom-built Android View used for choosing numbers. It works similarly to the regular slider control (SeekBar), just goes around in a circular fashion - simple enough. Note that the thumb scroller (the thing you drag around) can be either a solid-color circle or a custom drawable (like a PNG image).

Requirements

  • Android 3.0 or later (Minimum SDK level 11)
  • Android Studio (to compile and use)
  • Eclipse is not supported

Getting Started

  1. Download Android Studio
  2. Launch Android Studio
  3. Start your new project
  4. Open your project's main Gradle file, in root directory (/build.gradle)
  5. Make sure you are using jcenter() in the repository block (mavenCentral() should work too)
  6. Open your app module Gradle file, for example /app/build.gradle
  7. In dependencies block, add the following line: compile 'me.angrybyte.slider:slider:1.4.2'
  8. Click Tools/Android/Sync Project with Gradle Files or click on the Sync icon in the top toolbar
  9. Click Run/Run 'app' to see if it's resolved correctly

This will run the app on your device. You may need to download a newer version of Gradle, which will be available in the Android Studio UI if compile fails.

What does it look like?

screenshot_1

A dark variant

Sample usage

<me.angrybyte.circularslider.CircularSlider
    android:id="@+id/circular"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="30dp"
    circular:angle="3.14"
    circular:border_color="#505090"
    circular:border_thickness="14dp"
    circular:border_gradient_colors="#f05151;#4a90e2;#4a90e2"
    circular:thumb_color="#30AEFF"
    circular:thumb_size="24dp" />

Explanation of attributes

Here are some short explanations for the attributes provided by the view. You can leave out any of them, values will get set to default ones.

  • angle: (float) The current position of the slider thumb, a pi-based value of the angle (radians).
  • start_angle: (float) The starting position of the slider thumb, a pi-based valued of the angle (radians).
  • border_thickness: (dimension) How thick should the slider border be (this can be a 0-dimension).
  • border_color: (color) Recolors the slider border to the specified color.
  • border_gradient_colors: (string) Creates a gradient on the slider's circular edge. Format: "#f05151;#4a90e2;#4a90e2"
  • thumb_size: (dimension) Radius of the slider thumb (thumb is the slider's movable part).
  • thumb_image: (reference) Set this to use an image instead of a colored circle for the slider thumb.
  • thumb_color: (color) Set this to use a colored circle instead of an image for the slider thumb.

Note that thumb color and thumb image are mutually exclusive, you can't use both.

Support

If you've found an error while using the library, please file an issue. All patches are encouraged, and may be submitted by forking this project and submitting a pull request through GitHub. Some more help can be found here:

Comments
  • Add possibility to apply gradient color to border

    Add possibility to apply gradient color to border

    In order to select colors to be used for gradient, you need to pass string in xml like range:border_gradient_colors="#f05151;#4a90e2;#4a90e2" , with ';' separators. Haven't found better solution, feel free to suggest of course.

    enhancement 
    opened by nshaposhnik 4
  • The slider is sometimes missing an angle

    The slider is sometimes missing an angle

    Hi,

    I am using the circular slider to make an element active when the slider angle matches with the angle of the element. Most of the time it works. But sometimes I have seen the slider misses the angle when the slider is moved fast.

    opened by georgegijo 3
  • SetAngle value and onSliderMoved Position values are different for same position..

    SetAngle value and onSliderMoved Position values are different for same position..

    I am trying to use it as a control for volume, but the values are not continuous they vary widely from 0.25 to -0.75..

    I also need to limit the slider progress to a specific arc and not allow it to complete the whole circle..

    enhancement help wanted 
    opened by gowrav 3
  • Consider a less restrictive License?

    Consider a less restrictive License?

    Hi Milos,

    This is a great project!

    I would like to ask if you would consider changing the license from GPL to something less restrictive? I would really like to use your project in my app, but I'm unable to open source it.

    Thanks!

    opened by kevinchau 2
  • Remove files now ignored by git

    Remove files now ignored by git

    Hey @milosmns I see in this commit you updated the .gitignore but there's still a few files remaining that are now ignored. I removed them with

    git ls-files -i --exclude-from=.gitignore | xargs git rm --cached

    Hope the PR's ok.

    opened by jonathan-caryl 2
  • No touch event intercepts when mIsThumbSelected

    No touch event intercepts when mIsThumbSelected

    Blocked touch events from being intercepted when thumb is being held and/or dragged. Improved User experience and functionality of VolumeSlider on ViewPager's and similar View's.

    opened by bkoruznjak 2
  • How do I retrieve the angle?

    How do I retrieve the angle?

    Hey,

    I've implemented the slider and it works so far, but I cannot see how I can retrieve the angle of the slider. I can see a lot of setters, such as setAngle, but no getters.

    thanks

    opened by Mikkelet 1
  • Feature Request: Add progress arc behind slider controll

    Feature Request: Add progress arc behind slider controll

    If possible it would be great to see a solid color arc going from the top of the circle to the thumb control position to indicate the progress of the slider.

    enhancement help wanted 
    opened by ed-george 1
  • making the slider continuous.

    making the slider continuous.

    The slider does not seem to have the capability of being a slider which keeps adding value or keeps removing the value. can someone help me with that?

    question 
    opened by Shreyaskc 7
Owner
Milos Marinkovic
Dealing with Software Systems and Processes
Milos Marinkovic
GitHub
An android library to easily add circular progress bar into your Jetpack Compose apps.

CircularProgressBar for Jetpack Compose An android library to easily add circular progress bar into your Jetpack Compose apps. Have a Look Usage Circu

Hitanshu Dhawan 38 Oct 30, 2022
A lightweight circular indicator view library for Android

A lightweight circular indicator view library for Android

İbrahim Süren 241 Dec 30, 2022
A simple library for creating circular progressbars for Android

CircleProgressBar A simple library for creating circular progressbars for Android. Examples Installation Get it via gradle: implementation 'com.emreda

Emre 96 Nov 1, 2022
Holo Circular ProgressBar

HoloCircularProgressBar What is HoloCircularProgressBar HoloCircularProgressBar is a Custom View implementation for Android you might know from the An

Pascal Welsch 957 Nov 15, 2022
Present your progress bars in arc mode with information and total control.

ArcProgressStackView Present your progress bars in arc mode with information and total control. You can check the sample app here. Warn This library i

Basil Miller 249 Sep 10, 2022
Present your progress bars in arc mode with information and total control.

ArcProgressStackView Present your progress bars in arc mode with information and total control. You can check the sample app here. Warn This library i

Devlight 1.3k Nov 29, 2022
Present your progress bars in arc mode with information and total control.

ArcProgressStackView Present your progress bars in arc mode with information and total control. You can check the sample app here. Warn This library i

Devlight 1.3k Nov 29, 2022
[Android] Round Corner Progress Bar Library for Android

RoundCornerProgressBar Round corner is cool. Let's make your progress bar to round corner Colorful progress bar with round corner on progress which yo

Akexorcist 2.3k Dec 31, 2022
[Android] Round Corner Progress Bar Library for Android

RoundCornerProgressBar Round corner is cool. Let's make your progress bar to round corner Colorful progress bar with round corner on progress which yo

Akexorcist 2.3k Jan 7, 2023
Now deprecated. A small Android library allowing you to have a smooth and customizable horizontal indeterminate ProgressBar

Description Small library allowing you to make a smooth indeterminate progress bar. You can either user your progress bars and set this drawable or us

Antoine Merle 4.4k Dec 30, 2022
A beautiful, slim Android ProgressBar.

Android NumberProgressBar The NumberProgressBar is a bar, slim and sexy (every man wants! ). I decided to do this because I was really tired of androi

代码家 6k Jan 7, 2023
An android library to display a progressbar that goes around an image.

android-square-progressbar First things first This library is setup to work with the Android Studio and Gradle. If you're using the Eclipse environmen

Yannick Signer 1.3k Nov 15, 2022
Android library to display progress like google does in some of his services.

GoogleProgressBar This library is not maintained anymore and there will be no further releases Android library to display different kind of google rel

JPARDOGO 1.3k Dec 27, 2022
Android loading view

Loading Loading is a poject with kinds of Android loading view. Yan can see the wiki for more detail. RotateLoading BookLoading NewtonCradleLoading Us

null 1.2k Jan 1, 2023
Android fillable progress view working with SVG paths. This is a nice option too if you want to create an interesting branding logo for your app. Based on the iOS project: https://github.com/poolqf/FillableLoaders

Android FillableLoaders Android Open Source library providing an interesting fillable progress view working with SVG paths. This is a nice option too

Jorge Castillo 2k Jan 1, 2023
Android AlertDialog with moving dots progress indicator

Spots progress dialog Android AlertDialog with moving spots progress indicator packed as android library. =========== Usage The library available in m

Maksym Dybarskyi 1.1k Dec 26, 2022
An Android library providing to realize wave loading effect.

WaveLoadingView WaveLoadingView - An Android library that provides a realistic wave-loading effect. Sample Usage For a working implementation of this

Tang 1.7k Jan 2, 2023
Android CatLoadingView

Android CatLoadingView This project idea is from Link. Thanks for the idea. I like the animation in this picture: ...as you see it right now, I hope y

Roger 1.1k Dec 3, 2022
A customizable, animated progress bar that features rounded corners. This Android library is designed to look great and be simple to use 🎉

RoundedProgressBar Easy, Beautiful, Customizeable The RoundedProgressBar library gives you a wide range of customizable options for making progress ba

null 541 Jan 1, 2023