Android Circular Seekbar

Xin chào tất cả mọi người, với các bạn làm Android thì chắc cũng đã quá quen với Seekbar. Có thể đối với các bạn đề cao sự đơn giản thì việc sử dụng Seekbar default của Android là quá ổn rồi, nhưng nếu bạn nào cảm thấy muốn có cái gì đó mới mới như mình thì hãy cùng mình thử thay bằng Circular Seekbar xem thế nào nhé.

Circular Seekbar là 1 bản custom của Seekbar trong Android, thay vì hiển thị Seekbar là 1 đường thẳng giống như ProgressBar thì Circular Seekbar có dạng hình tròn, bạn có thể customize thành hình tròn, nửa hình tròn, oval,... mình cũng chỉ mới test hình tròn, anh em ngồi vọc vạch thử để tạo ra "đường cong hoàn mỹ" riêng cho mình nhé.

CircularSeekbar có thể dùng để làm Seekbar cho app nghe nhạc, nút thay đổi volume, hẹn giờ,.. giới hạn chỉ là ở sự sáng tạo của bạn mà thôi.

Sử dụng CircularSeekbar vô cùng đơn giản, bạn cũng có thể customize lại trong file xml, tiện hơn rất nhiều so với Seekbar default. Sau đây mình sẽ hướng dẫn cách thêm CircularSeekbar vào trong project của các bạn và sử dụng thôi nào.

Thêm vào project:

Bước 1:

Đầu tiên thêm file attrs.xml

../yourprojectdir/res/values/attrs.xml

Và file CircularSeekBar.java

../yourprojectdir/res/values/attrs.xml

Các bạn có thể ấn vào tên file để download hoặc vào trực tiếp github này nhé.

Bước 2: (thường thì bước này IDE sẽ hỏi để làm hộ mình)

Khi sử dụng trong class thì các bạn đừng quên import nhé

import com.devadvance.circularseekbar.CircularSeekBar;

và

package com.devadvance.circularseekbar;

import com.example.yourappname.R;
[...]

vào trong file CircularSeekBar.java nhé

Bước 3

Add thêm dòng này vào file layout của bạn:

xmlns:app="http://schemas.android.com/apk/res/com.devadvance.circulartest"

Nó sẽ trông như thế này:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	xmlns:app="http://schemas.android.com/apk/res/com.devadvance.circulartest"
	android:layout_awidth="match_parent"
	android:layout_height="match_parent" >
    [...]

Add thêm CircularSeekbar vào file .xml:

[...]
<com.devadvance.circularseekbar.CircularSeekBar
android:id="@+id/circularSeekBar1"
android:layout_awidth="wrap_content"
android:layout_height="wrap_content" />
[...]

Bắt tay vào customize thôi:

Đây là 1 số attributes được hỗ trợ để bạn tùy biến:

app:start_angle="270"
app:end_angle="270"
app:circle_x_radius="100"
app:circle_y_radius="100"
app:use_custom_radii="true"
app:progress="25"
app:max="100"
app:pointer_alpha_ontouch="100"
app:pointer_color="#0174DF"
app:pointer_halo_color="#880174DF"

Có 1 chú ý nhỏ là đơn vị là degrees cho góc và dp cho size nhé, không sử dụng px.

Các attributes mặc định thì vẫn dùng được bình thường

android:layout_awidth="300dp"
android:layout_height="300dp"
android:layout_marginTop="100dp"
android:padding="0dp"
[...]

Trong code Java:

Cứ giống như Seekbar default mà chơi thôi:

CircularSeekBar seekbar = (CircularSeekBar) findViewById(R.id.circularSeekBar1);
seekbar.getProgress();
seekbar.setProgress(50); 
[...]

Để thay đổi Seekar theo process hoặc theo onTouch (các bước import Android Studio hỗ trợ tận răng rồi):

import com.devadvance.circularseekbar.CircularSeekBar.OnCircularSeekBarChangeListener;

sau đó implement OnCircularSeekBarChangeListener vào:

public class CircleSeekBarListener implements OnCircularSeekBarChangeListener {
	@Override
	public void onProgressChanged(CircularSeekBar circularSeekBar, int progress, boolean fromUser) {
		// TODO
	}
}

set cho seekbar của bạn nữa là ok rồi

seekbar.setOnSeekBarChangeListener(new CircleSeekBarListener());

List các method được hỗ trợ

Các method này được define trong file CircularSeekBar.java :

setProgress()
getProgress()

setMax()
getMax()

setCircleColor()
getCircleColor()

setCircleProgressColor()
getCircleProgressColor()

setPointerColor()
getPointerColor()

setPointerHaloColor()
getPointerHaloColor()

setPointerAlpha()
getPointerAlpha()

setPointerAlphaOnTouch()
getPointerAlphaOnTouch()

setLockEnabled()
isLockEnabled()

List tất cả các attributes được hỗ trợ:

progress: (integer)

max: (integer)

move_outside_circle: (boolean). Mặc định là false.

start_angle: (decimal)

end_angle: (decimal)

maintain_equal_circle: (boolean). Mặc định là true.

use_custom_radii: (boolean). Mặc định là false.

lock_enabled: (boolean). Mặc định là true.

circle_x_radius: (decimal). Đơn vị: dp. Cần set "use_custom_radii: true".

circle_y_radius: (decimal). Đơn vị: dp. Cần set "use_custom_radii: true".

circle_stroke_awidth: (decimal). Đơn vị: dp.

pointer_radius: (decimal). Đơn vị: dp.

pointer_halo_awidth: (decimal). Đơn vị: dp.

pointer_halo_border_awidth: (decimal). Đơn vị: dp.

circle_color: (string). Giá trị: Hex. VD: #RRGGBB,#AARRGGBB,...

circle_progress_color: (string). Giá trị: Hex. VD: #RRGGBB,#AARRGGBB,...

pointer_color: (string). Giá trị: Hex. VD: #RRGGBB,#AARRGGBB,...

pointer_halo_color: (string). Giá trị: Hex. VD: #RRGGBB,#AARRGGBB,...

pointer_alpha_ontouch: (integer). Từ 0-255 (mặc định là 100)

Như vậy là đã có đủ gạch đá xi măng rồi, bắt tay vào test thôi nào. ^^

Bài viết của mình dựa theo source của anh Matt Josept, nếu bạn thấy hay thì hãy vào cho anh ấy 1 star trên github nhé