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
   

   View Slide

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
   

   View Slide

3. Let’s try build this layout
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

8. Types of Android Layouts
   

   View Slide

9. LinearLayout
   - Aligns children in a single direction - horizontal or
   vertical
   - Can use weights (but please avoid this!)
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="horizontal" >
   
   
   ... />
   
   

   View Slide

10. RelativeLayout
    - Layout that allows you to align objects relative
    to each other or relative to the parent
    
    
    android:id="@+id/dates"
    android:layout_below="@id/name"
    android:layout_alignParentLeft="true"
    android:layout_toLeftOf="@+id/times" />
    android:id="@id/times"
    android:layout_below="@id/name"
    android:layout_alignParentRight="true" />
    
    

    View Slide

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
    

    View Slide

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

    View Slide

13. ConstraintLayout
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. DEMO: Constraint Layout
    Walkthrough
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

22. View Slide

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 tag to
    include a layout
    
    

    View Slide

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
    

    View Slide

25. Custom Views
    

    View Slide

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.
    

    View Slide

27. Custom View
    - Extend View / FrameLayout
    - Define custom attributes on View
    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">
    
    

    View Slide

28. Custom View
    
    
    
    
    
    

    View Slide

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();
    }
    }
    

    View Slide

30. Performance Tools for layouts
    

    View Slide

31. Where are the problems?
    Deep Hierarchies increase complexity
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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!?!
    

    View Slide

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
    

    View Slide

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

    View Slide

38. DEMO: Layout Inspector
    Walkthrough
    

    View Slide

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

    View Slide

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
    

    View Slide

41. Making your application look
    good
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

46. Q & A
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide