Here we discuss about creating a fan controller from scratch by using Kotlin and AndroidX.
For creating Fan Controller, a custom view from scratch, you need the following steps:
 |
| Fan Control view at initial stage |
 |
| Fan control view when user tap on it. |
For creating Fan Controller, a custom view from scratch, you need the following steps:
STEP 1:
Create a new Android Project "Fan Controller"
STEP 2:
Goto "layout_main.xml" and a ImageView and a TextView like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fan Control"
android:id="@+id/customViewLabel"
android:textAppearance="@style/Base.TextAppearance.AppCompat.Display1"
android:padding="16dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="24dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:id="@+id/dialView" android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="@+id/customViewLabel" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp" app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="8dp"
android:background="@android:color/darker_gray"/>
</androidx.constraintlayout.widget.ConstraintLayout>
STEP 3:
Create a new kotlin class DialView which will extends View like this:
The SELECTION_COUNT defines the total number of selections for this custom view. The code is designed so that you can change this value to create a control with more or fewer selections.
The mTempLabel and mTempResult member variables provide temporary storage for the result of calculations, and are used to reduce the memory allocations while drawing.
Add the following static object and class fields
Because a custom view extends View, you can override View methods such as onSizeChanged() to control its behavior. In this case you want to determine the drawing bounds for the custom view's dial by setting its width and height, and calculating its radius, when the view size changes, which includes the first time it is drawn. Add the following to DialView
Now override onSizeChanged method and get value for width and height
STEP 4: DRAW THE CUSTOM VIEW
To draw the custom view, your code needs to render an outer grey circle to serve as the dial, and a smaller black circle to serve as the indicator. The position of the indicator is based on the user's selection captured in mActiveSelection. Your code must calculate the indicator position before rendering the view. After adding the code to calculate the position, override the onDraw() method to render the view.
The code for drawing this view is provided without explanation because the focus of this lesson is creating and using a custom view. The code uses the Canvas methods drawCircle() and drawText()
Add the following computeXYForPosition() method to DialView to compute the X and Y coordinates for the text label and indicator (0, 1, 2, or 3) of the chosen selection, given the position number and radius:
The position parameter is a position index (starting at 0). The radius parameter is for the outer circle.
You will use the computeXYForPosition() method in the onDraw() method. It returns a two-element array for the position, in which element 0 is the X coordinate, and element 1 is the Y coordinate.
To render the view on the screen, use the following code to override the onDraw() method for the view. It uses drawCircle() to draw a circle for the dial, and to draw the indicator mark. It uses drawText() to place text for labels, using a StringBuffer for the label text.
STEP 5: ADD CUSTOM VIEW TO LAYOUT
Replace ImageView with your custom view in layout_main.xml, delete the background attribute and leave all attributes as it is.
Run the app to see changes
STEP 6: ADD CLICK LISTENER FOR CONTROLLING
To add behavior to the custom view, add an OnClickListener() to the DialView init{} method to perform an action when the user taps the view. Each tap should move the selection indicator to the next position: 0-1-2-3 and back to 0. Also, if the selection is 1 or higher, change the background from gray to green (indicating that the fan power is on):
Add the init{} method after constructor definition or anywhere you want.
The invalidate() method of View invalidates the entire view, forcing a call to onDraw() to redraw the view. If something in your custom view changes and the change needs to be displayed, you need to call invalidate().
now
Run the app. Tap the DialView element to move the indicator from 0 to 1. The dial should turn green. With each tap, the indicator should move to the next position. When the indicator reaches 0, the dial should turn gray.
Complete source code will available shortly
class DialView: android.view.View {
constructor(context: Context?) : super(context)
constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)
}
The SELECTION_COUNT defines the total number of selections for this custom view. The code is designed so that you can change this value to create a control with more or fewer selections.
The mTempLabel and mTempResult member variables provide temporary storage for the result of calculations, and are used to reduce the memory allocations while drawing.
Add the following static object and class fields
companion object {
private var SELECTION_COUNT = 4
}
private var mWidth = 0f
private var mHeight = 0f
private var mTextPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
color = Color.BLACK
style = Paint.Style.FILL_AND_STROKE
textAlign = Paint.Align.CENTER
textSize = 40f
}
private var mDialPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
color = Color.GRAY
}
private var mRadius = 0f
private var mActiveSelection = 0
private val mTempLabel = StringBuffer(8)
private val mTempResult = FloatArray(2)
Because a custom view extends View, you can override View methods such as onSizeChanged() to control its behavior. In this case you want to determine the drawing bounds for the custom view's dial by setting its width and height, and calculating its radius, when the view size changes, which includes the first time it is drawn. Add the following to DialView
Now override onSizeChanged method and get value for width and height
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
mWidth = w.toFloat()
mHeight = h.toFloat()
mRadius = (Math.min(mWidth,mHeight)/2.0 * 0.8).toFloat()
}
STEP 4: DRAW THE CUSTOM VIEW
To draw the custom view, your code needs to render an outer grey circle to serve as the dial, and a smaller black circle to serve as the indicator. The position of the indicator is based on the user's selection captured in mActiveSelection. Your code must calculate the indicator position before rendering the view. After adding the code to calculate the position, override the onDraw() method to render the view.
The code for drawing this view is provided without explanation because the focus of this lesson is creating and using a custom view. The code uses the Canvas methods drawCircle() and drawText()
Add the following computeXYForPosition() method to DialView to compute the X and Y coordinates for the text label and indicator (0, 1, 2, or 3) of the chosen selection, given the position number and radius:
private fun computeXYForPosition(position:Int, radius:Float):FloatArray{
val result = mTempResult
val startAngle = Math.PI * (9 / 8.0)
val angle = startAngle + (position * (Math.PI / 4.0))
result[0] = (radius * Math.cos(angle) + (mWidth/2.0)).toFloat()
result[1] = (radius * Math.sin(angle) + (mHeight/2.0)).toFloat()
return result
}
The position parameter is a position index (starting at 0). The radius parameter is for the outer circle.
You will use the computeXYForPosition() method in the onDraw() method. It returns a two-element array for the position, in which element 0 is the X coordinate, and element 1 is the Y coordinate.
To render the view on the screen, use the following code to override the onDraw() method for the view. It uses drawCircle() to draw a circle for the dial, and to draw the indicator mark. It uses drawText() to place text for labels, using a StringBuffer for the label text.
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
canvas?.let {c->
c.drawCircle(mWidth/2,mHeight/2,mRadius,mDialPaint)
val labelRadius = mRadius + 20
val label = mTempLabel
for (i in 0 until SELECTION_COUNT){
val xyData = computeXYForPosition(i,labelRadius)
label.setLength(0)
label.append(i)
c.drawText(label,0,label.length,xyData[0],xyData[1],mTextPaint)
}
val markerRadius = mRadius - 35
val xyData = computeXYForPosition(mActiveSelection,markerRadius)
canvas.drawCircle(xyData[0],xyData[1],20f,mTextPaint)
}
}
STEP 5: ADD CUSTOM VIEW TO LAYOUT
Replace ImageView with your custom view in layout_main.xml, delete the background attribute and leave all attributes as it is.
Run the app to see changes
 |
| Fan Controller View |
STEP 6: ADD CLICK LISTENER FOR CONTROLLING
To add behavior to the custom view, add an OnClickListener() to the DialView init{} method to perform an action when the user taps the view. Each tap should move the selection indicator to the next position: 0-1-2-3 and back to 0. Also, if the selection is 1 or higher, change the background from gray to green (indicating that the fan power is on):
Add the init{} method after constructor definition or anywhere you want.
init {
setOnClickListener {
mActiveSelection = (mActiveSelection+1) % SELECTION_COUNT
if (mActiveSelection >= 1){
mDialPaint.color = Color.GREEN
}else{
mDialPaint.color = Color.GRAY
}
invalidate()
}
}
The invalidate() method of View invalidates the entire view, forcing a call to onDraw() to redraw the view. If something in your custom view changes and the change needs to be displayed, you need to call invalidate().
now
Run the app. Tap the DialView element to move the indicator from 0 to 1. The dial should turn green. With each tap, the indicator should move to the next position. When the indicator reaches 0, the dial should turn gray.
Complete source code will available shortly
