2 Mar 2015

CircularSeekbar | SeekArc android

It’s a Seek Bar that has been wrapped around a circle. It acts like a Seek Bar and generally has the same settings.

There is a SeekArc library available in market it has following functionality

1 .Circle
2. Semi-circle
3. quarter arc or whatever you like.

OUTPUT :



Implementation :

Step 1 : Download lib project from here
Step 2 : Import lib project in eclips
Step 3 : Create circular_seekbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:seekarc="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res/ProjectpackageName"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <FrameLayout
        android:id="@+id/seekArcContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="20dp"
        android:paddingTop="20dp" >

        <com.triggertrap.seekarc.SeekArc
            android:id="@+id/seekArc"
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:layout_gravity="center"
            android:padding="30dp"
            app:arcWidth="2dp"
            app:progressWidth="4dp"
            seekarc:arcColor="@android:color/darker_gray"
            seekarc:clockwise="true"
            seekarc:max="100"
            seekarc:progressColor="#a6417e"
            seekarc:startAngle="0"
            seekarc:touchInside="true" />

        <TextView
            android:id="@+id/seekArcProgress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="0"
            android:textColor="#EFE2E9"
            android:textSize="100sp" />
    </FrameLayout>


</LinearLayout>

Step 4 : CircularSeekbarActivity

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
import com.triggertrap.seekarc.SeekArc;
import com.triggertrap.seekarc.SeekArc.OnSeekArcChangeListener;

public class CircularSeekbarActivity extends Activity
{
       private SeekArc mSeekArc;
       private TextView mSeekArcProgress;

       protected void onCreate(Bundle savedInstanceState)
       {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.circular_seekbar);
             
              mSeekArc = (SeekArc) findViewById(R.id.seekArc);
              mSeekArcProgress = (TextView)findViewById(R.id.seekArcProgress);


              mSeekArc.setOnSeekArcChangeListener(new OnSeekArcChangeListener() {
                     @Override
                     public void onStopTrackingTouch(SeekArc seekArc) {    
                     }            
                     @Override
                     public void onStartTrackingTouch(SeekArc seekArc) {
                     }
                     @Override
                     public void onProgressChanged(SeekArc seekArc, int progress,boolean fromUser)
                     {
                           mSeekArcProgress.setText(String.valueOf(progress));
                     }
              });
       }

}

I will be happy if you will provide your feedback or follow this blog. Any suggestion and help will be appreciated.
Thank you :)

6 comments:

  1. Thanks droid nice example.how to set minimum value to the seek

    ReplyDelete
  2. Is it Possible to navigate bi directional?

    ReplyDelete
  3. great tutorial. how can i draw the percentage progress inside the thumb?

    ReplyDelete
  4. How do I set the max property in code?

    ReplyDelete

  5. I really enjoyed reading this post, I always appreciate topics like this being discussed to us. Information very nice. I will follow post Thanks for sharing. COVID-19 | Download gta 5 game apk for android phone

    ReplyDelete