In my previous blog [2I have discussed about how to implement normal rotary knob using an open source library, this blog will be about the new user interface (UI) of multimeter in the PSLab Android app, how a custom rotary knob is implemented in it and how how the text views are positioned circular in them.
Implementation of Custom Rotary Knob
In the PSLab device 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.
Figure 1: A basic rotary knob
Figure 1 shows a basic knob implemented using the BeppiMenozzi library whereas figure 2 shows the implementation of a custom knob using the basic knob.
Figure 2: A custom Knob
Steps of making a Custom-Knob using a simple Knob
- Implement the the basic knob using the steps given in my previous knobs explained in my previous blogs.
- Download the images of the knob which has to be implemented.
android:layout_weight="1"
android:rotation="15"
app:kDefaultState="2"
app:kIndicatorWidth="@dimen/multimeter_length_0"
app:kKnobCenterColor="@color/colorPrimaryDark"
app:kKnobColor="@color/white"
app:kKnobDrawable="@drawable/knob"
- Using the above code amend the knob as per the requirement. The advantage of using the beppiMonzi library is that the knob is fully amenable , we can even define the minimum and maximum angle and many more stuffs can be done using the library.
Figure 3: Showing the implementation of other custom knobs
The above figure shows the example of custom knobs implemented using the simple knob and by following the steps.
Implementation Circular positioning
One of the other major issues while making the new UI of the multimeter is the positioning of text-view around the circular knob. The issue was made overcome by implementing a circular positioning constraints in the text-views.
Steps of implementing circular positioning
- Use the constraint layout version 1.1.0 or above as the previous versions do not support the circular positioning feature.
- Add the circular constraint individually to every text-view.
app:layout_constraintCircle="@id/knobs"
app:layout_constraintCircleAngle="105"
app:layout_constraintCircleRadius="@dimen/multimeter_knobcircle_radius_1"
The above code snippets shows the addition od circular constraints added to a text-view. Using these constraint it decides positions the views relative to another views at a particular angle which thus makes up circular positioning.
Thus, this is how we can implement circular positioning in the views.
Resources
- BeppiMenozzi Knob Library
https://github.com/BeppiMenozzi/Knob - Rotary knob Blog
https://docs.google.com/document/d/1IU_lpdt4sHI4euM543bBlHwYpv8vwwjxoB76sW1i5HA/edit?usp=sharing