Let’s use Xfermode to draw a circled avatar.
The original avatar image is this:
We will implement a custom view that clips it into a circle.
class Avatar @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : View(context, attrs, defStyleAttr) { private val WIDTH = dp2px(300) private val PADDING = dp2px(50) val paint = Paint(Paint.ANTI_ALIAS_FLAG) val bitmap = getAvatar(WIDTH.toInt()) val xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN) val savedArea = RectF() override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { super.
In this tutorial let’s see how to draw a piechart.
class PieChart @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : View(context, attrs, defStyleAttr) { val paint: Paint = Paint(Paint.ANTI_ALIAS_FLAG) val bounds: RectF = RectF() val RADIUS = dp2px(150) val OFFSET = dp2px(50) var offsetIndex = 2 val angles = arrayOf(60.0f, 120.0f, 30.0f, 150.0f) val colors = arrayOf("#07004d", "#2d82b7", "#42e2b8", "#f3dfbf") override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { super.
Today let’s draw a dashboard meter.
I have drawn the blueprint this time:
Here is the code:
class Dashboard @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : View(context, attrs, defStyleAttr) { private val BOTTOM_ANGLE = 120 private val RADIUS = dp2px(150) private val ARM_LENGTH = dp2px(120) private val DASH_WIDTH = dp2px(2) private val DASH_LENGTH = dp2px(10) private val DASH_NUM = 12 private val paint = Paint(Paint.
Do you think Computer Science equals building websites and mobile apps?
Are you feeling that you are doing repetitive and not so intelligent work?
Are you feeling a bit sick about reading manuals and copy-pasting code and keep poking around until it works all day long?
Do you want to understand the soul of Computer Science?
If yes, read SICP!!!
I rewatched the Lecture 7A again and found that I never really understand the second half.
We often hear 3 words: app bar, action bar and tool bar. Let’s make clear of them first:
app bar: the name of the UI element/bar at the top of the app. action bar: the previous implementation of app bar, comes with some themes by default. But should not really be used anymore. tool bar: the current implementation of app bar. Should be used in replacement of action bar. Let’s create an empty project and see what it looks like by default:
