Android Custom views

Custom views
Matej Vukosav
05.04.2018

Coding options
1. bunch of default android views
- easier to code
- faster
2. custom views

Why DO?
- code readability
- reusability

Why DO?
- code readability
- reusability
- improved performance

Why DO?
- code readability
- reusability
- improved performance
- endless possibilities

Why NOT?
- Can be tricky to implement

Why NOT?
- Time consuming
- you need to handle everything by yourself
- style, font, text size, rendering on different screens, scaling, aspect ratio, zoom,
- all kind of click listeners, orientation

Why NOT?
- Time consuming
- you need to handle everything by yourself
- style, font, text size, rendering on different screens, scaling, aspect ratio, zoom,
- all kind of click listeners, orientation
- required more coding skill

Ideas
- volume control
- color picker

Ideas
- volume control
- color picker
- compass

Ideas
- volume control
- color picker
- compass
- graph

Ideas
- volume control
- color picker
- compass
- graphs

Ideas
- volume control
- color picker
- compass
- graph
- measurement

How Android draws views?
XML layout -> instantiated -> inflated -> allocated views ->

XML layout -> instantiated -> inflated -> allocated views -> view hierarchy

Phases before view hierarchy comes to screen:
1. measure
2. layout
3. draw

1. measure -> onMeasure()
2. layout
3. draw

2. layout -> onLayout()
3. draw

3. draw -> onDraw()

a. measure the view and its content
b. find how big view should be
c. must call setMeasuredDimension( width, height)
3. draw -> onDraw()

a. assign a size and position to each of its children
3. draw -> onDraw()

3. draw -> onDraw()
a. draw on canvas

Approaches
2 general ways
- extend the existing view class
- Button, TextView, EditText, CheckBox, RadioButton

Approaches
2 general ways
- extend the existing view class
- Button, TextView, EditText, CheckBox, RadioButton
- extend the base view class/group class

Extend the view base class
- extend View class (or subclass)
import android.view.View;
public class MyCustomView extends View{
...
}

- constructors
...
}

- constructors
- 4 of them
}

- constructors
- 4 of them
- but we only need 2
}

Constructors
1. Create new from code - View (Context context)
2. Create from XML - View(Context context, AttributeSet attrs)
3. Create from XML with a style from theme attribute - View(Context
context,AttributeSet atts, int deffStyleAttr)
4. Create from XML with a style from theme attribute or style resource -
View(Context context,AttributeSet atts, int deffStyleAttr, int defStyleRes)

Constructors
Don’t chain constructors using this!

Constructors
public CustomTextView( Context context ) {
this( context, null );
}
public CustomTextView( Context context, AttributeSet attrs ) {
this( context, attrs, 0 );
}
public CustomTextView( Context context, AttributeSet attrs, int defStyleAttr )
{
super( context, attrs, defStyleAttr );
...more code...
}

Constructors
<TextView
android:id="@+id/text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...
android:text="This is some random irrelevant text."/>
<com.vuki.custom.view.CustomTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/text_view"
...
android:text="This is some random irrelevant text."/>

Constructors
}

Constructors
}
TEXT VIEW CLASS
public TextView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, R.attr.textViewStyle);
}
super(context, attrs, defStyleAttr );

Constructors
}
public TextView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, R.attr.textViewStyle);
}
super(context, attrs, defStyleAttr ); ??

Constructors
public CustomTextView( Context context ) {
super( context );
init();
}
super( context, attrs);
init();
}
public CustomTextView( Context context, AttributeSet attrs, int defStyleAttr )
{
super( context, attrs, defStyleAttr );
init();
}
void init(){
...more code..
}

Ok! Can we finally draw
something?

Steps
- constructors - DONE ✔️
- override methods

Steps
- override methods ( starts with ‘on’ )
- onDraw()
- onMeasure()
- onLayout()
- onSizeChanged()
- ...

Steps
- override methods ( starts with ‘on’ )
- onDraw()
- onMeasure()
- onLayout()
- onSizeChanged()

onDraw()
- delivers canvas
- draw
- 2D graphics,
- other standard or custom components,
- styled text,
- or anything else you can think of.

Primitives
- lines -> drawLine(..)
- circles -> drawCircle(...)
- rectangles -> drawRect(..)
- oval -> drawOval(...)
- points -> drawPoint(..)

Ugly Car?
canvas.drawCircle(x1,y1,radius,paint) canvas.drawCircle(x2,y2,radius,paint)
canvas.drawRect(rect1, paint)
canvas.drawRect(rect1, paint)

What we can do to make it
better?

What we can do to make it better?
Introduce:
- Paint

Paint
- “class that holds the style and color information about how to draw
geometries, text and bitmap”
- canvas.drawSomething( params… , paint)

Introduce:
- Paint
- Path

Path
- moveTo()
- lineTo()
- bezier
- quadTo() - quadratic bezier
- cubicTo() - cubic bezier
- clipping path
- op (Path, Op)

Path
- moveTo()
- lineTo()
- bezier
- quadTo() - quadratic bezier
- cubicTo() - cubic bezier
- clipping path
- op (Path, Op)
- The logical operation that can be performed
when combining two paths.

Introduce:
- Paint
- Path
- Shaders

Shaders
“Shader is the based class for objects that return horizontal spans of colors during
drawing.”

Shaders
- LinearGradient
- RadialGradient
- SweepGradient
- BitmapGradient
- ComposeGradient

ColorFilter
- used with Paint
- modify color of pixels
- LightningColorFilter
- ColorMatrixColorFilter
- PorterDuffColorFilter

ColorFilter

ColorFilter
InvertColorMatrix
1, 0, 0, 0, 0 // red
0, 1, 0, 0, 0 //green
0, 0, 1, 0, 0 //blue
0, 0, 0, 1, 0 //alpha
new ColorMatrixColorFilter (matrix)
Grayscale
Sepia

PorterDuff.Mode
- “Composing Digital Images”
- 12 compositing operators
- alpha compositing modes

PorterDuff.Mode
- 12 compositing operators
- alpha compositing modes
- blending modes

ColorFilter
PorterDuff.Mode.SRC_IN
PorterDuff.Mode.XOR

Animations
- animating view properties

Animations
- ObjectAnimator
- animate with reflection
- ViewPropertyAnimator
- animate some of standard view
properties
- ValueAnimator
- animate some of standar
- AnimatorSet
- chain multiple animators
ObjectAnimator animX =
ObjectAnimator.ofFloat(myView, "x", 50f);
- view must have setter for property
- automatically update the view

Animations
- ObjectAnimator
properties
- ValueAnimator
- animate some of standar
- AnimatorSet
someView.animate()
.alpha(1f)
.scaleX(2.f)
.scaleY(1.f);

Animations
- ObjectAnimator
properties
- ValueAnimator
- any number of properties
- AnimatorSet
PropertyValuesHolder
- holds information about a property
valueAnimator
.setInterpolator( new LinearInterpolator() )
.setEvaluator( new FloatEvaluator() )
.setDuration( 3000 )
.setRepeatCount( INFINITE )
.setRepeatMode( RESTART)
- must implement update listener

Animations
- ObjectAnimator
properties
- ValueAnimator
- AnimatorSet
PropertyValuesHolder x;
PropertyValuesHolder y;
x=PropertyValuesHolder.ofFloat(“propX”,0,5f)
y=PropertyValuesHolder.ofInt(“propY”,0,30)
valueAnimator.setValues(x,y);
valueAnimator.addUpdateListener({
…..
=animation.getAnimatedValue(“propX”)
=animation.getAnimatedValue(“propY”)
….
})

Animations
- ObjectAnimator
properties
- ValueAnimator
- PropertyValueHolder
- AnimatorSet
animatorSet
.playSequentially( anim1, anim2)
.playTogether( anim1, anim2 )

State changed
- requestLayout()
- view update through its lifecycle
- invalidate()
- redraw the view
- invalidate from UI thread
- postInvalidate()
- invalidate from non UI thread

Animations
valueAnimator.addUpdateListener({
…..
=animation.getAnimatedValue(“propX”)
=animation.getAnimatedValue(“propY”)
invalidate()
….
})

Now you know
- View anatomy
- How Android draw views
- How we draw views
- View constructors
- View methods
- Paint
- Path
- Shaders
- ColorFilter
- Animations

Takeaway
- don’t instantiate objects in onDraw() method!!
- clipping is expensive!
- eliminate unnecessary calls to invalidate()
- chain animation properties
- endless possibilities
- it’s fun!

What you can’t do
- create 3D graphics (need to use SurfaceView)

Literature
http://chiuki.github.io/android-shaders-filters/#/
https://engineering.upgrad.com/custom-views-in-android-80da90f7d683
https://medium.com/@britt.barak/layout-once-layout-twice-sold-aef156ff16a4
https://medium.com/@britt.barak/measure-layout-draw-483c6a4d2fab
https://robots.thoughtbot.com/android-interpolators-a-visual-guide
https://android.jlelse.eu/become-an-android-painter-aadf91cec9d4

Literature
https://android-developers.googleblog.com/2011/05/introducing-
viewpropertyanimator.htm
http://blog.danlew.net/2016/07/19/a-deep-dive-into-android-view-constructors/
https://developer.android.com/guide/topics/ui/custom-components.html
https://academy.realm.io/posts/360andev-huyen-tue-dao-measure-layout-
draw-repeat-custom-views-and-viewgroups-android/
https://medium.com/google-developers/draw-what-you-see-and-clip-the-e11-
out-of-the-rest-6df58c47873e

Literature
https://developer.android.com/training/custom-views/create-view.html
https://code.tutsplus.com/tutorials/manipulate-visual-effects-with-the-
colormatrixfilter-and-convolutionfilter--active-3221#comment-45378
https://tech.recruit-mp.co.jp/mobile/remember_canvas2/
https://www.w3.org/TR/SVG/painting.html#FillProperties
https://developer.android.com/guide/topics/resources/animation-resource.html
https://developer.android.com/guide/topics/graphics/prop-
animation.html#object-animator

Images
1. https://2.bp.blogspot.com/-
yFADYUlhdy8/WDPAvFCV0NI/AAAAAAAAnmk/b5-
p6q39_N0bt5eThqtv65yZz4MIg3l8gCLcB/s1600/Crossroads-choice-
dilemma-580x427.jpg
2. http://www.cartoonspot.net/looney-tunes/road-runner-picture.php

Code examples
https://github.com/MatejVukosav/ConceptVie
w

Android Custom views

More Related Content

Similar to Android Custom views (20)

Recently uploaded (20)

Android Custom views