Slide 1
Slide 1 text
Android UI
Patterns, Practices, Pitfalls
@chris_h_codes
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
https:/
/github.com/aosp-mirror/.../View.java
Slide 5
Slide 5 text
CSS
IS
AWESOME
Slide 6
Slide 6 text
ViewGroup View
Slide 7
Slide 7 text
ViewGroup
override fun onMeasure(
widthSpec: Int,
heightSpec: Int
)\
Slide 8
Slide 8 text
override fun onLayout(
changed: Boolean,
left: Int,
top: Int,
right: Int,
bottom: Int
)
ViewGroup
override fun onMeasure(
widthSpec: Int,
heightSpec: Int
)\
Slide 9
Slide 9 text
FrameLayout
AbsoluteLayout
LinearLayout
RelativeLayout
ListView
Slide 10
Slide 10 text
GridLayout
ConstraintLayout
CoordinatorLayout
NestedScrollView
RecyclerView
Slide 11
Slide 11 text
ConstraintLayout
Slide 12
Slide 12 text
Slide 13
Slide 13 text
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Slide 16
Slide 16 text
Slide 17
Slide 17 text
Text label
This tag and its children can be replaced by one and a compound drawable
Slide 18
Slide 18 text
override fun onMeasure(
widthSpec: Int,
heightSpec: Int
)/
1x
1x 1x
1x 1x 1x 1x 1x
Slide 19
Slide 19 text
override fun onMeasure(
widthSpec: Int,
heightSpec: Int
)/
1x
2x 1x
2x 2x 1x 1x 1x
Slide 20
Slide 20 text
override fun onMeasure(
widthSpec: Int,
heightSpec: Int
)/
2x
4x 2x
4x 4x 2x 2x 2x
Slide 21
Slide 21 text
Slide 22
Slide 22 text
Slide 23
Slide 23 text
ConstraintLayout
Slide 24
Slide 24 text
ConstraintLayout ConstraintLayout
Slide 25
Slide 25 text
ConstraintLayout ConstraintLayout
Slide 26
Slide 26 text
Main container
Screen container
Screen root
Recycler
List children
Slide 27
Slide 27 text
Be mindful of your ConstraintLayouts
Slide 28
Slide 28 text
Be mindful of your MotionLayouts
Slide 29
Slide 29 text
Animation Complexity
Slide 30
Slide 30 text
Animation Complexity
Easy Pretty tricky
Slide 31
Slide 31 text
Animation Complexity
view.animate()
.translationX(100f)
.alpha(0.5f)
.rotation(45f)
Easy Pretty tricky
Slide 32
Slide 32 text
Animation Complexity
view.animate()
.translationX(100f)
.alpha(0.5f)
.rotation(45f)
Easy Pretty tricky
android:animateLayoutChanges="true"
Slide 33
Slide 33 text
Animation Complexity
view.animate()
.translationX(100f)
.alpha(0.5f)
.rotation(45f)
Easy Pretty tricky
android:animateLayoutChanges="true"
viewGroup
.layoutTransition
.enableTransitionType(LayoutTransition.CHANGING)
Slide 34
Slide 34 text
Animation Complexity
view.animate()
.translationX(100f)
.alpha(0.5f)
.rotation(45f)
Easy Pretty tricky
ObjectAnimator.ofFloat(0f, 1f)\
android:animateLayoutChanges="true"
Slide 35
Slide 35 text
Animation Complexity
view.animate()
.translationX(100f)
.alpha(0.5f)
.rotation(45f)
Easy Pretty tricky
ObjectAnimator.ofFloat(object : Property ...)\
android:animateLayoutChanges="true"
Slide 36
Slide 36 text
Animation Complexity
view.animate()
.translationX(100f)
.alpha(0.5f)
.rotation(45f)
Easy Pretty tricky
android:animateLayoutChanges="true" ObjectAnimator.ofFloat(...)\
Slide 37
Slide 37 text
Animation Complexity
view.animate()
.translationX(100f)
.alpha(0.5f)
.rotation(45f)
Easy Pretty tricky
android:animateLayoutChanges="true" ObjectAnimator.ofFloat(...)\
TransitionManager
.beginDelayedTransition(viewGroup)
Slide 38
Slide 38 text
Animation Complexity
view.animate()
.translationX(100f)
.alpha(0.5f)
.rotation(45f)
Easy Pretty tricky
android:animateLayoutChanges="true" ObjectAnimator.ofFloat(...)\
TransitionManager
.beginDelayedTransition(vie
Slide 39
Slide 39 text
MotionLayout
Easy to use, declarative syntax
Seekable
Can be driven by touch
Slide 40
Slide 40 text
MotionLayout
Easy to use, declarative syntax
Seekable
Can be driven by touch
All animated views have to be direct children
Can’t easily perform shared element transitions
Slide 41
Slide 41 text
Transition Tips
Slide 42
Slide 42 text
Transition Tips
1. Make them quick, debug them slow
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
Transition Tips
1. Make them quick, debug them slow
2. Choreograph customisations with Kotlin
Slide 49
Slide 49 text
class SomeFragment : Fragment() {
sharedElementEnterTransition = TransitionInflater
.from(context)
.inflateTransition(android.R.transition.move)
}
Slide 50
Slide 50 text
sharedElementEnterTransition = TransitionInflater
.from(context)
.inflateTransition(android.R.transition.move)
Slide 51
Slide 51 text
Transitions can…
Target specific views
Exclude specific views
Have their duration, interpolation, and pathing modified
Slide 52
Slide 52 text
Slide 53
Slide 53 text
Slide 54
Slide 54 text
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
inline fun transitionSet(
block: TransitionSet.() -> Unit
): TransitionSet {
return TransitionSet().apply(block)
}
inline fun TransitionSet.addSet(
block: TransitionSet.() -> Unit
) {
addTransition(TransitionSet().apply(block))
}
inline fun TransitionSet.addTransition(
transition: Transition,
block: Transition.() -> Unit
) {
transition.apply(block)
addTransition(transition)
}
Slide 57
Slide 57 text
val transition = transitionSet {
duration = 250
addSet {
addTransition(ChangeBounds())
addTransition(ChangeTransform())
addTarget(currentFeelingTransitionName)
interpolator = FastOutSlowInInterpolator()
}
addSet {
addTransition(ChangeBounds()) { pathMotion = ArcMotion() }
addTransition(ChangeTransform())
addTransition(TextResize())
addTarget(titleTransitionName)
interpolator = FastOutLinearInInterpolator()
}
}
Slide 58
Slide 58 text
Transition Tips
1. Make them quick, debug them slow
2. Choreograph customisations with Kotlin
3. Respect your parents
Slide 59
Slide 59 text
val transition = transitionSet {
duration = 250
addSet {
addTransition(ChangeBounds())
addTarget(viewA)
interpolator = FastOutSlowInInterpolator()
}/
addSet {
addTransition(ChangeBounds()) { pathMotion = ArcMotion() }
addTransition(TextResize())
addTarget(viewB)
interpolator = FastOutLinearInInterpolator()
}/
}/
Slide 60
Slide 60 text
val transition = transitionSet {
duration = 250
addSet {
addTransition(ChangeBounds())
addTransition(ChangeTransform())
addTarget(viewA)
interpolator = FastOutSlowInInterpolator()
}/
addSet {
addTransition(ChangeBounds()) { pathMotion = ArcMotion() }
addTransition(ChangeTransform())
addTransition(TextResize())
addTarget(viewB)
interpolator = FastOutLinearInInterpolator()
}/
}/
Slide 61
Slide 61 text
Slide 62
Slide 62 text
Slide 63
Slide 63 text
Slide 64
Slide 64 text
Transition Tips
1. Make them quick, debug them slow
2. Choreograph customisations with Kotlin
3. Respect your parents
4. Remember that arc motion is a thing
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
addTransition(ChangeBounds()) {
pathMotion = ArcMotion()
}/
Slide 67
Slide 67 text
addTransition(ChangeBounds()) {
pathMotion = ArcMotionPlus()
}/
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
https:/
/github.com/neild001/ArcMotionPlus
Using the ArcMotionPlus
Using the ArcMotionPlus is straightforward. There are a just two settings
• Arc Angle
• Reflect
Neil Davies
neild001
Slide 70
Slide 70 text
https:/
/gist.github.com/chris-horner/80837fd3f3ac54052b766648d80ddbd2
class ArcMotionPlus(private val arcAngle: Float = 90f, private val reflected: Boolean = false) : PathMotion() {
override fun getPath(startX: Float, startY: Float, endX: Float, endY: Float): Path {
val start = PointF(startX, startY)
val end = PointF(endX, endY)
require(!(start.x == end.x && start.y == end.y)) { "Start and end points cannot be the same." }
require(arcAngle in 1.0..179.0) { "Arc angle must be between 1 and 179 degrees." }
val angleRadians: Double = Math.toRadians(arcAngle.toDouble())
val deltaX: Float = start.x - end.x
val deltaY: Float = start.y - end.y
val halfChordLength: Float = sqrt((deltaX * deltaX + deltaY * deltaY).toDouble()).toFloat() / 2f
val radius: Float = halfChordLength / sin(angleRadians / 2f).toFloat()
// The length of the line from the start or end point to the control point.
chris-horner / ArcMotionPlus.kt
Slide 71
Slide 71 text
Transition Tips
1. Make them quick, debug them slow
2. Choreograph customisations with Kotlin
3. Respect your parents
4. Remember that arc motion is a thing
Slide 72
Slide 72 text
ScrollView Shenanigans
Slide 73
Slide 73 text
ScrollView Shenanigans
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
Slide 78
Slide 78 text
Slide 79
Slide 79 text
Slide 80
Slide 80 text
Slide 81
Slide 81 text
Forget ActionBar
Slide 82
Slide 82 text
Slide 83
Slide 83 text
Slide 84
Slide 84 text
Slide 85
Slide 85 text
Slide 86
Slide 86 text
AndroidManifest.xml
activity_main.xml MainActivity.kt
setSupportActionBar(toolbar)
Slide 87
Slide 87 text
Toolbar
Fragment A
Slide 88
Slide 88 text
Title A
Fragment A Fragment B
Slide 89
Slide 89 text
Title B
Fragment A Fragment B
Slide 90
Slide 90 text
Title B
Fragment B
override fun onViewCreated() {
setHasOptionsMenu(true)
}
override fun onCreateOptionsMenu() {
super.onCreateOptionsMenu(menu, inflater)
menu.clear()
inflater.inflate(R.menu.screen_b, menu)
}
Slide 91
Slide 91 text
Title B
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
Title B
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
Don’t
Slide 96
Slide 96 text
Slide 97
Slide 97 text
transitionSet {
addTransition(ChangeBounds()) {
addTarget(toolbar)
}
addTransition(Slide()) {
addTarget(fromView)
addTarget(toView)
}
}
Slide 98
Slide 98 text
Styling Toolbars
Slide 99
Slide 99 text
Slide 100
Slide 100 text
Slide 101
Slide 101 text
Slide 102
Slide 102 text
Slide 103
Slide 103 text
<item name="colorPrimary">@color/blue_700</item>
<item name="colorPrimaryVariant">@color/blue_700_variant</item>
<item name="colorPrimaryDark">@color/blue_700_variant</item>
<item name="colorOnPrimary">@android:color/white</item>
<item name="colorOnPrimarySurface">@android:color/white</item>
Slide 104
Slide 104 text
<item name="colorPrimary">@color/blue_700</item>
<item name="colorPrimaryVariant">@color/blue_700_variant</item>
<item name="colorPrimaryDark">@color/blue_700_variant</item>
<item name="colorOnPrimary">@android:color/white</item>
<item name="colorOnPrimarySurface">@android:color/white</item>
Slide 105
Slide 105 text
Basically, never do this
Slide 106
Slide 106 text
Respect Themes
Slide 107
Slide 107 text
android:background="@color/backgroundPrimary"\
Slide 108
Slide 108 text
android:background="?attr/colorPrimary"\
Slide 109
Slide 109 text
Slide 110
Slide 110 text
Slide 111
Slide 111 text
Required Watching
https://www.youtube.com/watch?v=Owkf8DhAOSo
Slide 112
Slide 112 text
Inset Issues
Slide 113
Slide 113 text
Inset Issues
https://www.youtube.com/watch?v=_mGDMVRO3iE
BECOMING A MASTER
WINDOW FITTER
@chrisbanes
Slide 114
Slide 114 text
Is one of my parent ViewGroups “insets aware”?
How far down do I need to put fitsSystemWindows="true"?
How do I cope with cumulative padding?
Questions I Always Had
Slide 115
Slide 115 text
Give up
Slide 116
Slide 116 text
Always render edge-to-edge
Give up
Slide 117
Slide 117 text
override fun onCreate(savedInstanceState: Bundle?) {
// Render under the status and navigation bars.
window.decorView.systemUiVisibility =
window.decorView.systemUiVisibility or
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
}
Always render edge-to-edge
Slide 118
Slide 118 text
No content
Slide 119
Slide 119 text
toolbar.updatePaddingWithInsets(top = true)
bottomNav.updatePaddingWithInsets(bottom = true)
Slide 120
Slide 120 text
toolbar.updatePaddingWithInsets(top = true)
bottomNav.updatePaddingWithInsets(bottom = true)
Slide 121
Slide 121 text
https:/
/gist.github.com/chris-horner/4718402eb6ebd4d89b63491245a359ff
fun View.updatePaddingWithInsets(left: Boolean = false,
top: Boolean = false,
right: Boolean = false,
bottom: Boolean = false) {
doOnApplyWindowInsets { insets, padding ->
updatePadding(left = if (left) padding.left + insets.systemWindowInsetLeft else padding.left,
top = if (top) padding.top + insets.systemWindowInsetTop else padding.top,
right = if (right) padding.right + insets.systemWindowInsetRight else padding.right,
bottom = if (bottom) padding.bottom + insets.systemWindowInsetBottom else padding.bottom)
}
}
inline fun View.doOnApplyWindowInsets(crossinline block: (insets: WindowInsets, padding: Rect) -> Unit) {
// Create a snapshot of padding.
val initialPadding = Rect(paddingLeft, paddingTop, paddingRight, paddingBottom)
// Set an actual OnApplyWindowInsetsListener which proxies to the given lambda, also passing in the original padding.
chris-horner / InsetUtils.kt
Slide 122
Slide 122 text
https:/
/github.com/chrisbanes/insetter
Slide 123
Slide 123 text
Beware the Shadow Barber
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
No content
Slide 126
Slide 126 text
No content
Slide 127
Slide 127 text
No content
Slide 128
Slide 128 text
No content
Slide 129
Slide 129 text
Slide 130
Slide 130 text
Slide 131
Slide 131 text
Recycler Wrongdoings
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
No content
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
Generally, as long as you give views an
ID they’ll try and restore their state
Slide 136
Slide 136 text
You’re in a race!
Slide 137
Slide 137 text
fun onRestoreInstanceState(state: Parcelable)
You’re in a race!
Slide 138
Slide 138 text
dataStream
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.subscribe { items ->
adapter.setItems(items)
}\
Slide 139
Slide 139 text
dataStream
.replay(1)
.refCount()
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.subscribe { items ->
adapter.setItems(items)
}\
Slide 140
Slide 140 text
dataStream
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.replay(1)
.refCount()
.subscribe { items ->
adapter.setItems(items)
}\
Slide 141
Slide 141 text
Attach and put data in your adapter right
after your views are inflated
Slide 142
Slide 142 text
What Takeaways?
Slide 143
Slide 143 text
Takeaways
ConstraintLayout and MotionLayout are great! But remember
there are alternatives
Widgets sometimes have surprising properties
Handle Toolbars and window insets manually
Understand and get the most out of the theming system
Watch out for gotchas when it comes to state restoration and
rendering
Slide 144
Slide 144 text
chris_h_codes
chris-horner
chrishorner.codes
Android UI
Patterns, Practices, Pitfalls