Slide 1

Slide 1 text

Mastering Android Layouts - Workshop Rebecca Franks

Slide 2

Slide 2 text

Aim for this workshop - Be comfortable with different layout types - Be comfortable with ConstraintLayout and the layout editor - Understand when to choose what type of layout - Know how to write custom layouts - Know how to profile layouts and improve them

Slide 3

Slide 3 text

Let’s try build this layout

Slide 4

Slide 4 text

Draw Process in Android Inflation Measure Layout Draw Uses a Depth-First Traversal Source: Huyen Tue Dao https://speakerdeck.com/queencodemonkey/philly-ete- 2017-loving-lean-android-layouts

Slide 5

Slide 5 text

Draw Process in Android Inflation Measure - onMeasure Layout Draw Parent will measure each child Child calculates measured width and height Measure own (if any) children

Slide 6

Slide 6 text

Draw Process in Android Inflation Measure Layout - onLayout() Draw Parent sizes and positions child

Slide 7

Slide 7 text

Draw Process in Android Inflation Measure Layout Draw - onDraw() Parent Draws Parent tells children to draw

Slide 8

Slide 8 text

Types of Android Layouts

Slide 9

Slide 9 text

LinearLayout - Aligns children in a single direction - horizontal or vertical - Can use weights (but please avoid this!)

Slide 10

Slide 10 text

RelativeLayout - Layout that allows you to align objects relative to each other or relative to the parent

Slide 11

Slide 11 text

FrameLayout - Generally used to hold one single child view (or create a Frame around something :) ) - Child views are drawn in stack, most recent on top - Can add multiple views and control “z-order” - Useful for: - Hiding/showing error layouts - Fragment stacking - Overlaying content - Can set padding and margins

Slide 12

Slide 12 text

ScrollView & NestedScrollView - Allows the view hierarchy placed within it to be scrolled - Extends FrameLayout - only one child NestedScrollView - Allows scrolling within another ScrollView

Slide 13

Slide 13 text

ConstraintLayout

Slide 14

Slide 14 text

ConstraintLayout - Released at Google I/O 2016 - Very similar to iOS layouts - Great IDE support - Ability to do complex layouts - Better performance due to less nesting required - Supports API +9 - Not bundled as part of Android SDK - Better UI builder

Slide 15

Slide 15 text

ConstraintLayout - Cassowary algorithm - Constraints are expressed as a set of equations : a[1]x[1] + ... + a[n]x[n] = b a[1]x[1] + ... + a[n]x[n] <= b a[1]x[1] + ... + a[n]x[n] >= b

Slide 16

Slide 16 text

DEMO: Constraint Layout Walkthrough

Slide 17

Slide 17 text

Constraints - A constraint is the relationship between two views in the layout - Controls how those views will be positioned within the layout.

Slide 18

Slide 18 text

Chains - Specific kind of constraint which allow us to share space between the views within the chain - Control how the available space is divided between them - Similar to weights in LinearLayout

Slide 19

Slide 19 text

Guidelines - A guideline is a visual guide which will not be seen at runtime that is used align other views to - Can be oriented either horizontally or vertically

Slide 20

Slide 20 text

Dimensions - Fixed aspect ratio - Useful for images or Video players etc - Can also use PercentLayout (but why? :) ) - Specify size of view with dimension w:h

Slide 21

Slide 21 text

Barriers - A Barrier is a virtual view, similar to a Guideline, to which we can constrain objects. - Barrier is determined by dimensions of multiple views

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Reusing Layouts - Many ways to reuse layouts - If exactly the same list of views, use a RecyclerView, don’t duplicate the views over and over - Ways to reuse layouts: - Extract complex View code into a Custom View if required - Extract commonly used elements into common layout and then use tag to include a layout

Slide 24

Slide 24 text

Other Layout types - AbsoluteLayout - Avoid don’t specify absolute positions! - GridLayout - Avoid and rather use RecyclerView - GridView/ListView - Avoid and rather use RecyclerView - TabHost - Avoid and rather use ViewPager with Design TabLayout - TableLayout - Only use if you really need to - Space - can be used to create gaps between views if required, probably not needed often

Slide 25

Slide 25 text

Custom Views

Slide 26

Slide 26 text

Custom Views - Compound View - Set of views that are combined together to create a “compound view” - i.e. a Video Player View, that contains the video player controls and the video player. - Custom View - Draw on a canvas, circles squares etc.

Slide 27

Slide 27 text

Custom View - Extend View / FrameLayout - Define custom attributes on View

Slide 28

Slide 28 text

Custom View

Slide 29

Slide 29 text

Custom View public class VideoPlayerView extends FrameLayout { public VideoPlayerView(Context context, AttributeSet attrs) { super(context, attrs); TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.VideoPlayerView, 0, 0); Drawable imageViewPlayIcon = a.getDrawable(R.styleable.DStvVideoPlayerView_playIcon); a.recycle(); } }

Slide 30

Slide 30 text

Performance Tools for layouts

Slide 31

Slide 31 text

Where are the problems? Deep Hierarchies increase complexity

Slide 32

Slide 32 text

Where are the problems? Change in size/position Starts measure/layout starting at root

Slide 33

Slide 33 text

Where are the problems? Some layouts need multiple measure/layout passes ie RelativeLayout, weights on LinearLayout

Slide 34

Slide 34 text

Where are the problems? Lists of many copies of same complex layout

Slide 35

Slide 35 text

Problems with Android Layouts - Difficult to create complex layouts - Nesting becomes a big problem for performance -> less layouts the better - Number of Executions of onMeasure()/onLayout() cause perf issues - JANK - HOW DO I KNOW WHAT I’M DOING WRONG!?!

Slide 36

Slide 36 text

Why should you care about performance? - You need to render layout at 60FPS - Leaves you with 16ms to draw one frame. (one render to the screen) - If you don’t manage to draw a view in that time or less, the System won’t render it and it will be classified as a SKIPPED FRAME - This term is then known as JANK - You need to be able to draw, only what you need, when you need it. - You don’t want to be redrawing the same thing over and over

Slide 37

Slide 37 text

Hierarchy Viewer/ Layout Inspector - Visualize your apps view hierarchy - Profiles rendering speed - Good for: - Simplifying view hierarchy - Finding rendering bottlenecks

Slide 38

Slide 38 text

DEMO: Layout Inspector Walkthrough

Slide 39

Slide 39 text

GPU Overdraw - Colour coding to show how many times a pixel is drawn on the screen - Useful for: - Reducing rendering overhead

Slide 40

Slide 40 text

Profile GPU Rendering - Quick Visual representation of how much time it takes to render the frames of a UI view. - 16ms per frame benchmark - Good for: - Looking for spikes in rendering frames - Quickly gauging performance of 16ms benchmark

Slide 41

Slide 41 text

Making your application look good

Slide 42

Slide 42 text

Design in Android have come a long way Building layouts has too...

Slide 43

Slide 43 text

Material Design - No one likes an ugly app - Use Material design guidelines, palettes, patterns etc - material.io - Don’t use Holo stuff! - Use the design support libraries - Your app will look great - easily

Slide 44

Slide 44 text

Design Support Library - https://material.io/components/android/catalog/ - FloatingActionButton - NavigationDrawer - TextInputLayout - Toolbar - CardView - TabLayout - BottomNavigationView - BottomSheet - Snackbar

Slide 45

Slide 45 text

General Layout Tips - Don’t nest weights - Don’t have useless views - Don’t nest your layouts too deep - Take Lints Advice! - Don’t draw in the same area lots of times! - Know the difference between RecyclerView and ListView - Use Support Library components over system components (up to date and bugs get fixed!) - Use Material design as default, please no Holo Looks

Slide 46

Slide 46 text

Q & A

Slide 47

Slide 47 text

Task 1 Create a layout that will be used in a RecyclerView with 3 TextViews and an ImageView.

Slide 48

Slide 48 text

Task 2 Create a layout with 3 buttons at the bottom, an ImageView at the top, a caption and the address.

Slide 49

Slide 49 text

Task 3 Build this screen using ConstraintLayout Accent Color: #FF1744 Resources: http://bit.ly/droid-layout

Slide 50

Slide 50 text

Task 3 - My solution Build this screen using ConstraintLayout Accent Color: #FF1744 Resources: http://bit.ly/droid-layout https://github.com/riggaroo/ConstraintLayoutDemo

Slide 51

Slide 51 text

Resources - Follow these people on twitter: - Nicolas Roard https://twitter.com/camaelon - John Hofard https://twitter.com/johnhoford - Huyen Tue Dao https://twitter.com/queencodemonkey - Mark Allison https://twitter.com/MarkIAllison - ConstraintLayout Resources - https://www.youtube.com/watch?v=yT22cqCGjQQ - https://www.youtube.com/watch?v=Xx4aRI3oQbM - http://wiresareobsolete.com/2016/07/constraintlayout-part-1/ - http://wiresareobsolete.com/2016/07/constraintlayout-part-2/ - https://codelabs.developers.google.com/codelabs/constraint-layout/#0