This is a control I was going to use in my company’s project. I was going to search for one directly on the Internet, but unfortunately I found many Progressbars without the drag-and-drop function, so I implemented one myself. Its functions and features are designed after SeekBar.

Results the preview

Supported features

  • Progress feature.
  • Custom property configuration.
  • Line width.
  • Opening Angle.
  • Rotation Angle.
  • Gradients.
  • Maximum progress value.
  • Drag button color, size, style (Fill, Stroke, Fill + Stroke).
  • State change callback.

The main file

The name Abstract
ArcSeekBar Circular shape SeekBar.

1. Basic usage

<com.gcssloop.widget.ArcSeekBar
    android:id="@+id/arc_seek_bar"
    android:layout_width="280dp"
    android:layout_height="280dp"
    app:arc_colors="@array/arc_colors_default"
    app:arc_max="100"
    app:arc_open_angle="90"
    app:arc_progress="0"
    app:arc_rotate_angle="90"
    app:arc_thumb_color="#fff"
    app:arc_thumb_mode="STROKE"
    app:arc_thumb_radius="16dp"
    app:arc_thumb_width="3dp"
    app:arc_width="40dp"/>Copy the code

2. Configure properties

The basic properties that can be configured in the layout file are as follows:

The attribute name Abstract Whether setting is mandatory type
arc_width Arc width no dp
arc_open_angle The Angle of the arc opening no int
arc_rotate_angle Rotation Angle, default 90 no int
arc_colors Arc gradient no array
arc_max Maximum value of progress no int
arc_progress The default schedule no int
arc_thumb_width Drag button stroke width no dp
arc_thumb_color Drag button color no color
arc_thumb_radius Drag button radius no dp
arc_thumb_mode Drag button modes (FILL, STROKE, FILL_STROKE) no emnu

3. Attribute introduction

3.1 Basic drawing properties

The basic meanings of the width (arc_width), opening Angle (arc_open_angle), and rotation Angle (arc_rotate_angle) of the progress bar are shown in the figure above.

Progress bar width (arc_width) : Progress bar width is the content shown in the white part of the figure above, which controls the width of the drawing. ** Opening Angle (arc_open_angle) : ** Opening Angle is the part of the figure below which no progress is shown. If the opening Angle is 0, it will be drawn as a circle. If the opening Angle is 180 degrees, it is a semicircle. Rotation Angle: The rotation Angle is the final direction of the ring opening. The default value is 90 degrees.

3.2 gradients

Gradients, as shown above, allow you to specify more than two colors for rendering, basically using the following.

1. Define an array array in /res/values, whose entries are a series of colors (the number of colors is greater than or equal to 2).

<? The XML version = "1.0" encoding = "utf-8"? > <resources> <array name="arc_colors_default"> <item>#1a2a6c</item> <item>#b21f1f</item> <item>#fdbb2d</item> </array> </resources>Copy the code

2. Reference the specified color

<com.gcssloop.widget.ArcSeekBar
    android:layout_width="280dp"
    android:layout_height="280dp"
    app:arc_colors="@array/arc_colors_default"/>Copy the code

Note: The number of color arrays specified must be greater than 2. If you want to use solid colors, simply set both array entries to the same color.

3.3 Schedule Attributes

The progress attribute has two, arc_max specifies the maximum value and arc_progress specifies the default progress.

3.4 Drag button properties

Drag the button that is the circle in the illustration above, **arc_thumb_width: ** Specifies the width of the circle. Arc_thumb_color: Specifies the button color. Arc_thumb_radius: Specifies the radius of the button. Arc_thumb_mode: specifies the button drawing mode. Default is STROKE. You can specify FILL, STROKE, and FILL_STROKE.

4. Add methods

4.1 Adding a Warehouse

Configure the repository address in your project’s build.gradle file.

Allprojects {repositories {jcenter () / / private warehouse address maven {url "http://lib.gcssloop.com:8081/repository/gcssloop-central/" }}}Copy the code

4.2 Adding project dependencies

Add the following information under the Module to which you want to add dependencies in the same way as a normal remote repository.

Implementation 'com. Gcssloop. Widget: the arc - seekbar: 1.0.0'Copy the code

Author’s brief introduction

Author’s Microblog:@GcsSloop

Personal Website:www.gcssloop.com

Update log

v1.0.0

Complete basic ArcSeekBar functionality with associated custom properties.

Copyright information

Copyright (c) 2018 GcsSloop

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Copy the code