ProtractorView in Android

In this article, ProtractorView is added to android. ProtractorView is a semicircular Seekbar view for selecting an angle from 0° to 180. Seek bar is a type of progress bar. Change the cursor from 0° to 180 for selecting an angle. Below is the image of ProtractorView.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.

Step 2: Add the Required Dependencies

Navigate to the Gradle Scripts > build.gradle(Module:app) and Add the Below Dependency in the Dependencies section.

implementation 'com.github.GoodieBag:ProtractorView:v1.2'

Add the Support Library in your settings.gradle File. This library Jitpack is a novel package repository. It is made for JVM so that any library which is present in Github and Bitbucket can be directly used in the application.

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        
        // add the following
        maven { url "https://jitpack.io" }
    }
}

After adding this Dependency, Sync the Project and now we will move towards its implementation.

Step 3: Working with the XML Files

Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.goodiebag.protractorview.ProtractorView
        android:id="@+id/protractorview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:textProgressColor="#FF00"
        app:tickProgressColor="#abe6" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="136dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail. In this file, add interval, color, and setOnProtractorViewChangeListener to our ProtractorView. Whenever progress is changed setOnProtractorViewChangeListener is get invoked automatically. Here the changed angle value is shown in TextView. 

Java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
import com.goodiebag.protractorview.ProtractorView;

public class MainActivity extends AppCompatActivity {

    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ProtractorView protractorView = (ProtractorView) findViewById(R.id.protractorview);

          textView = findViewById(R.id.textView);
        protractorView.setTickIntervals(15);

        protractorView.setArcColor(getColor(R.color.colorAccent));
        protractorView.setProgressColor(getColor(R.color.myColor));

        protractorView.setOnProtractorViewChangeListener(new ProtractorView.OnProtractorViewChangeListener() {
            @Override
            public void onProgressChanged(ProtractorView pv, int progress, boolean b) {
                textView.setText("" + progress);
            }

            @Override
            public void onStartTrackingTouch(ProtractorView pv) {

            }

            @Override
            public void onStopTrackingTouch(ProtractorView pv) {

            }
        });
    }
}

Kotlin

import android.os.Build
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.goodiebag.protractorview.ProtractorView

class MainActivity : AppCompatActivity() {

    private lateinit var textView: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val protractorView = findViewById<ProtractorView>(R.id.protractorview)

        textView = findViewById(R.id.textView)
        protractorView.setTickIntervals(15)

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            protractorView.setArcColor(getColor(R.color.colorAccent))
            protractorView.setProgressColor(getColor(R.color.myColor))
        }

        protractorView.setOnProtractorViewChangeListener(object : OnProtractorViewChangeListener() {
            fun onProgressChanged(pv: ProtractorView?, progress: Int, b: Boolean) {
                textView.text = "" + progress
            }

            fun onStartTrackingTouch(pv: ProtractorView?) {

            }

            fun onStopTrackingTouch(pv: ProtractorView?) {

            }
        })
    }
}

Output: