PSLab android application as we all know has got various instrument such as oscilloscope, logic analyzer, wave generator, etc.. . Although many of these instrument require redesigning of it’s UI. One such instrument is the Multimeter. The Multimeter UI required the implementation of the rotary knob as it is also present in an actual Multimeter.Thus this blog is solely on how to implement a Rotary Knob in an Android App.
Figure 1: Showing a basic knob
What is Rotary Knob ?
A Rotary knob is a customizable selector that replicates the behaviour of a knob with discrete values.The knob is a powerful tool it has a lot of advantages over other radio-buttons, seek bars or other selectors.[1][2]
-
-
- It has an immediate graphical indication of the current value, the number of choices and where the value is in the overall range.
- Works fine also with few choices, as a multi-state toggle.
- Swipe gestures allow to change values very quickly, using the entire screen for the gesture, but only a tiny zone of it for the graphics.
-
Implementation of Rotary Knob in your app[1]
In this blog the rotary knob is implemented using the BeppiMenozzi Knob library[1] as by doing this we don’t have to manually create the extra class for the knob and we don’t have to write the code from scratch.
This blog will give you step by step guide on how to implement this on your app.
-
-
-
- In your project level build.gradle file add the following lines of code.
allprojects { repositories { …. maven { url "https://jitpack.io" } …. } }
- In you app level build.gradle file add the following lines of codes in your dependencies.
compile 'com.github.BeppiMenozzi:Knob:1.9.
- Minimal code :-
This contains the minimum number of lines of code for knobxmlns:app="http://schemas.android.com/apk/res-auto" ... <it.beppi.knoblibrary.Knob android:layout_width="64dp" android:layout_height="64dp" android:id="@+id/knob" app:kNumberOfStates="6" />
Java listener-
xmlns:app="http://schemas.android.com/apk/res-auto" Knob knob = (Knob) findViewById(R.id.knob); knob.setState(firstState); knob.setOnStateChanged(new Knob.OnStateChanged() { @Override public void onState(int state) { // do something } });
This java method gives the user the position of the tip of theknob.
Also there are various other advantages of using this library.-
-
- The Knob is completely customizable. The many customizable attributes can all be set both via xml file, and programmatically.
- This page gives the list of all the methods for customizing a knob.
-
-
- Implementing a simple knob app
tv= (TextView)findViewById(R.id.tv); Knob knob = (Knob) findViewById(R.id.knob); knob.setState(0); knob.setOnStateChanged(new Knob.OnStateChanged() { @Override public void onState(int state) { // do something tv.setText(String.valueOf(state)); } });
- In your project level build.gradle file add the following lines of code.
-
-
Now let us see the implementation of this simple app
Figure 2: showing basic knob implementation in android
So this is how we can implement a rotary knob in any Android Application.
Resources:
-
-
- BeppiMenozzi,knob-library,github.com
https://github.com/BeppiMenozzi/Knob - Control knob, wikipedia.com
https://en.wikipedia.org/wiki/Control_knob
- BeppiMenozzi,knob-library,github.com
-