Mastering Android Layouts - Workshop Slides

In this 4 hour workshop, Rebecca walked through the different types of layouts in Android and where they are useful. She then demonstrated how to use ConstraintLayout and what the different tool support is like with ConstraintLayout. The audience then built 3 different layouts using ConstraintLayout to try and better their skills with ConstraintLayout.

Audience: Graduate/Junior Android Developers
Location: Dynamic Visual Technologies Johannesburg, South Africa. (DVT)

Transcript

1. Mastering Android Layouts - Workshop Rebecca Franks
2. 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
3. Let’s try build this layout
4. 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
5. 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
6. Draw Process in Android Inflation Measure Layout - onLayout() Draw Parent sizes and positions child
7. Draw Process in Android Inflation Measure Layout Draw - onDraw() Parent Draws Parent tells children to draw
8. Types of Android Layouts
9. LinearLayout - Aligns children in a single direction - horizontal or vertical - Can use weights (but please avoid this!) <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <EditText... /> <EditText ... /> <Button ... /> </LinearLayout>
10. RelativeLayout - Layout that allows you to align objects relative to each other or relative to the parent <RelativeLayout ..> <EditText android:id="@+id/name" ... /> <Spinner android:id="@+id/dates" android:layout_below="@id/name" android:layout_alignParentLeft="true" android:layout_toLeftOf="@+id/times" /> <Spinner android:id="@id/times" android:layout_below="@id/name" android:layout_alignParentRight="true" /> </RelativeLayout>
11. 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
12. ScrollView & NestedScrollView - Allows the view hierarchy placed within it to be scrolled - Extends FrameLayout - only one child NestedScrollView - Allows scrolling within another ScrollView
13. ConstraintLayout
14. 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
15. 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
16. DEMO: Constraint Layout Walkthrough
17. Constraints - A constraint is the relationship between two views in the layout - Controls how those views will be positioned within the layout.
18. 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
19. 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
20. 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
21. 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
23. 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 <include> tag to include a layout <include layout="@layout/toolbar" />
24. 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
25. Custom Views
26. 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.
27. Custom View - Extend View / FrameLayout - Define custom attributes on View <com.dvt.android.presentation.video.view.VideoPlayerView android:id="@+id/video_player_widget" android:layout_width="match_parent" android:layout_height="match_parent" app:playIcon="@drawable/red_live_tv_play" app:playText="@string/activity_live_tv_play" app:prePlayImage="@color/live_tv_video_background" app:showRestartButton="false"> </com.dvt.android.presentation.video.view.VideoPlayerView>
28. Custom View <declare-styleable name="VideoPlayerView"> <attr name="playIcon" format="reference"/> <attr name="playText" format="reference"/> <attr name="showRestartButton" format="boolean"/> </declare-styleable>
29. 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(); } }
30. Performance Tools for layouts
31. Where are the problems? Deep Hierarchies increase complexity
32. Where are the problems? Change in size/position Starts measure/layout starting at root
33. Where are the problems? Some layouts need multiple measure/layout passes ie RelativeLayout, weights on LinearLayout
34. Where are the problems? Lists of many copies of same complex layout
35. 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!?!
36. 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
37. Hierarchy Viewer/ Layout Inspector - Visualize your apps view hierarchy - Profiles rendering speed - Good for: - Simplifying view hierarchy - Finding rendering bottlenecks
38. DEMO: Layout Inspector Walkthrough
39. GPU Overdraw - Colour coding to show how many times a pixel is drawn on the screen - Useful for: - Reducing rendering overhead
40. 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
41. Making your application look good
42. Design in Android have come a long way Building layouts has too...
43. 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
44. Design Support Library - https://material.io/components/android/catalog/ - FloatingActionButton - NavigationDrawer - TextInputLayout - Toolbar - CardView - TabLayout - BottomNavigationView - BottomSheet - Snackbar
45. 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
46. Q & A
47. Task 1 Create a layout that will be used in a RecyclerView with 3 TextViews and an ImageView.
48. Task 2 Create a layout with 3 buttons at the bottom, an ImageView at the top, a caption and the address.
49. Task 3 Build this screen using ConstraintLayout Accent Color: #FF1744 Resources: http://bit.ly/droid-layout
50. Task 3 - My solution Build this screen using ConstraintLayout Accent Color: #FF1744 Resources: http://bit.ly/droid-layout https://github.com/riggaroo/ConstraintLayoutDemo
51. 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